Pages dynamiques avec jQuery Mobile

J'utilise jQuery depuis un certain temps et je fais mes premiers pas avec jQuery Mobile.Pages dynamiques avec jQuery Mobile

J'utilise index.html comme design jQuery Mobile & de mon application, qui appelle le contenu de content.php (une vue de liste de toutes les pages) dès qu'elle se charge.

J'utilise page.php pour un modèle de contenu de la page, qui affiche le contenu en fonction d'une variable, comme suit:?? Id = page.php 01 page.php id = 02 page.php id = 03 ... Et ainsi de suite. Je pensais que le meilleur moyen d'aller de l'avant serait d'avoir deux pages jQm sur index.html, une pour la page d'accueil de l'application, et une qui charge dynamiquement le contenu de page.php? Id = xx. De cette façon, je n'ai pas besoin de charger tout mon contenu dès que mon application est chargée.

Comment cela devrait-il être fait? Comment puis-je faire passer les éléments de la vue liste à la page suivante et y charger le bon contenu?

Source

2011-01-30 Adam Tal

travail exemple commenté:

Créer une page jqMobile vide (div avec le approprié des données rôle et l'id id = "dynamicPage")
Obtenez l'ID de votre lien de menu et insérez-le en tant qu'attribut de titre de la page vide.

 
    $("#appMainMenu a").live("click", function(evt){ 
    var whatpageto = $(this).attr('id'); 
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid" 
});

données de charge comme si:

 
    $('#dynamicPage').bind('pageshow', function() { 
     $('#dPage').html(''); // animate while we're loading data 
     var whatpage = $(this).attr('title'); // get the page's title we changed earlier 
     var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id. 
     var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file 
     $.get(whatpage2, function(data) { // load content from external file 
      $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div). 
      $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled. 
     }); 
});

Hope this helps. Des questions?

Source

2011-02-21 17:41:32

J'utilise JQM beta2, $ ('# dynamicPage'). Page() ne rend pas la page. L'interface utilisateur peut être renommée avec $ ('# ...'). Listview ('refresh'), etc. Plus de discussions [ici] (https://forum.jquery.com/topic/page-no-longer-enders -la-page) –

Il suffit de créer des liens avec <a href="... et cela fonctionne. JQM les charge avec AJAX

L'application que vous créez avec JQM devrait fonctionner dans n'importe quel ancien navigateur sans javascript. Le reste est pris en charge par le JQM lui-même.

[modifier]

Pour obtenir les URL et les mettre où vous voulez juste utiliser vieux .load() ou .get() plaine de l'arsenal jquery et quand vous obtenez le contenu à un div que vous vouliez -

désapprouvée: utilisation .page() de jQuery mobile

courant: appeler .trigger('create')

(cet événement ajoute des styles et des contrôles). instruction détaillée est dans ma FAQ: http://jquerymobiledictionary.pl/faq.html

Source

2011-01-31 08:07:04 naugtur

Bien que cela fonctionne généralement, la page se charge sans style. Ce que j'essaye de faire est de charger le contenu de page.php? Id = 01 dans le

existant dans mon index.html qui est déjà stylisé. –

La seule chose que vous accompliriez de cette façon serait de casser la fonctionnalité d'historique pour les pages que vous chargez. Mais cela peut être fait avec un simple appel AJAX. Je vais éditer le post. – naugtur

Mais avant de l'utiliser ... s'il vous plaît jeter un oeil à la façon dont les docs à jquerymobile.com sont faites. C'est un bon exemple. Vous ne devriez pas pirater jqm pour fonctionner de cette façon. Il suffit de créer une seule page et de lier d'autres pages. jqm va les charger avec AJAX et les ajouter à DOM. Vous obtenez ce que vous décrivez à la fin de la question et beaucoup plus. Et seule la page d'accueil est chargée au début. Vous pouvez (et en fait devriez) créer la page entière sans écrire de javascript. C'est l'idée principale lorsque l'on travaille avec jqm. – naugtur

Voici ce que je suis venu pour résoudre ce pour ma page

$("#masterList").empty(); 
var listItems = ""; 
$.each(data.Messages, function (i, item) 
{ 
    listItems += "<li><div><a href='#messageData' onclick='$(" + // Use a click handler to set the attr of detailPage div 
      '"#detailPage").attr("detailId", "'+ item.Id +  // my JSON item has an ID 
      '")' + "'>";           // note the crazy quoting 

    listItems += "Test about the item</a></li>"; 

} 
$("#masterList").append(listItems);

Pour le Detailpage j'ai utilisé le gestionnaire d'événements pageshow pour aller chercher l'objet JSON en utilisant l'identifiant et chargé l'élément de détail sur la base de l'ID dans le detailId - quelque chose comme loadDetail ($ ("# detailPage"). attr ("detailId")) et ma fonction loadDetail a fait le reste.

Malheureusement, cela va casser la stratégie d'URL pour jQuery mobile. Étant donné que l'élément sélectionné est stocké dans la page elle-même - ce n'est pas bon. Je vais essayer d'utiliser un lien externe qui est une page HTML et en passant l'ID comme argument.

Source

2011-03-10 06:36:40

Ce n'est généralement pas une bonne idée de jouer avec jquery mobile comme ça – naugtur

enter image description here

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/> 
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title> 

<script src="jquery.js"></script> 
<script src="jquery.mobile-1.0.1.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(e) { 

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create'); 
    }); 
</script> 
</head> 

<body> 
omt 
<div> 
    <div id="omtList"> 


    </div><!--/content-primary --> 
</body> 
</html>

Source

2012-03-24 04:21:28

Pages dynamiques avec jQuery Mobile

Répondre

Questions connexes