jQuery Mobile Panel
jQuery Mobile Panel wird auf der linken Seite des Bildschirms nach rechts ziehen.
Designated durch die ID des <div> Element-Daten-Rolle hinzufügen = "Panel" Eigenschaft ein Panel zu erstellen.
Hinzufügen von HTML-Tags <div> den Inhalt Ihrer Fenster anzuzeigen:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Hinweis: Panel - Tag muss vor dem Seitenkopf, Inhalt platziert werden oder nach der Zusammensetzung des Bodens.
Um die Platte zuzugreifen, müssen Sie einen Link Panel <div> ID des Links zu erstellen, auf den Link klicken um das Panel zu öffnen:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
Einfache Beispiele Panel
Beispiele
<Div data-role = "Panel " id = "MyPanel">
<H2> Prüfungsleiter .. </ h2>
<P> Inhaltsfenster .. </ p>
</ Div>
<Div Daten-role = "header">
<H1> Standardseitenkopf </ h1>
</ Div>
<Div Daten-role = "main" class = "ui-content">
<P> unten klicken, um das Panel zu öffnen. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> offene Panel </a>
</ Div>
<Div data-role = "footer">
<H1> am unteren Rand des Textes </ h1>
</ Div>
</ Div>
Versuchen »
Close Panel
Sie können auf dem Bedienfeld klicken oder Außenbereich, oder drücken Sie Esc, um das Schiebewand zu schließen. Sie können die Schiebewand zu schließen verwenden Daten- * Attribut zu deaktivieren und klicken Sie auf:
| Immobilien | Wert | Beschreibung | Beispiele |
|---|---|---|---|
| Daten-dismissible | true | false | Gibt an, ob die Platte durch das Panel Klicken auf den äußeren Bereich zu schließen. | versuchen |
| Daten-Swipe-close | true | false | Gibt an, ob durch Verschieben geschlossen werden kann. | versuchen |
Sie können die Taste verwenden, um die Fenster zu schließen: Nur Daten-rel = "close" in Fenster Eigenschaften <div> in hinzufügen müssen. Aus Performance-Gründen müssen wir die link href Attribut verweist auf eine Seite ID zu schließen.
Beispiele
<H2> Prüfungsleiter .. </ h2>
<P> Panel-some text .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Close Panel </a>
</ Div>
Versuchen »
Anzeigetafel
Sie können die Daten-Anzeigemodus-Eigenschaft verwenden, die Anzeigetafel zu steuern:
| Eigenschaft Wert | Beschreibung |
|---|---|
| Daten-Anzeige = "overlay" | Die Anzeigetafel auf den Inhalt |
| Daten-Anzeige = "Push" | Gleichzeitig "Push" Panel und Seite. |
| Daten-Anzeige = "enthüllen" | Standardseite auf dem Bildschirm wie in einer Diashow ziehen wird, wird das Panel angezeigt werden |
Beispiele
<Div data-role = "Panel " id = "revealPanel" Daten-Display = "enthüllen">
<Div data-role = "Panel " id = "pushPanel" Daten-Anzeige = "Push">
Versuchen »
Panel-Standort
Standardmäßig wird das Panel auf der linken Seite des Bildschirms angezeigt werden. Wenn Sie die Platte erscheint auf der rechten Seite des Bildschirms wollen, können Sie die Daten-Position = "right" Eigenschaft angeben.
Sie können den Inhalt der Platte nach der Seite blättern und blättern angeben. Standardmäßig wird die Platte zusammen mit der Seite Scrollen (aber der Inhalt der Platte ist immer noch an der Spitze der Seite). Wenn Sie den Inhalt der Platte ist stationär mit der Seite blättern und blättern implementieren müssen, können Sie die Daten-Position-fixed = "true" Attribut im Panel hinzufügen: