Jquerymobile - $ .mobile.changepage

StackOverflow https://stackoverflow.com/questions/4507977

  •  12-10-2019
  •  | 
  •  

Domanda

Voglio aprire il file .html dal mio file .js. Così ho usato il $ .mobile.changePage ( "file.html"). Nel file.html Hanno file.js. Ma il file.js non chiamano quando il file.html in invocato.

Grazie in anticipo.

first.js 

 $.mobile.changePage ("file.html");

file.html 

<!DOCTYPE html> 
<html> 
 <head>
 <meta charset="utf-8" /> 
 <title>jQuery Mobile Framework - Dialog Example</title> 
 <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
 <script src="jquery-1.4.4.min.js"></script>
   <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="../Scripts/file.js"/> // Could not imported
    <script src="../Scripts/helperArrays.js"/> // Could not imported
    <script src="../Scripts/globalVariables.js"/> // Could not imported
</head> 
<body> 

<div data-role="page">

  <div data-role="header" data-nobackbtn="true">
   <h1>Vaults</h1>
  </div>

 <!-- <div data-role="content" data-theme="c" id="contentVault">

   <a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a>       
   <a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a>    
  </div> -->

        <div data-role="content" id="content">  
        <ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">            
          <li id="listdiv" data-role="list-divider">List of Items</li>
        </ul>    
      </div><!-- /content -->

 </div>


</body>
</html>

Si prega di aiutare me ..

È stato utile?

Soluzione

jQuery Mobile ottiene pagine tramite la tecnologia AJAX e aggiunge il loro contenuto alla pagina corrente. Ho visto alcune comunicazioni sulla modifica del titolo della pagina a quella in entrata, in modo che siano (pianificazione?) L'accesso alla testa, ma al momento cellulare jquery non sembra caricare js esterne quando Loadin una pagina.

Ancora più importante - se si utilizza $ (document) .ready () non sarà attivato, perché era AJAX

Altri suggerimenti

Quando jQm carichi un'altra pagina attraverso AJAX si tira solo in qualche cosa all'interno del vostro div [data-role = "pagina"] e nient'altro, come la testa

Quindi, è possibile se si voleva, includere qualsiasi JS / CSS all'interno di questo div, il problema è che, se questa pagina si accede più volte qualsiasi CSS si accumulano, ma il problema è molto peggio per JS.

Si sono fondamentalmente ottenendo ogni pagina allegata al DOM, in modo che il JS viene eseguito su tutto il DOM (ogni pagina è stato caricato) se si utilizza un selettore globale come $ ( 'div.someClass'), anche utilizzando un isn ID' t una soluzione perfetta, perché se è possibile collegare alla stessa pagina due volte.


Per i siti più piccoli

Ho risolto questo spostando tutti i CSS in un unico file e per il codice JS che voglio correre ogni volta che la pagina viene caricata, mi legano al pageinit e pageshow jQm eventi: 

<script type="text/javascript">         
$("div:jqmData(role='page'):last").bind('pageinit', function(){
          //your code here - $.mobile.activePage not declared
    });

    $("div:jqmData(role='page'):last").bind('pageshow', function(){
          //your code here - $.mobile.activePage works now
    });
</script>

Le piste evento pageinit quando la pagina viene caricata, sempre e solo una volta (dopo che è stato caricato rimane in memoria se si passa di nuovo esso, anche tramite un pulsante Indietro questo non è sparato di nuovo), pageshow sugli altri fuochi a mano ogni volta che la pagina è indicata, anche quando ci si sposta di nuovo esso tramite il tasto indietro del browser per esempio.

Le piste pageinit quando il DOM è lì, l'evento pageshow è solo se si dispone di un codice che dipende dal DOM viene eseguito il rendering ed hai bisogno di un riferimento rapido alla pagina attiva attraverso $ .mobile.activePage o alcuni dati modificati e è necessario aggiornare questo ogni volta di nuovo è mostrato. Per la maggior parte degli scopi io uso solo la pageinit come document.ready per jQm e legano i miei eventi lì. Usa legano per gli elementi statici, e su invece di vivere per gli elementi dinamici, perché gli eventi dal vivo ascoltare il documento radice, si desidera ascoltare la pagina div.


Per i più grandi siti

Per i siti più grandi ci sono vantaggi ad vincolante un evento dal vivo per le pagine e gestire tipi di pagine, il codice in questo modo js non viene caricato più di una volta.

Se si dispone di file js esterni con funzioni di supporto dire che è necessario solo una volta messo che nella testa di tutte le pagine (se non ci sono troppi), se si ha un sito molto grande probabilmente si potrebbe fare meglio monitoraggio quali file JS sono stati lato server caricato.

Tutto questo può essere evitato semplicemente non utilizzando AJAX per caricare nuove pagine, in modo da pensare se tale effetto di transizione / carico la pena

* Ecco come gestire siti di grandi dimensioni jQm: *

  1. legano un evento live a tutte le pagine / finestre di dialogo pageinit ed eventi pageshow:

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

  1. I Riferimento ogni pagina con un nome: <div data-role="page" data-mypage="employeelist">

  2. In questo evento dal vivo si può sostanzialmente avere un'istruzione switch per ogni pagina "nome", e quindi controllare Event.type per pageinit / pageshow o di entrambi e mettere il vostro codice di lì, poi ogni volta che si crea una pagina / dimostrato che questo evento sarà licenziato, si sa che cosa pagina ha innescato e quindi chiama il codice corrispondente

  3. Alla fine ho avuto troppo codice, così ho costruito un oggetto gestore dove js di ogni pagina è incluso in un file js separato e possono registrare i gestori con l'evento in diretta

Lo svantaggio è che tutti i js per l'intero sito viene caricato sulla prima pagina raggiunge utenti, ma minimizzato anche un grande sito è più piccolo di jQuery o jQm quindi questo non dovrebbe essere una preoccupazione. Il vantaggio è che non sono più il caricamento di tutti i JS per ogni pagina attraverso AJAX ogni volta che l'utente naviga in una nuova pagina.

* Nota: ora RequireJS può renderlo ancora più gestibile

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top