Comment injecter le même panneau dans plusieurs pages en utilisant jquery mobile
jQuery Mobile 1.3.1 a un très joli panneau coulissant, mais le panneau de code doit être placé dans la même page il est utilisé.
Je travaille sur une application qui a besoin d'avoir le même panneau de sur de nombreuses pages. Au lieu de répliquer le code est-il un moyen dynamique d'injecter du panneau dans ces pages, en sorte qu'il conservera la jqm fonctionnalités du panneau?
source d'informationauteur DLL
Vous devez vous connecter pour publier un commentaire.
jQuery Mobile >= 1.4
Solution:
Utiliser un Externequi peut être consulté à partir de n'importe quelle page, c'est dans le cas où vous voulez avoir le même panneau de contenu dans toutes les pages.
Ajouter le panneau de
$.mobile.pageContainer
une fois seulement surpagebeforecreate
et puis améliorer le panneau à l'aide$(".selector").panel()
.Bouton ajouter pour ouvrir le panneau dans chaque en-tête (ou où vous voulez).
Remarque: Lors de l'utilisation de groupe d'experts Externes
data-theme
doit être ajouté au panneau de div, car il n'a pas hérité de tous les styles ou d'un thème.Solution deux:
Si vous désirez faire des modifications au panneau avant d'ajouter, selon le nombre de pages dans les DOM, ajouter un panneau à chacun avec un différents ID et un bouton pour ouvrir le panneau.
Notez que vous n'avez pas besoin d'appeler n'importe quel type d'amélioration, parce que vous êtes à l'ajout de panneaux sur
pagebeforecreate
. Par conséquent, les comités d'auto-initialisé une fois que la page est créé.Remarque: assurez-vous d'utiliser
.one()
pas.on()
si vous utilisez ce dernier, les panneaux seront ajoutés à chaque fois qu'une page est créée.jQuery Mobile <= 1.3
Vous pouvez le faire de cette façon, en utilisant
pagebeforecreate
événement et en vérifiant si il n'y a pas de Panneau déjà ajouté. En gardant à l'esprit que les panneaux de balisage doivent toujours être placés avant[data-role=header]
c'est pourquoi j'ai utilisé.before()
.Il n'est pas nécessaire d'appeler n'importe quel amélioration méthode depuis panneaux sont ajoutés sur
pagebeforecreate
. Ils seront initialisé lors de cet événement.Votre panneau de
Ajouter des panneaux de façon dynamique
Mise à jour
Il y a deux d'autres méthodes à injecter "groupe d'experts Externes" dynamique.
Quelqu'un de venir à travers cette question, il y a quelque chose qui s'appelle des Panneaux Externes en JQuery Mobile 1.4+, ce qui peut rendre notre vie plus facile.
http://demos.jquerymobile.com/1.4.0/panel-external/
Vous pouvez faire quelque chose comme cela.
Pour hashcoder sa réponse au travail, vous devez initialiser le groupe d'experts externes. Également ajouter
.enhanceWithin()
de faire listviews etc afficher correctement dans le panneau.Sla ajouter un
data-rel=...
attribut pour le lien par lequel vous voulez ouvrir le panneau extérieur.