jQueryのモバイルパネル
jQueryのモバイルパネルは、画面の左側に右に描画します。
パネルを作成するためのデータ役割= "パネル"プロパティを追加するには、<div>要素のidで指定されました。
あなたのパネルの内容を表示するには、HTMLの<div>タグを追加します。
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
注：パネルタグは、ページヘッダ、コンテンツの前に、または底部の構成の後に配置する必要があります。
パネルにアクセスするには、パネルを開き、リンクをクリックして、リンクのリンクパネルの<div>のidを作成する必要があります。
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
パネルの簡単な例
例
<divのデータ役割= "パネル " ID = "myPanel">
<H2>パネルヘッド.. </ H2>
<P>コンテンツパネル.. </ P>
</ DIV>
<DIVデータ-役割= "ヘッダー">
<H1>標準ページヘッダ</ H1>
</ DIV>
<DIVデータ-役割= "メイン"クラス= "UI-コンテンツ」>
<P>パネルを開くには、以下をクリックしてください。 </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline">オープンパネル</a>の
</ DIV>
<DIVデータ-役割= "フッター">
テキスト</ H1>の下部にある<H1>
</ DIV>
</ DIV>
»をお試しください
閉じるパネル
あなたはスライド式パネルを閉じるには、パネルまたは外部領域か、Escキーを押しをクリックすることができます。 あなたはスライド式パネルを閉じるには、無効にして、クリックする*属性をデーター使用することができます。
| プロパティ | 値 | 説明 | 例 |
|---|---|---|---|
| データdismissible | 真|偽 | 外側の領域を閉じるには、パネルをクリックすることで、パネルかどうかを指定します。 | 試します |
| データ・スワイプ・クローズ | 真|偽 | スライドさせることによって閉じることができるかどうかを指定します。 | 試します |
あなたは、パネルを閉じるには、ボタンを使用することができますだけでの<div> = "近い"のプロパティ]パネルのデータ-RELを追加する必要があります。 パフォーマンス上の理由から、我々はページIDにリンクhref属性ポイントを閉じる必要があります。
例
<H2>パネルヘッド.. </ H2>
<P>パネルいくつかのテキスト.. </ P>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">閉じるパネル</a>の
</ DIV>
»をお試しください
表示パネル
あなたは、表示パネルを制御するために、データ表示モードプロパティを使用することができます。
| プロパティ値 | 説明 |
|---|---|
| データ表示= "オーバーレイ" | コンテンツの表示パネル |
| データ表示= "プッシュ" | 同時に「プッシュ」パネルとページ。 |
| データ表示= "明らかに" | デフォルトのページは、パネルが表示され、スライドショーのように画面上から描画されます |
例
<divのデータ役割は= "パネル" ID = "revealPanel"データ表示= "明らかに">
<divのデータ役割= "パネル" ID = "pushPanel"データ表示= "プッシュ">
»をお試しください
パネル場所
デフォルトでは、パネルは、画面の左側に表示されます。 あなたはパネルが画面の右側に表示されたい場合は、データ位置= "右"プロパティを指定することができます。
あなたは、ページスクロールとスクロールによるパネルの内容を指定することができます。 デフォルトでは、ページのスクロールと一緒にパネル（ただし、パネルの内容は、ページの上部にまだあります）。 あなたは、パネルの内容は、ページのスクロールやスクロールで静止している実装する必要がある場合は、パネル内のデータ位置固定= "true"属性を追加することができます。