jquery con javascript

sto cercando di evitare di usare questo per la schermata iniziale, perché non funziona su tutti i dispositivi e per altre ragioni:jquery con javascript

<link rel="apple-touch-startup-image" href="img/splash.png" />

Così sto cercando di utilizzare questo invece funziona bene fino a quando non scorre in una nuova pagina, che viene quindi trattata come lo splash screen di nuovo (es. si spegne quando scade il timer - in questo caso 4 secondi). Come posso interrompere/limitare questo comportamento, in modo che changePage rimanga contenuto solo nella pagina iniziale?

<body> 
<div data-role="page" id="splash"> 
    <div class="splash"> 
    <img src="startup.jpg" alt="startup image" /> 

<script type='text/javascript'>//<![CDATA[ 
      $(window).load(function(){ 
      $(function() { 
       setTimeout(hideSplash, 4000); 
         }); 

      function hideSplash() { 
      $.mobile.changePage("#home", "fade"); 
      } 


      });//]]> 
     </script> 

    </div> 
</div> 

<div data-role="page" id="home"> 
    <div data-role="header" data-backbtn="false"> 
    <h1></h1> 
    </div> 
    <div data-role="content"> 

    </div> 
</div> 
</body>

fonte

2012-05-26 user1418581

<link rel="apple-touch-startup-image" href="img/splash.png" />

è davvero solo per i dispositivi mobili di Apple.

Un vero splashscreen dovrebbe essere lì solo per mostrarti una bella foto mentre stai aspettando. Il suo obiettivo non è quello di farti aspettare per una vera ragione. Nel tuo caso ci vogliono 4 secondi dalla vita dei tuoi utenti solo per renderlo bello.

Ho modificato il codice e lo metto in questo jsfiddle: vedrete che funziona ora. Affinché lo splashscreen prenda l'intera larghezza/altezza, modifica il css per rimuovere i margini. Ho impostato il timer su 2, è più che sufficiente, penso.

fonte

2012-05-26 08:41:26 chrisben

Questo 4 secondi sarebbe bello da un punto di vista del marchio e anche per farti sentire un po 'più nativo. Oh e btw il metodo .live() è deprecato. Ci sono una serie di problemi noti con esso. Vedi http://api.jquery.com/live/ – codaniel

Grazie per il tuo feedback - molto apprezzato. – user1418581

Buona idea ecco cosa sto pensando. Utilizza pagine singole anziché pagine multiple (più dati role = pagina). Per index.html o index.php o qualsiasi altra cosa. Metti la tua pagina iniziale. Il motivo per questo lo spiegherò in seguito.

index.html

<head> 
    <!-- First include all jquery stuff --> 
    <script src="app.js"></script><!-- external script because we can just include it in every page --> 
</head> 
<body> 
    <div data-role="page" id="splash"> 
     <div class="splash"> 
      <img src="startup.jpg" alt="startup image" /> 
     </div> 
    </div> 
</body>

app.js

$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized. 
    setTimeout(function(){ 
     $.mobile.changePage("home.html", "fade"); 
    }, 4000); 
});

Ok così ho fatto in questo modo perché supponiamo di avere menu di navigazione e si desidera rimanda le persone alla home page. Non sarà necessario mostrare di nuovo la pagina iniziale. Puoi semplicemente collegarti a home.html. Anche dividere le tue pagine aiuta a mantenere la dom più snella. Spero che aiuti.

fonte

2012-05-26 10:25:43 codaniel

Grazie per il tuo feedback codaniel. Molto utile. – user1418581

Funziona bene anche con una singola pagina – JamesC

risposta

Problemi correlati