jQuery Mobile Panel
panneau jQuery Mobile attirera vers la droite sur le côté gauche de l'écran.
Désigné par l'id de l'élément <div> pour ajouter des données-role = "panel" propriété pour créer un panneau.
Ajouter des balises HTML <div> pour afficher le contenu de votre panneau:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Remarque: tag du panneau doit être placé avant la tête de page, le contenu, ou après la composition du fond.
Pour accéder au panneau, vous devez créer un identifiant panneau de lien <div> du lien, cliquez sur le lien pour ouvrir le panneau:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
Des exemples simples de panneau
Exemples
<Div data-role = "panel " id = "MyPanel">
<H2> tête de panneau .. </ h2>
<P> panneau Contenu .. </ p>
</ Div>
<Div data-role = "header">
<H1> en-tête de page standard </ h1>
</ Div>
<Div data-role = class "principale" = "ui-content">
<P> Cliquez ci-dessous pour ouvrir le panneau. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> </a> panneau ouvert
</ Div>
<Div data-role = "footer">
<H1> en bas du texte </ h1>
</ Div>
</ Div>
Essayez »
Fermer le panneau
Vous pouvez cliquer sur le panneau ou de la zone externe ou appuyez sur Echap pour fermer le panneau coulissant. Vous pouvez utiliser de données * attribut à désactiver, puis cliquez sur pour fermer le panneau coulissant:
| propriété | valeur | description | Exemples |
|---|---|---|---|
| données révocable | true | false | Indique si le panneau en cliquant sur le panneau pour fermer la zone extérieure. | essayer |
| données swipe-close | true | false | Indique si peut être fermée par coulissement. | essayer |
Vous pouvez utiliser le bouton pour fermer le panneau: seulement besoin d'ajouter des données-rel = "close" dans le panneau de propriétés <div> dans. Pour des raisons de performance, nous avons besoin de fermer les liens points d'attribut href à une page ID.
Exemples
<H2> tête de panneau .. </ h2>
<P> Panneau de texte .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Fermer le panneau </a>
</ Div>
Essayez »
Panneau d'affichage
Vous pouvez utiliser la propriété mode de données d'affichage pour contrôler le panneau d'affichage:
| Valeur de la propriété | description |
|---|---|
| d'affichage de données = "overlay" | Le panneau d'affichage sur le contenu |
| d'affichage de données = "push" | Simultanément panneau «push» et page. |
| d'affichage de données = "révéler" | Page par défaut puisera dans l'écran comme un diaporama, le panneau sera affiché |
Exemples
<Div data-role = "panel " id = affichage de données "revealPanel" = "révéler">
<Div data-role = "panel " id = affichage de données "pushPanel" = "push">
Essayez »
Panel Emplacement
Par défaut, le panneau sera affiché sur le côté gauche de l'écran. Si vous voulez que le panneau apparaît sur le côté droit de l'écran, vous pouvez spécifier les données-position = "right" propriété.
Vous pouvez spécifier le contenu du panneau selon la page de défilement et défilement. Par défaut, le panneau avec le défilement des pages (mais le contenu du panneau est toujours en haut de la page). Si vous avez besoin de mettre en œuvre le contenu du panneau est fixe avec la page défilement et défilement, vous pouvez ajouter le = "true" attribut data-position fixe dans le panneau: