5
Je souhaite ouvrir le fichier .html à partir de mon fichier .js. J'ai donc utilisé $ .mobile.changePage ("fichier.html"). Dans le fichier.html ont file.js. Mais le fichier file.js n'appelle pas lorsque le fichier file.html est invoqué.
Merci d'avance.
first.js
$.mobile.changePage ("file.html");
file.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="../Scripts/file.js"/> // Could not imported
<script src="../Scripts/helperArrays.js"/> // Could not imported
<script src="../Scripts/globalVariables.js"/> // Could not imported
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="true">
<h1>Vaults</h1>
</div>
<!-- <div data-role="content" data-theme="c" id="contentVault">
<a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a>
<a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a>
</div> -->
<div data-role="content" id="content">
<ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">
<li id="listdiv" data-role="list-divider">List of Items</li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
S'il vous plaît aidez-moi ..
Salut .. comment puis-je appeler les JS externes? – Finder
Vous devez écrire votre JS dans la mode jquerymobile - comme une amélioration de la page. liez-le avec '
Lorsque JQM charge une autre page par AJAX il tire seulement dans quoi que ce soit au sein de votre div [Data- role = « page »] et rien d'autre, comme la tête
vous pouvez si vous le vouliez, inclure tout JS/CSS dans ce div, le problème est que si cette page est accessible à plusieurs reprises tout CSS va s'accumuler, mais le problème est bien pire pour JS. Vous obtenez essentiellement chaque page ajoutée au DOM, de sorte que le JS s'exécute sur l'ensemble du DOM (chaque page que vous avez chargé) si vous utilisez un sélecteur global comme $ ('div.someClass'), même en utilisant un ID isn 't une solution parfaite parce que si vous pouvez relier à la même page deux fois.
Pour les petits sites
J'ai résolu ce problème en déplaçant tout le CSS dans un fichier et pour le code JS que je veux courir chaque fois que la page est chargée, je lie au pageinit et pageshow événements JQM:
les séries d'événements pageinit lorsque la page est chargée, que jamais une fois (une fois qu'il est chargé, il reste en mémoire si vous naviguez revenir, même via un bouton de retour ce ne se déclenche pas à nouveau), pageshow d'autre part se déclenche chaque fois que la page est affichée, ev fr lorsque vous y revenez via le bouton de retour sur le navigateur par exemple. Le pageinit s'exécute quand le DOM est là, l'événement pageshow est seulement si vous avez du code qui dépend du DOM rendu et vous avez besoin d'une référence rapide à la page active via $ .mobile.activePage ou certaines données ont changé et vous devez le rafraîchir à chaque fois qu'il est affiché. Dans la plupart des cas, je n'utilise que le pageinit comme document.ready pour jQM et lie mes événements là-bas. Utilisez bind pour les éléments statiques, et on au lieu de live pour les éléments dynamiques, car les événements en direct écoutent à la racine du document, vous voulez écouter à la div page.
Pour les plus grands sites
Pour les plus grands sites il y a des avantages à lier un événement en direct à toutes les pages et la manipulation des types de pages, ainsi le code js n'est pas chargé plus une fois que.
Si vous avez des fichiers js externes avec des fonctions auxiliaires dont vous n'avez besoin qu'une seule fois, placez cela dans la tête de toutes vos pages (s'il n'y en a pas trop), si vous aviez un très gros site, vous pourriez probablement faire mieux en suivant les fichiers JS qui ont été chargés côté serveur.
Tout cela peut être évité par tout simplement ne pas utiliser AJAX pour charger de nouvelles pages, pensez donc à savoir si cette transition/effet de chargement est utile
* Voici comment je gère les grands sites de JQM: *
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){<div data-role="page" data-mypage="employeelist">Dans cet événement en direct, vous pouvez en principe avoir une instruction switch pour chaque page « nom », puis vérifiez event.type pour pageinit/pageshow ou les deux et mettre votre code là, puis chaque fois qu'une page est créée/montré cet événement sera déclenché, il sait quelle page a déclenché, puis appelle le code correspondant
J'ai finalement eu trop de code, donc J'ai construit un obj de handler ect où dans un fichier js séparé et peuvent enregistrer des gestionnaires avec l'événement en direct
est inclus les js de chaque page L'inconvénient est que tous vos js pour l'ensemble de votre site est chargé sur la première page que l'utilisateur atteint, mais minified Même un grand site est plus petit que jQuery ou jQM, cela ne devrait donc pas être un problème. L'avantage est que vous ne chargez plus tous vos JS pour chaque page via AJAX chaque fois que l'utilisateur accède à une nouvelle page.
* Note: maintenant RequireJS peut rendre cela encore plus facile à gérer
Source
2012-01-31 18:38:15
Une des nombreuses raisons pour lesquelles je n'aime pas JQM en tant que framework. Je ne recommanderais pas ceci pour n'importe qui sérieux au sujet du développement mobile. – milof
Bonne explication, merci! – misaizdaleka