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