jQuery mobile plusieurs fichiers HTML

Ce qui est assez ennuyeux, mais je suis en construction d'un site jQuery mobile. Mais si j'ai une page appelée about, je la veux dans un fichier appelé about.html. J'ai réussi à obtenir que cela fonctionne, mais du coup, je ne peux pas obtenir un lien pour ouvrir une page séparée. J'ai essayé toutes sortes de choses et maintenant j'ai une page blanche.

Voici le code de test, j'ai été déconner avec:

Index:

<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
//PhoneGap is ready
//
function onDeviceReady() {
//Empty
}
$('#about').live('pagecreate',function(event){ AboutTest(); });
$('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); });
function AboutTest(){
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: '     + device.name     + '<br />' +
'Device PhoneGap: ' + device.phonegap + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: '     + device.uuid     + '<br />' +
'Device Version: '  + device.version  + '<br />';
}
</script>
</head>
<body onload="onLoad()">
<div data-role="page" id="home">
<div data-role="header"><h2>Page 1</h2></div>
<div data-role="content">
<a href="about.html" data-url="about.html">testing</a>
</div><!-- /content -->
<div data-role="footer"><h4>Footer</h4></div>
</div><!-- /page -->
</body>
</html>

Voici ma page de test pour le lien, about.html:

 <div data-role="page" id="about" data-title="about">
<div data-role="header"><h1>Page 2</h1></div>
<div data-role="content"><p id="deviceProperties">Loading device properties...</p></div>
<div data-role="footer"><h4>Footer</h4></div>
</div>

Maintenant tout cela a bien fonctionner, le code JavaScript exécuté, etc. Puis j'ai changé quelque chose. Je ne suis pas sûr, mais je l'ai cassé et pour la vie de moi je ne peux pas le voir. L'idée de toutes les pages dans une page semble tellement stupide et sensless.

OriginalL'auteur davethecoder | 2011-05-23

  1. 4

    Ça marche pour moi, si vous supprimez le "data-url='about.html'" à partir du lien dans le contenu. Cet attribut est conçu pour la page div.

    Deuxième page (about.html) peut-être un complet de la page HTML, en tant qu'il contient le texte actuel dans le corps. jQuery Mobile fonctionne très bien de cette façon qu'il va charger tout le fichier, puis l'extrait de la page div. Vous pouvez penser de plusieurs pages dans une seule comme un moyen de mise en cache des trucs dans les DOM, si cela semble plus raisonnable!

    OriginalL'auteur Tim Niblett

  2. 1

    Votre lien de lien externe "page" doit avoir l'attribut suivant:

    rel="external"

    Vous pouvez éventuellement ajouter data-ajax="false"

    De sorte que votre lien ressemble: 

    <a href="about.html" data-url="about.html" rel="external">testing</a>

    ou 

    <a href="about.html" data-url="about.html" rel="external" data-ajax="false">testing</a>
    Pourquoi avons-nous besoin de désactiver la data-ajax et de faire fausse ? Aussi, lorsque j'ai utilisé rel, les effets de transition disparu, aucune idée de pourquoi ?

    OriginalL'auteur Siphiwo Dzingwe

  3. 0

    Vous devez inclure le code de la page 'a propos' dans la page d'index principal distinct pour la div. Sauf si vous avez une raison particulière pour avoir plus d'une page? Cela permettra également de faire de votre page se charge plus rapidement (de tout garder sur la même page).

    Donc l'indice aurait maintenant:

    <div data-role="page" id="home">
<div data-role="header"><h2>Page 1</h2></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<div data-role="page" id="about" data-title="about">
<div data-role="header"><h1>Page 2</h1></div>
<div data-role="content"><p id="deviceProperties">Loading device properties...</p>      </div>
<div data-role="footer"><h4>Footer</h4></div>
</div>

    Cela fait-il sens?

    Aussi, vous allez à travers le processus de chargement de jQuery, de sorte que vous devriez vraiment utiliser jQuery est intégré dans le DOM de navigation pour mettre à jour le div contenu - il est beaucoup plus facile! Ensuite, vous pouvez supprimer tous les onLoad() d'événements, etc.

    Si vous voulez charger la page dans un réel page externe (comme votre OP dit), vous pouvez également ajouter pour les "au sujet de" lien.

    pas si vous avez lu mon post, j'ai déjà dit que j'ai eu de travailler avec des fichiers séparés, il n'y a pas de sens et ce dans un seul fichier pas pour ce que je fais mais je vais essayer de la supplémentaires balise rel et voir si cela a un effet, mais avant il a juste travaillé, ensemble de nid d'url et les données de l'url et boom et a coulé ensuite fait quelques changements autour de ma page et ne fonctionne plus.
    Vous avez vidé votre cache et nouvelle tentative de charger la page, à droite? Si vous avez fait quelques modifications que vous aurez besoin de vider le cache du navigateur en premier....
    ouais fait le cache chose, y a tout le code html pour afficher maintenant, vient de perdre le style et le crochet ???? bizzare comme je l'ai defo eu cette course où le AboutTest() de la fonction, qui fait rempli un dossier distinct une fois qu'il avait chargé, comme le manuel dit, il doit charger toutes les pages à l'aide d'ajax ou hijax ??? il a juste arrêté ?
    il a obtenu, sur la page (about.html) la page div a data-url, et une classe, le lien est juste un lien normal, rien d'autre, le javascript événement est lié à la classe un tout fonctionne wooop

    OriginalL'auteur tatlar