jquery pageContainer cellulare emette

Se sto leggendo correttamente la documentazione su: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html jquery pageContainer cellulare emette

Utilizzando pageContainer e il ruolo dovrebbe sostituire il contenuto di una pagina nella mia pagina corrente, ad esempio, come se fosse un modello in cui l'intestazione e piè di pagina sono conservati ma solo i contenuti sono cambiati.

Sto provando a fare un semplice esempio per capire come funziona, ma sto passando un sacco di tempo.

Ecco il mio esempio super semplice.

<!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>

e questa è la pagina 2

<html> 
    <body> 
     <div data-role="page"> 
      <p>Page 2</p> 
     </div> 
    </body> 
</html>

Quando questa carica, invece di sostituire "Page 1" per "Page 2" vengo reindirizzato a una nuova pagina vuota. Qualsiasi suggerimento su ciò che sto facendo di sbagliato sarebbe apprezzato.

fonte

2012-05-08 Juan Carlos Moreno

Ecco un modo per ottenere questo risultato tramite l'API, purtroppo utilizzando carico di jQuery direttamente non mantenere il formato degli elementi di questo metodo tuttavia, fa.

fonte

2012-05-09 04:35:49

Perché non funziona con 'changePage'? Ho bisogno di usare una collezione jQuery come primo argomento. – Robin

Credo perché pagechange è l'evento utilizzato per changePage e pageLoad per loadPage. Non sono sicuro del motivo per cui non ho potuto iniettare la pagina in modo propizio con changePage ma questo ha funzionato per me. –

È necessario aggiungere un elemento data-role="content" alla seconda pagina. E l'opzione pageContainer del metodo changePage() ha lo scopo di cambiare il contenitore per tutte le pagine, non il contenitore per una pagina specifica (non ho mai usato questa opzione, ma credo che questa sia l'idea).

Se si fa un console.log($.mobile.pageContainer) vedrete che è l'elemento body: http://jsfiddle.net/8T35d/.

Lo scopo di questa opzione è di consentire all'utente di creare un'interfaccia utente persistente che non cambi quando si chiama il metodo changePage().

Se siete alla ricerca di un persistente intestazione/piè di pagina allora date un'occhiata a questa pagina nella documentazione: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

fonte

2012-05-08 16:18:12 Jasper

Hai un errore di sintassi nella tua id qui:

<div id='#content_container' data-role="content">

Change a (rimuovere hash):

<div id='content_container' data-role="content">

E secondo domanda relativa Open links in div container in JQuery Mobile, changepage() non sembra funzionare per conten server di carico t in un contenitore specifico all'interno della pagina. Vuole cambiare l'intera pagina.

Questo funziona:

$(document).ready(function(){ 
    $("#content_container").load("page2.html"); 
});

fonte

2012-05-08 17:08:23 jdi

Grazie, oltre alla documentazione, si sa che jquery mobile non sembra avere molto senso per quanto riguarda ciò che fornisce .... probabilmente meglio attenersi al jquery normale. –

jquery pageContainer cellulare emette

risposta

Problemi correlati