jquery mobile pageContainer questions
Si je lis correctement la documentation sur: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
À l'aide de pageContainer et le rôle doit remplacer le contenu d'une page dans ma page en cours, par exemple, comme si c'était un modèle où l'en-tête et pied de page sont conservés, mais seulement le contenu est modifié.
Je suis en train de faire un exemple simple pour comprendre comment cela fonctionne, mais je vais avoir un sacré bout de temps.
Voici mon super simple exemple.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="static/css/jquery.mobile-1.1.0.min.css" type="text/css" />
<script type="text/javascript" charset="utf-8" src="static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="static/js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.mobile.changePage('page2.html',{
'pageContainer': $('#content_container'),
'role':'content'
});
});
</script>
</head>
<body >
<div data-role="page">
<div data-theme="a" data-role="header">
<div data-role="navbar" data-iconpos="top">
My Header
</div>
</div>
<div id='content_container' data-role="content">
<p>Page 1 </p>
</div>
<div data-theme="a" data-role="footer">
My Footer
</div>
</div>
</body>
</html>
Et c'est la page 2
<html>
<body>
<div data-role="page">
<p>Page 2</p>
</div>
</body>
</html>
Lorsque cette charge, au lieu de remplacer "Page 1" pour la "Page 2" - je obtenir redirigé vers une nouvelle page vide. Tous les pointeurs à ce que je fais de mal serait appréciée.
OriginalL'auteur Juan Carlos Moreno | 2012-05-08
Vous devez vous connecter pour publier un commentaire.
Vous avez une erreur de syntaxe dans votre id ici:
Le modifier (supprimer hash):
Et selon liés à la question Ouvrir un lien dans une div conteneur en JQuery Mobile, changePage() ne semble pas fonctionner pour le chargement du serveur de contenu dans un conteneur spécifique à l'intérieur de la page. Il veut changer l'ensemble de la page.
Cela fonctionne:
OriginalL'auteur jdi
voici une façon d'y parvenir par le biais de l'API, malheureusement utilisant jquery charge directement ne pas conserver les éléments de cette méthode, cependant, n'.
changePage
? J'ai besoin d'utiliser jQuery collection comme premier argument.Je crois parce que pagechange est l'événement utilisé pour changePage et pageLoad pour loadPage. Je ne sais pas pourquoi je ne pourrais pas injecter la page propperly avec changePage mais cela a fonctionné pour moi.
OriginalL'auteur Juan Carlos Moreno
Vous avez besoin d'ajouter un
data-role="content"
élément à la deuxième page. Et lepageContainer
option de lachangePage()
méthode est destinée à changer le conteneur pour toutes les pages, pas le contenant pour une page spécifique (je n'ai jamais utilisé cette option, mais je crois que c'est l'idée).Si vous faites un
console.log($.mobile.pageContainer)
vous verrez que c'est labody
élément: http://jsfiddle.net/8T35d/.Le but de cette option est de vous permettre de créer un persistante de l'INTERFACE utilisateur qui ne change pas lorsque vous appelez la
changePage()
méthode.Si vous êtes à la recherche d'un persistent en-tête/pied de page, puis jetez un oeil à cette page dans la documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html
OriginalL'auteur Jasper