Buenas gente!!
Vengo con un problema que me está comiendo la cabeza desde hace unos días y no puedo resolver.
Tengo una aplicación en la que utilizo jquery mobile (y phonegap). El problema es que estoy intentando ocultar un data-role="page" y mostrar otro, pero cuando muestro el otro ya no me toma ningún estilo de jquery!. No se que hacer...
Para que vean el error subí el código acá:
http://www.creanet.com.ar/jquery/index_limpio.html (hagan click en m1 o m2 y se ve como desaparece el header por ejemplo y no funciona el data-role="collapsible")
EL código es este:
Código HTML:
<html>
<head>
<title>Catálogo Messier</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<style>
img.fullscreen {
max-width: 100%;
}
</style>
<!-- JS -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#listview_jquery li a").click(function() {
var idsec = $(this).attr('id');
idsec = idsec.substr(1);
$('#home').fadeOut(800);
$('#'+idsec).fadeIn(800);
})
});
</script>
</head>
<body id="pagina_entera">
<div data-role="page" id="home" class="estilo_entero" data-theme="c" >
<header data-role="header" >
<h1>Catálogo Messier</h1>
<a href="#info" data-icon="info" data-iconpos="notext">Info</a>
<a data-icon="gear" data-iconpos="notext" id="nocturno" >Nocturno</a>
</header>
<article data-role="content">
<ul data-role="listview" data-filter="true" id="listview_jquery" >
<li>
<a id="sm1">
<img src="imagenes/miniatura/m1.jpg" alt="" />
<h2>M1</h2>
<p>Nebulosa del Cangrejo, NGC 1952 </p>
</a>
</li>
<li>
<a id="sm2">
<img src="imagenes/miniatura/m2.jpg" alt="" />
<h2>M2</h2>
<p>NGC 7089</p>
</a>
</li>
</ul>
</article>
</div>
<!-- M1 -->
<div data-role="page" id="m1">
<header data-role="header">
<h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M1, Nebulosa del Cangrejo, NGC 1952 </h1>
<a href="#home" data-icon="back" data-iconpos="notext">Home</a>
</header>
<img src="imagenes/grandes/m1.jpg" class="fullscreen" />
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible">
<h3>Características</h3>
<p>
<div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
<b>Nombre:</b> M1</br />
</p>
</div>
<div data-role="collapsible">
<h3>Observación</h3>
<p>
texto
</p>
</div>
<div data-role="collapsible">
<h3>Localización</h3>
<p>
textotextotexto
<img src="imagenes/localizacion/m1.jpg" alt="" class="fullscreen"/>
</p>
</div>
</div>
</div>
<!-- M2 -->
<div data-role="page" id="m2">
<header data-role="header">
<h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M2, Cúmulo globular en Aquarius, NGC 7089 </h1>
<a href="#home" data-icon="back" data-iconpos="notext">Home</a>
</header>
<img src="imagenes/grandes/m2.jpg" class="fullscreen" />
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible">
<h3>Características</h3>
<p>
<div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
<b>Nombre:</b> M2</br />
</p>
</div>
<div data-role="collapsible">
<h3>Observación</h3>
<p>
texto
</p>
</div>
<div data-role="collapsible">
<h3>Localización</h3>
<p>
textotextotexto
<img src="imagenes/localizacion/m1.jpg" alt="" class="fullscreen"/>
</p>
</div>
</div>
</div>
</body>
</html>
Alguna ayuda???
Saludos,
Daniela.