連載:改造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ビフォー/アフター」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

業務アプリInsider 記事ランキング

本日 月間
ソリューションFLASH