jQuery Mobile のパネルは、追加のコンテンツとともに画面の左側や右側にスライドします。
パネルを作成するには、<div> 要素に data-role="panel" 属性を追加し、id を指定します。
この <div> 内にパネルに表示したい HTML マークアップを追加します:
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
注: jQuery Mobile page ページ内のヘッダー、コンテンツ、フッターの前か後に パネルマークアップを配置しなければなりません。
パネルにアクセスするには、パネル <div> の id をポイントするリンクを作成します。 ユーザがリンクをクリックすると、パネルが開きます:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
ここに、基本的なパネルの例があります:
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
</div>
<div data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
Try it Yourself »パネルを閉じるには、外側をクリックするか、スワイプするか、Escキーを押します。data-* 属性をパネル <div> に追加することで、 クリック機能とスワイプ機能を無効にすることができます:
属性 | 値 | 説明 | 例 |
---|---|---|---|
data-dismissible | true | false | パネルの外側をクリックして閉じることができるかどうかを指定する | Try it |
data-swipe-close | true | false | スワイプでパネルを閉じることができるかどうかを指定する | Try it |
ボタンを使用してパネルを閉じることもできます:パネル <div> に data-rel="close" 属性を持つリンクを追加するだけです。 また、互換性の理由から、href 属性を指定して、パネルを閉じたときに表示するページの ID をポイントする必要があります:
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
Try it Yourself »data-display 属性を使用して、パネルの表示モードを制御することができます:
属性値 | 説明 |
---|---|
data-display="overlay" | コンテンツの上にパネルを表示する |
data-display="push" | パネルとページの両方を同時にアニメーションする |
data-display="reveal" | デフォルト。 パネルはページの下のままで、ページのスライドが終ると表示する |
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">
Try it Yourself »デフォルトでは、画面の左側にパネルが表示されます。パネルが画面の右側に表示するには、data-position="right" 属性を指定します。
ユーザがスクロールを開始したときに、ページの残りの部分に応じてパネルのコンテンツをどのように配置するかを指定することもできます。 デフォルトでは、パネルはページと共にスクロールします(ただし、パネルのコンテンツはページの上にとどまります)。 ページをスクロールしても、パネルの内容を常に表示したい場合は、data-position-fixed="true" 属性をパネルに追加します: