jQuery Mobile パネルを設置する

パネルウィジェットはメニューやリストが画面の右や左からスライドして出てくるUI要素です。左右それぞれにパネルを設置することも可能です。ポップアップやダイアログと違い、ページをスクロールしてもパネルを固定表示しておくことができます。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. パネルの概要
  2. 使用するデータ属性
  3. 基本的な設置方法
  4. オプション指定

【記事執筆時の環境】
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 の前か後です。途中に入れないようにしましょう。

以下は基本的なコード例です。パネルの中にはリストビューでメニューを作成しています。

オプション指定

表示位置を指定する

デフォルトでは左に表示されます。
data-position="right"」と指定すると右に表示されます。

以下は左右にパネルを設置した例です。

表示方法を指定する

data-display属性は、パネルの表示方法を指定します。

デフォルトの "reveal" では、コンテンツがスライドし後ろに隠れていたパネルが現れるような表示方法です。
"push" ではコンテンツを押し出すようにパネルとコンテンツが一緒にスライドします。
"overlay" ではコンテンツは動かず、パネルはその上にオーバーレイして表示されます。

以下は "push" と "overlay" を指定した例です。

パネルを固定する

デフォルトではページをスクロールすると、コンテンツとともにパネルもスクロールします。
data-position-fixed="true"」を指定すると、パネルは固定されスクロールされなくなります。ただし画面内にパネルの内容が表示しきれていない場合はスクロールされます。

閉じるボタンを設置する

パネルを閉じるには、パネル外をタップするかパネルをスライドしてきた方向にスワイプします。ESCキーを押しても閉じることができます。

パネル内に明示的な閉じるボタンを設置する場合は、アンカーリンクに「data-rel="close"」と指定します。

閉じる動作を無効化する

data-dismissible="false"」を指定すると、パネル外をタップしてもパネルは閉じなくなります。

data-swipe-close="false"」を指定すると、スワイプしてもパネルは閉じなくなります。

以下は閉じる動作を無効化して閉じるボタンを設置した固定パネルの例です。

スライドメニューを実現するプラグインは他にもありますが、jQuery Mobile のパネルウィジェットは非常に軽快に動作します。パネルは複数設置できますし、スマートフォンの小さな画面で大量のリンクを並べるには適した方法です。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ