jQuery Mobile Panels
Panels in jQuery Mobile gleitet aus der linken oder der rechten Seite des Bildschirms mit zusätzlichen Inhalten.
Um ein Fenster zu erstellen, fügen Sie die data-role="panel" Attribut auf einen <div> Element und ein angeben id .
Fügen Sie alle HTML - Markup innerhalb dieses <div> , dass Sie in Ihrem Panel angezeigt werden soll:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Hinweis: Das Panel Markup vor oder nach dem Header, Inhalt und Fußzeile in einem jQuery Mobile Seite platziert werden müssen.
Um die Platte zuzugreifen, erstellen Sie einen Link, der auf die Punkte - id des Panels <div> . Wenn ein Benutzer auf den Link klickt, wird das Panel zu öffnen:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Hier ist eine Grundtafel Beispiel:
Beispiel
<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> Versuch es selber " Schluss Panels
Sie können das Panel schließen , indem Sie außerhalb Anklicken durch Streichen oder durch Drücken der Esc - Taste. Sie können durch Hinzufügen zusätzlicher das Klicken und klauen Funktionen deaktivieren data-* Attribute auf das Panel <div> :
| Attribut | Wert | Beschreibung | Beispiel |
|---|---|---|---|
| data-dismissible | true | false | Gibt an, ob die Platte durch einen Klick außerhalb davon geschlossen werden kann oder nicht | Versuch es |
| data-swipe-close | true | false | Gibt an, ob die Platte durch Streichen geschlossen werden oder nicht | Versuch es |
Sie können auch das Feld zu schließen , indem Sie eine Taste: einfach einen Link im Panel hinzufügen <div> mit der data-rel="close" Attribut mit ihm verbunden. Und aus Gründen der Kompatibilität, sollten Sie auch die angeben href Attribut der Benutzer auf die ID der Seite zu zeigen gehen sollte beim Schließen der Platte:
Beispiel
<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> Versuch es selber " Panel Display
Sie können mit dem Datenanzeigeattribut den Anzeigemodus des Panels zu steuern:
| Attributwert | Beschreibung |
|---|---|
| data-display="overlay" | Zeigt das Panel über den Inhalt |
| data-display="push" | Animiert sowohl die Platte und die Seite zur gleichen Zeit |
| data-display="reveal" | Standard. Das Gremium wird unter der Seite sitzen und zeigen, wie die Seite gleitet weg |
Beispiel
<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" > Versuch es selber " Positionierung Panels
Standardmäßig werden Module auf der linken Seite des Bildschirms angezeigt. Für das Panel auf der rechten Seite des Bildschirms angezeigt werden , die angeben , data-position="right" Attribut.
Sie können auch festlegen, wie der Inhalt der Platte sollte nach dem Rest der Seite positioniert werden, wenn ein Benutzer zu blättern beginnt. Standardmäßig wird blättern die Platte mit der Seite (aber der Inhalt der Platte oben auf der Seite bleiben). Wenn Sie immer den Inhalt der Tafel angezeigt werden soll, egal wie weit Sie die Seite scrollen, fügen Sie die data-position-fixed="true" Attribut auf der Platte: