Pagine dinamiche con jQuery Mobile

Utilizzo jQuery da un po 'di tempo e ho mosso i primi passi con jQuery Mobile.Pagine dinamiche con jQuery Mobile

Uso index.html come jQuery Mobile & design della mia app, che chiama il contenuto da content.php (una visualizzazione elenco di tutte le pagine) non appena viene caricato.

Io uso page.php per un modello contenuto della pagina, che visualizza il contenuto a seconda di una variabile, in questo modo:??? page.php id = 01 page.php id = 02 page.php id = 03 ... E così via.

Stavo pensando che il modo migliore per andare da qui sarebbe avere due "pagine" jQm su index.html, una per la homepage dell'app e una che carichi dinamicamente il contenuto da page.php? Id = xx. In questo modo non devo caricare tutti i miei contenuti non appena viene caricata la mia app.

Come dovrebbe essere fatto? Come posso rendere gli elementi della vista elenco passare alla pagina successiva e caricare il contenuto giusto in esso?

fonte

2011-01-30 Adam Tal

di lavoro ha commentato esempio:

Creare una pagina vuota jqMobile (div con l'appropriato dei dati-ruolo, e un id di id = "dynamicPage")
Ottieni l'ID del link del menu e inseriscilo come attributo titolo della pagina vuota.

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

Caricare i dati in questo modo:

 
    $('#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. 
     }); 
});

Spero che questo aiuti. Domande?

fonte

2011-02-21 17:41:32

Sto usando JQM beta2, $ ('# dynamicPage'). Page() non esegue il rendering della pagina. L'interfaccia utente può essere riorganizzata con $ ('# ... "). Listview (' refresh '), ecc. Altre discussioni [qui] (https://forum.jquery.com/topic/page-no-longer-rerenders -the-page) –

Basta creare collegamenti con <a href="... e funziona. JQM li carica con AJAX

L'app che crei con JQM dovrebbe funzionare in qualsiasi vecchio browser senza javascript. Il resto è curato dallo stesso JQM.

[modifica]

Per ottenere gli URL e metterli ovunque si desidera basta usare semplice vecchia .load() o .get() da jQuery arsenale e quando si ottiene il contenuto a un div si voleva -

deprecato: uso .pagina() da jQuery mobile

corrente: chiamare .trigger('create')

(questo evento aggiunge stili e controlli). istruzioni dettagliate sono nel mio FAQ: http://jquerymobiledictionary.pl/faq.html

fonte

2011-01-31 08:07:04 naugtur

Anche se questo funziona in generale, la pagina viene caricata senza styling. Quello che sto cercando di fare è caricare il contenuto da page.php? Id = 01 nello

esistente nel mio index.html che è già in stile. –

L'unica cosa che otterresti in questo modo sarebbe interrompere la funzionalità della cronologia per le pagine che carichi. Ma questo può essere fatto solo con una normale chiamata AJAX. Modifico il post – naugtur

Ma prima di usare questo ... si prega di dare un'occhiata a come sono fatti i documenti su jquerymobile.com. È un buon esempio Non dovresti fare in modo che jqm funzioni in questo modo. Basta creare una singola pagina e collegare altre pagine. jqm li caricherà con AJAX e aggiungerà al DOM. Ottieni ciò che descrivi alla fine della domanda e molto altro ancora. E solo la homepage è stata caricata all'inizio. Puoi (e in effetti dovrebbe) creare l'intera pagina senza dover scrivere javascript tu stesso. Questa è l'idea principale quando si lavora con jqm. – naugtur

Ecco cosa mi è venuta per risolvere questo per la mia pagina

$("#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);

Per il dettaglio ho usato il gestore di eventi pageshow per andare a prendere l'oggetto JSON utilizzando l'ID e la caricai la voce di dettaglio in base all'ID del Attributo detailId: qualcosa come loadDetail ($ ("# detailPage"). attr ("detailId")) e la mia funzione loadDetail ha fatto il resto.

Sfortunatamente questo interromperà la strategia URL per jQuery mobile. Poiché l'elemento selezionato è memorizzato nella pagina stessa, questo non va bene. Ho intenzione di provare a utilizzare un collegamento esterno che è una pagina HTML e passando l'id come argomento.

fonte

2011-03-10 06:36:40

Generalmente non è una buona idea fare confusione con jquery mobile in questo modo. – 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>

fonte

2012-03-24 04:21:28

risposta

Problemi correlati