Panneaux mobiles jQuery
Panneaux en jQuery Mobile va glisser à partir de la gauche ou du côté droit de l'écran avec un contenu supplémentaire.
Pour créer un panneau, ajouter le data-role="panel" attribut à un <div> élément et spécifier un id .
Ajouter toutes les balises HTML dans ce <div> que vous voulez afficher dans votre panneau:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Remarque: Le balisage du panneau doit être placé avant ou après l' en- tête, le contenu et le pied de page dans une page jQuery Mobile.
Pour accéder au panneau, créer un lien qui pointe vers l' id du panneau <div> . Lorsqu'un utilisateur clique sur le lien, le panneau est ouvert:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Voici un exemple de base de panneau:
Exemple
<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> Essayez - le vous - même » Panneaux de clôture
Vous pouvez fermer le panneau en cliquant sur l' extérieur de celui - ci, en faisant glisser ou en appuyant sur la Esc clé. Vous pouvez désactiver le clic et les fonctionnalités de glisser en ajoutant supplémentaires data-* attributs dans le panneau <div> :
| Attribut | Valeur | La description | Exemple |
|---|---|---|---|
| data-dismissible | true | false | Indique si le panneau peut être fermé en cliquant à l'extérieur de celui-ci, ou non | Essayez - le |
| data-swipe-close | true | false | Indique si le panneau peut être fermé en glissant, ou non | Essayez - le |
Vous pouvez également fermer le panneau en utilisant un bouton: Il suffit d' ajouter un lien dans le panneau <div> avec les data-rel="close" attribut attaché. Et pour des raisons de compatibilité, vous devez également spécifier le href attribut pour pointer vers l'ID de la page , l'utilisateur doit aller lors de la fermeture du panneau:
Exemple
<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> Essayez - le vous - même » Panel Display
Vous pouvez contrôler le mode du panneau avec l'attribut d'affichage de données d'affichage:
| Attribut Valeur | La description |
|---|---|
| data-display="overlay" | Affiche le panneau sur le contenu |
| data-display="push" | Anime fois le panneau et la page en même temps |
| data-display="reveal" | Défaut. Le panneau sera assis dans la page et de révéler que la page glisse loin |
Exemple
<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" > Essayez - le vous - même » Panneaux de positionnement
Par défaut, les panneaux apparaîtront sur le côté gauche de l'écran. Pour le panneau à apparaître sur le côté droit de l'écran, indiquez la data-position="right" attribut.
Vous pouvez également spécifier la façon dont le contenu du panneau doit être positionné en fonction du reste de la page lorsqu'un utilisateur commence à défiler. Par défaut, le panneau défile avec la page (mais le contenu du panneau restera en haut de la page). Si vous voulez toujours afficher le contenu de l'écran, peu importe à quel point vous faites défiler la page, ajouter le data-position-fixed="true" attribut au panneau: