概要
本記事では jQuery UI を使って、ボタン、ダイアログ、プログレスバー、日付ピッカー、自動補完検索を実装する方法を解説します。各機能は独立して利用可能なサンプルコードを含んでおり、すぐにプロジェクトに組み込めます。
1. スタイリッシュなボタンの作成
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Button Demo</title>
<link rel="stylesheet" href="jquery-ui/themes/ui-lightness/jquery-ui.min.css">
</head>
<body>
<button id="toggleBtn">有効／無効</button>
<button id="targetBtn">対象ボタン</button>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="button.js"></script>
</body>
</html>JavaScript (button.js)
$(function () {
$('#targetBtn').button({ disabled: false });
$('#toggleBtn').button().on('click', function () {
const btn = $('#targetBtn');
btn.button('option', 'disabled', !btn.button('option', 'disabled'));
});
});2. モーダルダイアログの実装
HTML
<button id="openDlg">開く</button>
<div id="myDialog" title="確認">
<p>本当に続行しますか？</p>
</div>JavaScript
$('#myDialog').dialog({
autoOpen: false,
modal: true,
buttons: {
はい: () => $(this).dialog('close'),
いいえ: () => alert('キャンセルされました')
}
});
$('#openDlg').button().on('click', () => $('#myDialog').dialog('open'));3. プログレスバーの表示
HTML
<div id="progress"></div>
<button id="start">開始</button>JavaScript
$('#progress').progressbar({ value: 0 });
$('#start').button().on('click', function () {
let val = 0;
const timer = setInterval(() => {
val += 2;
$('#progress').progressbar('option', 'value', val);
if (val >= 100) clearInterval(timer);
}, 50);
});4. 日付ピッカーの設置
HTML
<label>開始日<input type="text" id="from"></label>
<label>終了日<input type="text" id="to"></label>JavaScript
$('#from').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onClose: d => $('#to').datepicker('option', 'minDate', d)
});
$('#to').datepicker({ dateFormat: 'yy-mm-dd' });5. 自動補完検索
HTML
<input id="search" placeholder="番組名を入力...">
<ul id="results"></ul>JavaScript
$('#search').autocomplete({
minLength: 2,
source: (req, res) => {
$.getJSON('https://api.tvmaze.com/search/shows?q=' + req.term, data => {
res(data.map(item => ({ label: item.show.name, value: item.show.name })));
});
},
select: (e, ui) => alert('選択: ' + ui.item.value)
});6. jQuery Mobile 基本テンプレート
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery Mobile テンプレート</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.min.css">
</head>
<body>
<div data-role="page">
<header data-role="header"><h1>タイトル</h1></header>
<main data-role="content"><p>コンテンツ</p></main>
<footer data-role="footer"><h4>フッター</h4></footer>
</div>
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
</body>
</html>7. タッチイベントの活用
$(document).on('tap', () => console.log('タップ'));
$(document).on('taphold', () => console.log('ロングタップ'));
$(document).on('swipeleft swiperight', e => console.log(e.type));8. モバイルフォーム部品
<div data-role="fieldcontain">
<label for="slider">音量</label>
<input type="range" id="slider" min="0" max="100" value="50">
</div>
<div data-role="fieldcontain">
<label for="flip">通知</label>
<select id="flip" data-role="slider">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>まとめ
jQuery UI／Mobile を活用することで、ボタン、ダイアログ、プログレスバー、日付ピッカー、自動補完などの UI 部品を短時間で実装できます。モバイルでは専用のイベントやフォーム部品も用意されており、ネイティブアプリに近い操作性を Web で実現できます。