連載：改造WebアプリケーションUIビフォー／アフター
第2回 Webアプリ改造の前に「速習！ jQuery／jQuery UI」
葛西秋雄
2010/03/05 |
 |
|
jQuery UIのプラグインをざっくり理解する
ここでは、次回（第3回）で使用するjQuery UIのDialog、Draggable、Droppableプラグインについて解説します。
■Dialogプラグインの使い方
jQuery UIのDialogプラグインを利用するには、jQueryのライブラリのほかに、jQuery UIのライブラリも組み込む必要があります。さらに、jQuery UIのテーマ（CSS）も組み込んでおきます。本稿では、jquery.comとjqueryui.comのサイトからライブラリとテーマをダウンロードする代わりに、GoogleのCDNから取り込みます。
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
</head>
|
|
| リスト16 リスト5 GoogleのCDNによるjQuery／jQuery UI（およびテーマ）の読み込み |
ダイアログを表示するには、<body>要素にdiv#dialog要素を追加します。そして、<head>要素に<script>要素を追加して次のようなコードを追加します。ここでは、jQueryのセレクタでdiv#dialog要素を検索してdialogメソッドを実行しています。これでダイアログが表示されます（図4）。
$('#dialog').dialog();
……中略……
<div id="dialog" title="jQuery UI - Dialog">
<p>
このサンプルは、jQuery UIのDialogプラグインを利用して表示しています。
</p>
</div>
|
|
| リスト17 ダイアログの表示 |
|
|
| 図4 jQuery UIのDialogプラグインでダイアログを表示した例 |
|
ダイアログのヘッダには、div#dialog要素のtitle属性に設定したタイトルが表示されます。ダイアログはドラッグして移動したり、右下のハンドルをドラッグしてリサイズしたりできます。ダイアログを閉じるには右上の［X］をクリックします。
モーダル型のダイアログを表示するには、dialogメソッドの引数にmodalオプションを追加して「true」を設定します。
$('#dialog').dialog({ modal: true });
|
|
| リスト18 モーダル・ダイアログの表示 |
|
■Draggableプラグインの使い方
Draggableプラグインは、HTML要素をドラッグできるようにします。
jQuery UIのDraggableプラグインを使用するには、<body>要素にdiv#draggable要素を追加して、<head>要素に次のようなコードを追加します。ここでは、jQueryのセレクタでdiv#draggable要素を検索してdraggableメソッドを実行しています。
$('#draggable').draggable();
<div id="draggable" class="ui-widget-content">
<p>このボックスをドラッグして移動してみてください！</p>
</div>
|
|
| リスト19 要素のドラッグ |
|
div#draggble要素をドラッグしたときにカーソルの形状を変えるには、draggableメソッドの引数にcursorオプションを追加して「move」を設定します。
$('#draggable').draggable({ cursor: 'move' });
|
|
| リスト20 ドラッグ中のカーソルを変更 |
|
div#draggable要素をドラッグして移動するときに、オリジナルの代わりにクローン（複製）を移動させるには、引数にhelperオプションを追加して「clone」を設定します（図5）。このときオリジナルとクローンを区別するために、以下のリスト21ではopacityオプションを追加して不透明度を「0.7」にしています。
$('#draggable').draggable({
cursor: 'move',
helper: 'clone',
opacity: 0.7
});
|
|
| リスト21 helperオプションによるクローンの移動 |
|
|
| 図5 div#draggableをドラッグするとクローンが移動する |
|
ドラッグした要素をターゲットの要素にドロップしないで処理を中断したときに、クローンをオリジナルの場所に戻すには、revertオプションを追加して「true」を設定します。
$('#draggable').draggable({
cursor: 'move', // 要素をドラッグしたときマウスの形状を設定
helper: 'clone', // ドラッグしたときクローンを移動させる
opacity: 0.7, // クローンの不透明度を設定
revert: true // ドラッグ操作を中断したとき元の位置に戻す
});
|
|
| リスト22 revertオプションの設定 |
|
■Droppableプラグインの使い方
Draggableプラグインでドラッグした要素をドロップするには、jQuery UIのDroppableプラグインを使用します。
リスト23では、<body>要素にdiv#draggable／div#droppable要素を追加して、マウスにより要素をドラッグ＆ドロップできるようにします。jQueryのセレクタでdiv#draggable要素を検索したら、前出のdraggableメソッドを実行してドラッグできるようにします。次に、セレクタでdiv#droppable要素を検索し、droppableメソッドを実行します。これでドラッグ＆ドロップできるようになります。
またここでは、droppableメソッドの引数にdropイベントを登録して、要素をドロップしたときにハイライトさせて「ドロップしました！」のメッセージを表示しています（図6）。Draggableメソッドの引数にrevertオプションを追加して「invalid」を設定すると、要素をドラッグしてドロップを中断したときに元の場所に戻ります。
$('#draggable').draggable({
cursor: 'move', // ドラッグしたときのカーソルを設定
revert: 'invalid' // ドロップを中断したとき元の場所に戻す
});
$('#droppable').droppable({
drop: function(event, ui) { // ドロップのイベント登録
// div#droppable要素をハイライトする
$(this).addClass('ui-state-highlight')
// div#droppable要素にメッセージを表示する
.children('p').text('ドロップしました！');
}
});
……中略……
<div id="draggable" class="ui-widget-content">
<p>このボックスをドラッグして...</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>ここにドロップしてください！</p>
</div>
|
|
| リスト23 要素のドラッグ＆ドロップ |
|
▼
div#draggable要素をドラッグして移動しドロップ
▼
|
| 図6 div#droppable要素にドロップするとハイライトしてメッセージが表示される |
|
特定の要素のみドロップできるようにするには、droppableメソッドの引数にacceptオプションを追加してドロップを許可する要素を指定します。リスト22では、div#draggable要素をドロップできるようにしています。
activeClassオプションを追加すると、div#draggable要素をドラッグしたときに、ターゲットのdiv#droppable要素をハイライト表示できます。また、activeClassオプションを追加すると、div#draggable要素がターゲットのdiv#droppable要素の領域内に完全に入りきったときに色を変えて知らせることができます。
$('#droppable').droppable({
accept: '#draggable', // ドロップを許可する要素を指定
// ドラッグしたときターゲット要素をハイライトする
activeClass: 'ui-state-hover',
// ドロップ可能になったときターゲットをアクティブにする
hoverClass: 'ui-state-active'
});
|
|
| リスト24 特定の要素のみをドロップ可能にする |
|
おわりに
今回はjQueryのAPIの使い方とjQuery UIのプラグインの使い方をざっくりと説明しましたが理解していただけましたでしょうか。最終回となる次回では、ここで説明したjQueryのAPIやプラグインを利用して「ITブック」のUIを改善します。ご期待ください。
