2011-11-29 19 views
26

Parece que jQuery mobile está agregando un mensaje de carga en la página de inicio. Realmente no sé lo que está pasando, pero considero que el siguiente fragmento simple:jQuery mobile agrega "encabezado de carga" a la página

<!DOCTYPE html> 
<html> 
    <head> 
    <title>sadFace</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head> 
    <body> 
    <h1>;__;</h1> 
    </body> 
</html> 

Incluso tengo que desplazarse hacia abajo para ver el mensaje de carga. Así que pensé que podría suceder porque yo no estoy siguiendo la página móvil típica anatomía jQuery pero:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h1>;_;</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Same shit, different page.</p>  
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4><a href="http://www.google.com/pacman/">need cookies :C</a></h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html> 

la misma. Estoy totalmente aturdido por este comportamiento. También pruebo jQuery1.0rc2 con el mismo resultado aunque comencé mi proyecto desde la semana pasada y se ve bien. ¿Qué demonios está pasando? <. <

Buscando en jQuery Mobile' js Creo que este initializePage: function() es responsable del mensaje. Podría comentar

//cue page loading message 
$.mobile.showPageLoadingMsg(); 

o conjunto autoInitializePage: false pero en vez preferiría una solución que no se involucra a un archivo de jQuery modificado (a menos que sea un error).

Respuesta

37

hay que añadir la CSS, lo que va a estar bien:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

En detalle:

Siempre pone el siguiente código HTML en la parte inferior de su cuerpo:

<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div> 

Este es el CSS relevante (por lo que puede jugar con él si lo desea)

.ui-loading .ui-loader { display: block; } 
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } 

La función showPageLoadingMsg añade la clase CSS '.ui carga' a la etiqueta HTML y luego se hace visible

+0

Excepto que el CSS tiene el mismo efecto molesto que todos estos frameworks, e intenta sobrescribir sus preferencias de diseño para elementos básicos como ... –

+0

¿cómo puedo evitar que ponga una h1? – Jayen

16

puede detener el autoInitializePage utilizando el siguiente antes de cargar la biblioteca jQuery-móvil

jQuery(document).on("mobileinit", function() { 
    jQuery.mobile.autoInitializePage = false; 
}); 

Más información aquí: http://api.jquerymobile.com/global-config/

2

añadir esto a la parte superior de su archivo JS

$.mobile.autoInitializePage = false; 
Cuestiones relacionadas