Estilos de jQuerymobile

madman_18 · #1 (**permalink**) 14/12/2012, 09:41

Hola a todos!

Veréis tengo problemas con jQuery pero su versión para movil.
Me hago un estilo personalizado, lo descargo, lo enlazo pero nada, no coge ningún tipo de estilo ni nada.

Os paso el código por si hay algo que está erróneo:
<link rel="stylesheet" href="js/mobile/themes/mitema.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="js/mobile/jquery.mobile-1.2.0.min.js"></script>

<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1">
<option>Ir a...</option>
<option value="op1">Op</option>
<option value="op2">Op2</option>
</select>
</div>

Si no estoy confundido, debería ser así no¿? Un saludo y gracias por adelantado!

Panino5001 · #2 (**permalink**) 14/12/2012, 10:05

Te faltan cosas

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Hello world</p>        
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Fijate que hay 2 archivos javascript

madman_18 · #3 (**permalink**) 14/12/2012, 10:10

Cita:

Iniciado por Panino5001

Te faltan cosas

Código PHP:

  <!DOCTYPE html>  
<html>  
<head>  
    <title>My Page</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head>  
<body>  
 
<div data-role="page"> 
 
    <div data-role="header"> 
        <h1>My Title</h1> 
    </div><!-- /header --> 
 
    <div data-role="content">     
        <p>Hello world</p>         
    </div><!-- /content --> 
 
</div><!-- /page --> 
 
</body> 
</html>

Fijate que hay 2 archivos javascript

Ups! Perdón se me olvidó ponerlo completo, todos los scripts y demás que importo son:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery_1.8.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/mobile/themes/mitema.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="js/mobile/jquery.mobile-1.2.0.min.js"></script>

Como ves, importo el jquery.mobile y el jquery la última versión que hay.
Edito el mensaje de arriba que no me había dado cuenta jeje.

Panino5001 · #4 (**permalink**) 14/12/2012, 10:26

Esto me funciona sin problemas:

Código:

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1">
<option>Ir a...</option>
<option value="op1">Op</option>
<option value="op2">Op2</option>
</select>
</div> 

</body>
</html>

madman_18 · #5 (**permalink**) 14/12/2012, 10:36

Creo que he encontrado por qué no lo coge...el problema está a la hora de importar el jquery.mobile.

Me explico, ese div en el que tengo el menú lo muestro si se está visualizando desde un móvil, sino muestro otro tipo de menú.

Ahora me surge esto:

- Si pongo los scripts necesarios en el head para que funcionase el jQuery mobile, no aplica el estilo.
Mi head se compone de todo esto:
<link href='http://fonts.googleapis.com/css?family=Cagliostro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css.css"/>
<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" href="js/mobile/themes/mitema.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="js/mobile/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery_1.8.2.js" type="text/javascript"></script>
<script src="js/funciones.js" type="text/javascript"></script>
<script src="js/control.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.backstretch.js" type="text/javascript"></script>

- Ahora bien, si los scripts y css para jQuery mobile los cargo antes del elemento HTML sí me coge el estilo....PERO me sudecen dos cosas:
a) Me carga el estilo pero se muestra siempre el gif de "cargando..." de jQuery mobile no sé por qué es así.
b) Me genera dos veces el select que usaría de menú: uno sin el estilo jquery y otro con el estilo.

Ahora lo que me ocurre es ¿Cómo solucionaría esos dos problemas?

Panino5001 · #6 (**permalink**) 14/12/2012, 10:56

No comprendo muy bien tu problema -tampoco lo analicé en profundidad-. Lo que te puedo decir es que jquerymobile no parsea el contenido constantemente para redibujar elementos. Sólo lo hace al inicio (DOMContentLoaded) o cuando se lo indicás específicamente con métodos como refresh: http://jquerymobile.com/demos/1.2.0/...s/methods.html