JQuery Mobile - Content Navigation Collapse en un botón en el retrato
https://stackoverflow.com/questions/8817068
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estamos desarrollando una aplicación con el diseño cerca de los ejemplos de JQM aquí(Tabla de contenido a la izquierda y contenido a la derecha) Pero queremos el mismo comportamiento que Sencha Mobile, cuando está en retrato, la tabla de contenido colapsa en un botón de navegación aquí
¿Es posible hacer con JQM?
Solución
He creado una aplicación móvil jQuery de muestra que funciona así: cuando en modo retrato, se mostrará un diseño de vista dividida. Cuando en el modo paisajista, la navegación se puede hacer a través de un botón en el encabezado. Para ilustrar esto en un navegador de escritorio, He dado el width para verificar como 500px.Si width>500 px ,vista dividida. Si width <500px, botón en el encabezado.
Este es el código fuente:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
@media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
@media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2" data-icon="false">Page 2</a>
</li>
<li>
<a href="#page3" data-icon="false">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li class="ui-btn-active" data-icon="false" >
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Esta no es una aplicación infalible, pero solo una copia aproximada para ilustrar cómo se puede hacer esta característica. Todavía hay muchas cosas por hacer para que esto funcione perfectamente.
Para que funcione, he usado el concepto de media queries. Utilizándolo, puede ocultar selectivamente el diseño dependiendo del ancho del navegador (orientación del dispositivo).
PD he utilizado jqm-docs.css Para este ejemplo. Esta CSS tiene otras consultas de medios también dirigidas a otros anchos. Así que puede haber algunos problemas de diseño extraños cuando prueba este código. Modifique que CSS elimine las consultas de medios no deseadas.
Avísame si ayuda
