Los elementos plegables le permiten ocultar o mostrar contenido, lo cual es útil para almacenar partes de información.
Para crear un bloque de contenido plegable, asigne el atributo data-role = "colapsable" a un contenedor. Dentro del contenedor (div), agregue un encabezado (H1-H6) o un elemento de leyenda, seguido de cualquier marca HTML que desee expandir:
Para expandir el contenido cuando se carga la página, use data-collapsed = "false"Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Bienvenidos</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true">
<h1>Click me - para colapsar o desplegar!</h1>
<p>Ahora estoy desplegado.</p>
</div>
<p>Otro contenido.</p>
<p>Otro contenido.</p>
<p>Otro contenido.</p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado
Conjuntos desplegables o Acordeon
Los conjuntos colapsables son bloques colapsables que se agrupan (a menudo se denomina acordeón). Cuando se abre un nuevo bloque, todos los demás bloques se cierran.
Cree varios bloques de contenido colapsables y luego envuelva un nuevo contenedor con data-role = "collapsibleset" alrededor de los bloques colapsables.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Bienvenido demo de Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - Para desplegar!</h3>
<p>Ahora estoy desplegado!!!.</p>
</div>
<div data-role="collapsible">
<h3>Click me - Para desplegar!</h3>
<p>Ahora estoy desplegado!!!.</p>
</div>
<div data-role="collapsible">
<h3>Click me - Para desplegar!</h3>
<p>Ahora estoy desplegado!!!.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>Ahora estoy desplegado!!!.</p>
</div>
</div>
<p>Otro contenido </p>
<p>Otro contenido </p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Al hacer Click en el tercer elemento
No hay comentarios:
Publicar un comentario