jQuery Mobile パネルを設置する
公開日：2014年10月16日
最終更新日：2014年11月8日
パネルウィジェットはメニューやリストが画面の右や左からスライドして出てくるUI要素です。左右それぞれにパネルを設置することも可能です。ポップアップやダイアログと違い、ページをスクロールしてもパネルを固定表示しておくことができます。
«次の特集記事» jQuery Mobile 開閉式コンテンツを設置する
«前の特集記事» jQuery Mobile ポップアップの利用例
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
パネルの概要
パネルウィジェットは普段隠れていて、リンクをタップしたときにスライドして出てきます。
設置するには、コンテナ要素にデータ属性「data-role="panel"」を割り当てます。パネルの中にはリストビューでアイテムを整理して入れることができます。
デフォルトの表示位置は左ですが、右に指定することもできます。
またコンテンツにオーバーレイさせるか押し出すようにスライドするかもオプションで指定できます。
使用するデータ属性
| データ属性 | 値 | 説明 |
|---|---|---|
| data-animate | true | false | パネルを開くあるいは閉じる際にアニメーション効果を付与するかどうか | data-dismissible | true | false | パネルの外側をタップしたときパネルを閉じるかどうか |
| data-display | overlay | push | reveal | パネルの表示方法 |
| data-position | left | right | パネルの表示位置 |
| data-position-fixed | true | false | スクロールしたときパネルを固定表示するかどうか |
| data-swipe-close | true | false | スワイプしたときパネルを閉じるかどうか |
| data-theme | swatch letter (a-z) | 適用するスウォッチ |
基本的な設置方法
パネルに表示させる内容を格納するコンテナのdiv要素に、「data-role="panel"」と指定します。そしてリンク先として指定する id属性も記述します。
パネルを開くためのアンカーリンクには、そのidを指定すればいいだけです。
パネルのdiv要素を記述する場所としては、header、content、footer の前か後です。途中に入れないようにしましょう。
以下は基本的なコード例です。パネルの中にはリストビューでメニューを作成しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div data-role="page" id="top"> <div data-role="panel" id="menu-left" data-theme="b"> <ul data-role="listview"> <li data-role="list-divider">サービス</li> <li><a href="#">メール</a></li> <li><a href="#">連絡先</a></li> <li><a href="#">カレンダー</a></li> <li><a href="#">タスク</a></li> <li><a href="#">SNS</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">アプリ</a></li> <li><a href="#">ドキュメント</a></li> <li><a href="#">履歴</a></li> </ul> </div> <div data-role="header"> <a href="#menu-left" class="ui-btn ui-icon-bars ui-btn-icon-left ui-corner-all">メニュー</a> <h1>DEMOページ</h1> </div> <div role="main" class="ui-content"> <h3>パネルウィジェットデモページ</h3> <h4>デフォルト動作</h4> <p>ヘッダーのメニューボタンをクリックすると、コンテンツが右にスライドし左から隠れていたサービスメニューが現れます。</p> <p>メニュー外をクリックするかメニューをスワイプすると閉じます。<br /> ESCキーを押しても閉じます。</p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> |
オプション指定
表示位置を指定する
デフォルトでは左に表示されます。
「data-position="right"」と指定すると右に表示されます。
以下は左右にパネルを設置した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div data-role="page" id="top"> <div data-role="panel" id="menu-left" data-theme="b"> <ul data-role="listview"> <li data-role="list-divider">サービス</li> <li><a href="#">メール</a></li> <li><a href="#">連絡先</a></li> <li><a href="#">カレンダー</a></li> <li><a href="#">タスク</a></li> <li><a href="#">SNS</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">アプリ</a></li> <li><a href="#">ドキュメント</a></li> <li><a href="#">履歴</a></li> </ul> </div> <div data-role="panel" id="menu-right" data-position="right" data-theme="b"> <ul data-role="listview"> <li data-role="list-divider">設定</li> <li><a href="#">デザイン</a></li> <li><a href="#">プロフィール</a></li> <li><a href="#">パスワード</a></li> <li><a href="#">コンテンツ</a></li> <li><a href="#">ネットワーク</a></li> <li><a href="#">印刷</a></li> <li><a href="#">言語</a></li> <li><a href="#">システム</a></li> <li><a href="#">環境</a></li> <li><a href="#">設定リセット</a></li> </ul> </div> <div data-role="header"> <a href="#menu-left" class="ui-btn ui-icon-bars ui-btn-icon-left ui-corner-all">メニュー</a> <a href="#menu-right" class="ui-btn ui-icon-gear ui-btn-icon-left ui-corner-all">設定</a> <h1>DEMOページ</h1> </div> <div role="main" class="ui-content"> <h3>パネルウィジェットデモページ</h3> <h4>デフォルト動作</h4> <p>ヘッダーのメニューボタンをクリックすると、コンテンツが右にスライドし左から隠れていたサービスメニューが現れます。</p> <h4>表示位置を右に指定<br /> data-position="right"</h4> <p>ヘッダーの設定ボタンをクリックすると、コンテンツが左にスライドし右から隠れていた設定メニューが現れます。</p> <p>メニュー外をクリックするかメニューをスワイプすると閉じます。<br /> ESCキーを押しても閉じます。</p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> |
表示方法を指定する
data-display属性は、パネルの表示方法を指定します。
デフォルトの "reveal" では、コンテンツがスライドし後ろに隠れていたパネルが現れるような表示方法です。
"push" ではコンテンツを押し出すようにパネルとコンテンツが一緒にスライドします。
"overlay" ではコンテンツは動かず、パネルはその上にオーバーレイして表示されます。
以下は "push" と "overlay" を指定した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<div data-role="page" id="top"> <div data-role="panel" id="menu-left" data-theme="b" data-display="push"> <ul data-role="listview"> <li data-role="list-divider">サービス</li> <li><a href="#">メール</a></li> <li><a href="#">連絡先</a></li> <li><a href="#">カレンダー</a></li> <li><a href="#">タスク</a></li> <li><a href="#">SNS</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">アプリ</a></li> <li><a href="#">ドキュメント</a></li> <li><a href="#">履歴</a></li> </ul> </div> <div data-role="panel" id="menu-right" data-position="right" data-theme="b" data-display="overlay"> <ul data-role="listview"> <li data-role="list-divider">設定</li> <li><a href="#">デザイン</a></li> <li><a href="#">プロフィール</a></li> <li><a href="#">パスワード</a></li> <li><a href="#">コンテンツ</a></li> <li><a href="#">ネットワーク</a></li> <li><a href="#">印刷</a></li> <li><a href="#">言語</a></li> <li><a href="#">システム</a></li> <li><a href="#">環境</a></li> <li><a href="#">設定リセット</a></li> </ul> </div> <div data-role="header"> <a href="#menu-left" class="ui-btn ui-icon-bars ui-btn-icon-left ui-corner-all">メニュー</a> <a href="#menu-right" class="ui-btn ui-icon-gear ui-btn-icon-left ui-corner-all">設定</a> <h1>DEMOページ</h1> </div> <div role="main" class="ui-content"> <h3>パネルウィジェットデモページ</h3> <h4>表示方法：data-display="push"</h4> <p>ヘッダーのメニューボタンをクリックすると、左からコンテンツを押し出すようにサービスメニューが一緒にスライドして出てきます。</p> <h4>表示方法：data-display="overlay"</h4> <p>ヘッダーの設定ボタンをクリックすると、コンテンツは動かず右から設定メニューがスライドしてコンテンツの上にオーバーレイします。</p> <p>メニュー外をクリックするかメニューをスワイプすると閉じます。<br /> ESCキーを押しても閉じます。</p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> |
パネルを固定する
デフォルトではページをスクロールすると、コンテンツとともにパネルもスクロールします。
「data-position-fixed="true"」を指定すると、パネルは固定されスクロールされなくなります。ただし画面内にパネルの内容が表示しきれていない場合はスクロールされます。
閉じるボタンを設置する
パネルを閉じるには、パネル外をタップするかパネルをスライドしてきた方向にスワイプします。ESCキーを押しても閉じることができます。
パネル内に明示的な閉じるボタンを設置する場合は、アンカーリンクに「data-rel="close"」と指定します。
閉じる動作を無効化する
「data-dismissible="false"」を指定すると、パネル外をタップしてもパネルは閉じなくなります。
「data-swipe-close="false"」を指定すると、スワイプしてもパネルは閉じなくなります。
以下は閉じる動作を無効化して閉じるボタンを設置した固定パネルの例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div data-role="page" id="top"> <div data-role="panel" id="menu-left" data-theme="b" data-position-fixed="true" data-dismissible="false" data-swipe-close="false"> <ul data-role="listview"> <li data-role="list-divider">サービス</li> <li><a href="#">メール</a></li> <li><a href="#">連絡先</a></li> <li><a href="#">カレンダー</a></li> </ul> <p><a href="#top" data-rel="close" class="ui-btn ui-icon-delete ui-btn-icon-left ui-btn-inline ui-corner-all">閉じる</a></p> </div> <div data-role="header"> <a href="#menu-left" class="ui-btn ui-icon-bars ui-btn-icon-left ui-corner-all">メニュー</a> <h1>DEMOページ</h1> </div> <div role="main" class="ui-content"> <h3>パネルウィジェットデモページ</h3> <p>ヘッダーのメニューボタンをクリックすると、コンテンツが右にスライドし左から隠れていたメニューが現れます。</p> <h4>パネルの固定</h4> <p>「data-position-fixed="true"」を指定しているため、ページをスクロールしてもパネルは動きません。</p> <h4>閉じるボタンの設置</h4> <p>アンカーリンクに「data-rel="close"」を指定した閉じるボタンを設置しています。</p> <h4>閉じる動作の無効化</h4> <p>「data-dismissible="false"」と「data-swipe-close="false"」を指定しているため、パネル外のタップやスワイプではパネルを閉じることができません。</p> </div> <div data-role="footer"> <p>© 2014 Web Tips アーカイブ</p> </div> </div> |
スライドメニューを実現するプラグインは他にもありますが、jQuery Mobile のパネルウィジェットは非常に軽快に動作します。パネルは複数設置できますし、スマートフォンの小さな画面で大量のリンクを並べるには適した方法です。
«次の特集記事» jQuery Mobile 開閉式コンテンツを設置する
«前の特集記事» jQuery Mobile ポップアップの利用例
スポンサーリンク
