panel

data-role=”panel”はパネルウィジェットを作成する属性です。

パネルウィジェットを利用するにはdata-role=”page”を指定した要素内にdata-role=”panel”を指定した要素を追加します。その際に任意のid属性をつけておきましょう。

<div data-role="page" id="page1">
	<div data-role="panel" id="mypanel">
		パネル部分
	</div>
	<div data-role="header">
		(中略)
	</div>
</div>

パネルを開く際にはパネルに設定したid属性をページ内リンクとして指定します。

<a href="#mypanel">Open panel</a>

開かれたパネルはパネル部分をスワイプするか、コンテンツ部分をタップするか、data-rel=”close”を指定されたリンクをクリックするかで閉じることができます。

パネルウィジェットのテーマはdata-theme属性で変更が可能です。

また、panelメソッドでJavaScriptから制御可能です。

data-role="panel"はjQuery Mobile 1.3.0で追加された属性です。

data-role="panel"で作成したパネルのデフォルトテーマは、jQuery Mobile 1.3.0では「C」のテーマでしたがjQuery Mobile 1.4.0より親のテーマが継承されるようになりました。

登録日 : 2013年01月19日最終更新日 : 2016年12月19日

jQuery Mobile リファレンス