Pourquoi je dois mettre tout le script de index.html en jquery mobile
J'ai utilisé $.mobile.changepage de faire la redirection dans mon phonegap+jquerymobile projets. Cependant, ce qui me rend confus, c'est que j'ai besoin de mettre le script de toutes les pages pour le même fichier index.html. Sinon, la page de redirection ne peut pas exécuter la fonction dans son en-tête.
par exemple, mon index.html semblent être
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
alors, mon appareil va rediriger vers test.html qui semblent être
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
Cependant, le script ne s'exécutera jamais dans test.html. Puis j'ai mis le script de index.html, ce que j'attends d'être, c'est fait. Quoi que, si je mets tout le script à la même page, le projet deviendra de plus en plus difficile à préserver. Apprécié pour votre aide.
Vous devez vous connecter pour publier un commentaire.
Intro
Cet article peut également être trouvé ICI comme une partie de mon blog.
Comment jQuery Mobile gère les changements de page
Pour comprendre cette situation, vous devez comprendre comment jQuery Mobile fonctionne. Il utilise ajax pour charger d'autres pages.
Première page est chargée normalement. Son
HEAD
etBODY
est chargé dans leDOM
, et ils sont là à attendre d'autres contenus. Lors de la deuxième page est chargée, seule saBODY
contenu est chargé dans leDOM
. Pour être plus précis, mêmeBODY
n'est pas complètement chargé. Seule la première div avec un attribut data-role="page" sera chargé, tout le reste va être mis au rebut. Même si vous disposez de plusieurs pages à l'intérieur d'unBODY
seule la première va être chargé. Cette règle s'applique uniquement aux pages suivantes, si vous avez plusieurs pages dans un premier HTML tous d'entre eux sera chargé.C'est pourquoi votre bouton est de se présenter avec succès mais l'événement de clic ne fonctionne pas. Même sur des événements dont le parent
HEAD
a été ignorées lors de la transition de page.Voici une documentation officielle: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Malheureusement, vous n'allez pas trouver cette décrites dans sa documentation. L'éther ils pensent que c'est une connaissance commune ou ils ont oublié de le décrire comme mes autres sujets. (jQuery Mobile documentation est grand, mais manque beaucoup de choses).
Solution 1
Dans votre deuxième page, et chaque autre page, déplacez votre
SCRIPT
tag dans laBODY
contenu, comme ceci:C'est une solution rapide, mais encore un laid.
De travail exemple peut être trouvé dans mon autre réponse ici: Pageshow pas déclenché après changepage
Un autre exemple de travail: Page chargés différemment avec jQuery-mobile transition
Solution 2
Déplacer tous vos javascript dans le HTML d'origine en premier. Tout rassembler et de mettre à l'intérieur d'un seul fichier js, dans un
HEAD
. Initialiser après jQuery Mobile a été chargé.À la fin, je vais expliquer pourquoi c'est une partie d'une bonne solution.
Solution 3
Utilisation dans vos boutons et tous les éléments qui vous aide à changer de page. À cause de cela ajax n'est pas destiné à être utilisé pour le chargement des pages et votre jQuery Mobile app va se comporter comme une normale de l'application web. Malheureusement, ce n'est pas une bonne solution dans votre cas. Phonegap ne doivent jamais travailler comme un élément normal de l'application web.
La documentation officielle, pour un look chapitre: La liaison sans Ajax
Solution réaliste
Solution réaliste serait d'utiliser Solution 2. Mais à la différence de la solution 2, je voudrais utiliser la même index.js fichier et l'initialiser à l'intérieur d'un
HEAD
de tous les autres page.Maintenant, vous pouvez me demander POURQUOI?
Phonegap
comme jQuery Mobile est buggé, et tôt ou tard, il va y avoir un erreur et que votre application sera un échec (y compris les chargés DOM) si tous vos js contenu est à l'intérieur d'un seul fichier HTML. DOM pourrait être effacé etPhonegap
actualiser votre page en cours. Si cette page n'ont pas javascript que cela ne fonctionnera pas jusqu'à ce qu'il soit redémarré.Les derniers mots de
Ce problème peut être facilement résolu avec une bonne page de l'architecture. Si quelqu'un est intéressé, j'ai écrit un L'ARTICLE sur les bonnes jQuery Mobile de la page de l'architecture. Dans une coquille de noix, je suis en discussion que la connaissance de la façon dont jQuery Mobile fonctionne est la chose la plus importante que vous devez savoir avant de vous pouvez réussir à créer votre première application.
Contrairement à la normale et ordinaire des pages HTML, jQuery Mobile utilise la technologie ajax lors de la navigation entre les pages. Assurez-vous donc d'importer tous vos fichiers JS et des bibliothèques dans toutes vos pages html.
Si vous remarquez de plus près, vous verrez que les fichiers JS de la page précédente est pris en considération lors du chargement de la deuxième page. Mais si vous forcez rrefresh la page en cours, puis les fichiers js de la page en cours sera efficace.
Donc, comme je l'ai dit plus tôt, assurez-vous d'importer les fichiers js dans tous les fichiers html.
Aussi, pas besoin d'appeler
deviceready
, utilisez la syntaxe suivante pour appeler votre page spécifique js fonctionsJquery Mobile utilise ajax pour charger une "page". Une "page" est ici un div avec le data-role=page. Si vous chargez une page physique index.html vous pouvez naviguer à l'aide de changePage à tout "à la page" div à l'intérieur de la page.
Cependant, si vous souhaitez charger une "page" de l'autre physique de la page, jQM charge uniquement la première "page" div de la page. Ce qui effectivement se produire est que vous n'avez pas de changement de page, jQM il suffit de charger cette "page" div à l'aide d'ajax et de l'injecter à votre page en cours.
Vous avez deux possibilités de l'architecture où vous mettez tous vos "pages" dans une page html et de naviguer à partir de là. Ou vous pouvez avoir plusieurs pages à l'architecture. Vous pouvez toujours mélanger.
Physiquement change de page, vous devez ajouter l'attribut rel=externes à votre lien.