連載：改造WebアプリケーションUIビフォー／アフター

第2回 Webアプリ改造の前に「速習！ jQuery／jQuery UI」

葛西秋雄
2010/03/05
Page1 Page2 Page3

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を改善します。ご期待ください。End of Article


　INDEX
　 改造WebアプリケーションUIビフォー／アフター
　 第2回 Webアプリ改造の前に「速習！ jQuery／jQuery UI」
　   1．jQueryのHello World
　   2．jQueryのイベントを理解する
  3．jQuery UIのプラグインをざっくり理解する

インデックス・ページヘ 　「改造WebアプリケーションUIビフォー／アフター」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

は.NET開発者中心に生まれ変わりました

.NET開発者中心コーナー

- PR -

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH