Foros del Web » Programando para Internet » Jquery »

Problema ocultar y mostrar div -> jQuery Mobile

 Estas en el tema de Problema ocultar y mostrar div -> jQuery Mobile en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/07/2013, 16:58
DmD
 
Fecha de Ingreso: agosto-2008
Ubicación: Buenos Aires, Argentina
Mensajes: 73
Antigüedad: 15 años, 7 meses
Puntos: 1
Problema ocultar y mostrar div -> jQuery Mobile
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.
  #2 (permalink)  
Antiguo 11/07/2013, 13:22
Avatar de Aeon1  
Fecha de Ingreso: enero-2012
Mensajes: 57
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: Problema ocultar y mostrar div -> jQuery Mobile
creo que estas haciendo mal las cosas, ya que estas agregado una funcion para recojer del <a> si quieres ir al m1 o al m2 siendo que es una funcion de jquerymobile
en el <a> debes de indicarle a a donde va a ir y no con un script como lo haces tu debes de checar la doc de jquerymobile que te dice como hacer las transiciones,
te dejo como debe de quedar tu pag para que funcione.
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <title>Catálogo Messier</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  6.     
  7.     <!-- CSS -->
  8.     <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
  9.     <style>
  10.         img.fullscreen {
  11.             max-width: 100%;
  12.         }       
  13.     </style>
  14.     
  15.     <!-- JS -->
  16.     <script src="jquery/js/jquery-1.9.1.min.js"></script>
  17.     <script src="js/jquery.mobile-1.3.1.min.js"></script>
  18.     
  19.     
  20. </head>
  21. <body id="pagina_entera">
  22. <div data-role="page" id="home" class="estilo_entero" data-theme="c" >
  23.     <header data-role="header" >
  24.         <h1>Catálogo Messier</h1>
  25.         <a href="#info" data-icon="info" data-iconpos="notext">Info</a>
  26.         <a data-icon="gear" data-iconpos="notext" id="nocturno" >Nocturno</a>
  27.     </header>
  28.     <article data-role="content">
  29.         <ul data-role="listview"  data-filter="true" id="listview_jquery" >
  30.             <li>
  31.                 <a href="#m1">
  32.                     <img src="imagenes/miniatura/m1.jpg" alt="" />
  33.                     <h2>M1</h2>
  34.                     <p>Nebulosa del Cangrejo, NGC 1952 </p>
  35.                 </a>
  36.             </li>
  37.             <li>
  38.                 <a href="#m2">
  39.                     <img src="imagenes/miniatura/m2.jpg" alt="" />
  40.                     <h2>M2</h2>
  41.                     <p>NGC 7089</p>     
  42.                 </a>
  43.             </li>
  44.         </ul>
  45.     </article>
  46. </div>
  47.  
  48. <!-- M1 -->
  49. <div data-role="page" id="m1">
  50.     <header data-role="header">
  51.         <h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M1, Nebulosa del Cangrejo, NGC 1952 </h1>
  52.         <a href="#home" data-icon="back" data-iconpos="notext">Home</a>
  53.     </header>
  54.     <img src="imagenes/grandes/m1.jpg" class="fullscreen" />
  55.     <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
  56.         <div data-role="collapsible">
  57.             <h3>Características</h3>
  58.             <p>
  59.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
  60.                 <b>Nombre:</b> M1</br />
  61.                 <b>Otras catalogaciones:</b> NGC 1952</br />
  62.                 <b>Tipo:</b> Nebulosa del Cangrejo</br /></br />
  63.                 
  64.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Coordenadas</div>
  65.                 <b>AR:</b> 05h 35.0m</br />
  66.                 <b>Dec:</b> +22º 01'</br /></br />
  67.                 
  68.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Constelación</div>
  69.                 <b> Cassiopeia </b></br /></br />
  70.                 
  71.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Magnitud</div>
  72.                 <b>Visual:</b> 6.9</br />
  73.                 <b>Superficial:</b> 12.0 </br />
  74.                 <b>Estrella central:</b> 8.2</br /></br />
  75.                 
  76.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Morfología</div>
  77.                 <b>Dimensiones:</b> 8x4 m</br /></br />
  78.             </p>
  79.         </div>
  80.         <div data-role="collapsible">
  81.             <h3>Observación</h3>
  82.             <p>
  83.                 La nebulosa puede verse bien bajo un cielo oscuro y despejado, pero puede ser igualmente fácil perderla con el fondo de contaminación lumínica en condiciones menos favorables. M1 es visible como una mancha tenue con unos binoculares 7x50 o 10x50. Con un poco más de aumento, puede verse como una mancha nebulosa ovalada, rodeada por un halo. En telescopios de a partir de 10 centímetros de apertura, comienzan a aparecer algunos detalles de su forma, con algunos indicios de estructuras de puntos o rayas en la zona central de la nebulosa. Los aficionados pueden comprobar la impresión de Messier de que M1 efectivamente parece un débil comenta sin cola en pequeños instrumentos. Solo bajo excelentes condiciones y con mayores telescopios, a partir de 40 centímetros de apertura, empiezan a hacerse visibles las finas estructuras filamentosas.
  84.             </p>
  85.         </div>
  86.         <div data-role="collapsible">
  87.             <h3>Localización</h3>
  88.             <p>
  89.                 La Nebulosa del Cangrejo puede encontrarse con bastante facilidad a partir de Zeta Tauri (o 123 Tauri), el 'Cuerno Sur' del Toro, una estrella de tercera magnitud que puede encontrarse fácilmente al Este-Noreste de Aldebarán (Alfa Tauri). M1 se encuentra más o menos a 1 grado Norte y 1 grado Oeste de Zeta, ligeramente al sur y aproximadamente medio grado al Oeste de la estrella de magnitud 6, Struve 742.<br />
  90.                 <img src="imagenes/localizacion/m1.jpg" alt=""  class="fullscreen"/>
  91.             </p>
  92.         </div>
  93.     </div>
  94. </div>
  95.  
  96. <!-- M2 -->
  97. <div data-role="page" id="m2">
  98.     <header data-role="header">
  99.         <h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M2, Cúmulo globular en Aquarius, NGC 7089 </h1>
  100.         <a href="#home" data-icon="back" data-iconpos="notext">Home</a>
  101.     </header>
  102.     <img src="imagenes/grandes/m2.jpg" class="fullscreen" />
  103.     <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
  104.         <div data-role="collapsible">
  105.             <h3>Características</h3>
  106.             <p>
  107.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
  108.                 <b>Nombre:</b> M2</br />
  109.                 <b>Otras catalogaciones:</b> NGC 7089</br />
  110.                 <b>Tipo:</b> Cúmulo globular</br /></br />
  111.                 
  112.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Coordenadas</div>
  113.                 <b>AR:</b> 21h 33.0m</br />
  114.                 <b>Dec:</b> 00º 49'</br /></br />
  115.                 
  116.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Constelación</div>
  117.                 <b> Aquarius</b></br /></br />
  118.                 
  119.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Magnitud</div>
  120.                 <b>Visual:</b> 6.5</br />
  121.                 <b>Superficial:</b> 11.0 </br />
  122.                 <b>Estrella central:</b> 13.1</br /></br />
  123.                 
  124.                 <div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Morfología</div>
  125.                 <b>Dimensiones:</b> 11.7 m x</br /></br />
  126.             </p>
  127.         </div>
  128.         <div data-role="collapsible">
  129.             <h3>Observación</h3>
  130.             <p>
  131.                 Con su magnitud visual de 6,5, M 2 es un objeto difícil para la observación a simple vista (no visible bajo condiciones 'medias'), pero es un objetivo fácil para instrumentos ópticos ligeros como prismáticos o anteojos de ópera, en particular, porque está situado en un campo poco estrellado. Un telescopio de 4 pulgadas libre de obstrucción (refractor o Schiefspiegler*) no resuelve este cúmulo, sino que muestra solo algunas de sus estrellas más brillantes diseminadas sobre la imagen nebulosa de fondo causada por las estrellas no definidas. Con uno de 20 centímetros, este cúmulo globular se define parcialmente en estrellas, incluso en el centro con buenas condiciones de visibilidad. Se necesitan telescopios más grandes, de 25 centímetros y más, para definir completamente este cúmulo. Un surco oscuro peculiar cruza el borde noroccidental del cúmulo. Telescopios más grandes (de 40 centímetros en adelante) muestran otras varias estructuras o regiones más oscuras, menos prominentes.
  132.             </p>
  133.         </div>
  134.         <div data-role="collapsible">
  135.             <h3>Localización</h3>
  136.             <p>
  137.                 M2 se encuentra fácilmente desde Alfa y Beta Aquarii, así como Epsilon Pegasi. Está 5 grados al norte de Beta Aquarii, en la misma declinación que Alfa Aquarii.
  138.                 <img src="imagenes/localizacion/m2.jpg" alt=""  class="fullscreen"/>
  139.             </p>
  140.         </div>
  141.     </div>
  142. </div>
  143. </body>
  144. </html>

Etiquetas: mobile
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:13.