bar - jQuery Mobile Reutilización de encabezado y navegación
jquery nav bar (1)
Soy nuevo en jQuery Mobile y tengo problemas para entender la reutilización de un encabezado y navegación general.
Así que he creado un encabezado que tiene un botón de menú a la derecha. Al hacer clic en esta barra de menú, aparece una ventana emergente con enlaces a otras páginas:
<div data-role="header">
<h1>Home</h1>
<a href="#popupMenu" data-rel="popup" data-transition="slide" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-right ui-btn-a">Menu</a>
<div data-role="popup" id="popupMenu" data-theme="a" style="top: 22px; right: -12px">
<ul data-role="listview" data-inset="true" style="min-width:250px; min-height: 698px;">
<li><a href="test1.html">Home</a></li>
<li><a href="test2.html">Second</a></li>
</ul>
</div>
</div>
Puedo duplicar este código en todas las páginas, pero por lo que he leído brevemente, jQuery lo hace automáticamente. Es esto cierto. Si no, ¿cómo lo hago?
A continuación de esta pregunta cuando se trata de navegar por las páginas y reutilizar los encabezados, ¿es la mejor manera de cargar páginas nuevas?
Cualquier ayuda sería apreciada.
Gracias.
Puede usar el encabezado externo y emergente y tenerlos accesibles desde cualquier página.
Coloque ambos div por separado dentro del body no dentro de ninguna otra página. Asegúrate de no envolver Popup div en ningún otro div / contenedor, sino en body .
<body>
<div data-role="header" data-theme="a">
</div>
<div data-role="popup">
</div>
<div data-role="page">
</div>
</body>
Como ambos son widgets externos , debe inicializarlos manualmente. Llame a .toolbar() para inicializar el encabezado y .popup() para inicializar Popup. Si Popup contiene otros widgets jQM, por ejemplo, listview , debe llamar a .enhanceWithin() para inicializar widgets dentro de Popup. simplemente agregue el siguiente código en la head .
$(function () {
$("[data-role=header]").toolbar(); /* initialize header */
$("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
});