jQuery Mobile Panel
Das Panel in jQuery Mobile gleitet von der linken Seite des Bildschirms nach rechts heraus.
Erstellen Sie ein Panel, indem Sie das Attribut data-role="panel" zu einem <div>-Element mit einer angegebenen id hinzufügen.
Fügen Sie innerhalb des <div> HTML-Markup hinzu, um Ihren Panel-Inhalt anzuzeigen:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Hinweis:Das Panel-Markup muss vor oder nach der Seite platziert werden, die aus Header, Inhalt und Footer besteht.
Um auf das Panel zuzugreifen, müssen Sie einen Link erstellen, der auf die id des <div> des Panels verweist. Klicken Sie auf den Link, um das Panel zu öffnen:
<a href="../index.html" class="ui-btn ui-btn-inline">打开面板</a>
Einfaches Panel-Beispiel
Beispiel
<div data-role="panel" id="myPanel">
<h2>Panel-Überschrift..</h2>
<p>Panel-Inhalt..</p>
</div>
<div data-role="header">
<h1>Standard-Seitenüberschrift</h1>
</div>
<div data-role="main" class="ui-content">
<p>Klicken Sie auf die Schaltfläche unten, um das Panel zu öffnen.</p>
<a href="#myPanel"class="ui-btn ui-btn-inline">Panel öffnen</a>
</div>
<div data-role="footer">
<h1>Fußzeilentext</h1>
</div>
</div>
Selbst ausprobieren »
Panel schließen
Sie können das Panel schließen, indem Sie außerhalb des Panels klicken, die Esc-Taste drücken oder wischen. Sie können das Schließen des Panels durch Wischen und Klicken deaktivieren, indem Sie die data-* Attribute verwenden:
| Attribute | Wert | Beschreibung | Beispiel |
|---|---|---|---|
| data-dismissible | true | false | Gibt an, ob das Panel durch Klicken außerhalb des Panels geschlossen werden kann. | Selbst ausprobieren |
| data-swipe-close | true | false | Gibt an, ob das Panel durch Wischen geschlossen werden kann. | Selbst ausprobieren |
Sie können eine Schaltfläche verwenden, um das Panel zu schließen: Fügen Sie einfach das Attribut data-rel="close" innerhalb des <div> des Panels hinzu. Aus Performancegründen müssen wir das href-Attribut des Schließen-Links auf die Seiten-ID verweisen.
Beispiel
<h2>Panel-Überschrift..</h2>
<p>Etwas Textinhalt im Panel..</p>
<a href="#pageone" data-rel="close"class="ui-btn ui-btn-inline">Panel schließen</a>
</div>
Selbst ausprobieren »
Panel-Anzeige
Sie können den Anzeigemodus des Panels mit dem Attribut data-display steuern:
| Attributwert | Beschreibung |
|---|---|
| data-display="overlay" | Zeigt das Panel über dem Inhalt an |
| data-display="push" | Es 'schiebt' das Panel und die Seite gleichzeitig. |
| data-display="reveal" | Standardwert; gleitet die Seite wie eine Folie vom Bildschirm und zeigt das Panel an. |
Beispiel
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">
Selbst ausprobieren »
Panel-Positionierung
Standardmäßig wird das Panel auf der linken Seite des Bildschirms angezeigt. Wenn Sie möchten, dass das Panel auf der rechten Seite des Bildschirms erscheint, können Sie das Attribut data-position="right" angeben.
Sie können angeben, ob der Inhalt des Panels mit der Seite scrollt. Standardmäßig scrollt das Panel zusammen mit der Seite (der Inhalt des Panels bleibt jedoch oben auf der Seite). Wenn der Inhalt des Panels fest sein und nicht mit der Seite scrollen soll, können Sie dem Panel das Attribut data-position-fixed="true" hinzufügen:
Andere Erweiterungen