jQueryのモバイルパネル
jQueryのモバイルでのパネルは、左または追加コンテンツと、画面の右側から引き出します。
パネルを作成するには、追加data-role="panel"する属性<div>要素と指定id 。
この内部の任意のHTMLマークアップを追加し<div>あなたがパネルに表示すること：
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>注：パネルのマークアップは、jQueryのモバイルページの内部ヘッダー、コンテンツ、およびフッターの前または後 に配置する必要があります。
パネルにアクセスするには、を指すリンク作成idパネルの<div> 。 ユーザーがリンクをクリックすると、パネルが開きます。
<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> »それを自分で試してみてください クロージングパネル
あなたはスワイプするか、押すことによって、それの外側をクリックしてパネルを閉じることができEscキーを。 あなたは、追加添加することにより、クリックやスワイプ機能を無効にすることができdata-*パネルに属性を<div> ：
| 属性 | 値 | 説明 | 例 |
|---|---|---|---|
| data-dismissible | true | false | パネルはそれの外側をクリックすることで閉じられて、できるか否かを指定します | それを試してみてください |
| data-swipe-close | true | false | パネルはスワイプ、またはしないことによって閉じることができるかどうかを指定します | それを試してみてください |
また、ボタンを使用してパネルを閉じることができます：ちょうどパネル内のリンクを追加し<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> »それを自分で試してみてください パネルディスプレイ
あなたは、データの表示属性を持つパネルの表示モードを制御することができます。
| 属性値 | 説明 |
|---|---|
| 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" > »それを自分で試してみてください ポジショニングパネル
デフォルトでは、パネルは画面の左側に表示されます。 パネルは、画面の右側に表示させるには、指定したdata-position="right"属性を。
また、ユーザーがスクロールを開始したときに、パネルの内容は、ページの残りの部分に応じて配置する方法を指定することができます。 デフォルトでは、パネルには、ページにスクロールします（ただし、パネルの内容は、ページの上に滞在します）。 あなたは常に関係なく、ページをスクロールどこまで、パネルの内容を表示しないようにしたい場合は、追加data-position-fixed="true"パネルに属性を：