El widget Panel de jQueryMobile es muy útil para crear barras de navegación, menús, formularios etc. Para crear un panel, sólo hay que añadir el rol data-role=”panel” a un elemento <div>. Los paneles deben estar dentro de una página y antes o después de header, content y footer, pero nunca en medio de estos elementos.

Panel

Para definir un panel hay que usar el siguiente código:

<div data-role="page">
<div data-role="panel" id="mypanel">
    <!--Contenido del panel -->
</div><!-- /panel -->
<!-- header -->
<!-- content -->
<!-- footer -->
</div><!page>

 

Panel externo

Un panel externo, es un panel que se define en la página principal y esta disponible para usarlo en las páginas secundarias sin la necesidad de volver a definirlo.

En este caso hay que romper la regla que dice que el panel sólo se puede definir dentro de un elemento <div> con el rol de “page”, es mas, sólo funcionarán si se definen fuera de la página y además hay que inicializarlos manualmente ya que no se hará automáticamente al estar fuera del <div> con rol “page”.

Este es el código que hay que usar para inicializar los paneles externos:

<script>
     $(function() {
         $( "body>[data-role='panel']" ).panel();
     });
</script>

El código mostrado a continuación se basa en ejemplo simplificado de paneles externos de la demo de  jQueryMobile:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>External panels - jQuery Mobile Demos</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> 
    <script>
        $(function() {
            $( "body>[data-role='panel']" ).panel();
        });
    </script>
    </head>
<body>
<div data-role="page" data-quicklinks="true">

    <div data-role="header">
        <h1>External panels</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content jqm-content jqm-fullwidth">

        <h1>External Panels</h1>

        <p><a href="page-b.html">Pagina 2</a></p>

        <p><strong>Left</strong> panel examples</p>
        <a href="#leftpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a>
        <p><strong>Right</strong> panel examples</p>        
        <a href="#rightpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a>
        
    </div><!-- /content -->

</div><!-- /page -->

    <!-- leftpanel2  -->
    <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-theme="a">

        <h3>Left Panel: Reveal</h3>
        <p>This panel is positioned on the left with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
        <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>

    </div><!-- /leftpanel2 -->
    
    <!-- rightpanel1  -->
    <div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-theme="b">

        <h3>Right Panel: Reveal</h3>
        <p>This panel is positioned on the right with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
        <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
        <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>

    </div><!-- /rightpanel1 -->    
</body>
</html>

El enlace nos llevara hacia la página “page-b.html” que no tiene definidos los paneles, pero estos estarán disponibles ya que están cargado en el DOM.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>External panels - jQuery Mobile Demos</title>
    </head>
<body>
<div data-role="page" class="jqm-demos">

    <div data-role="header">
        <h1>External panels</h1>
        <a href="../panel/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
    </div><!-- /header -->

    <div role="main" class="ui-content jqm-content jqm-fullwidth">

        <h1>External Panels - Page 2</h1>

        <p>These panels only exist if you navigated to this page from page 1, because the markup for the panels is in the HTML document of the first page. If you refresh this page the links below will no longer work.</p>

        <p><strong>Left</strong> panel examples</p>        
        <a href="#leftpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a>
        
        <p><strong>Right</strong> panel examples</p>        
        <a href="#rightpanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Reveal</a>
        
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Si actualizamos la página web “page-b.html” los paneles dejaran de funcionar ya que se regenera el DOM con el contenido de esta página en el cual no está el código de los paneles y además también se perderá el estilo y la funcionalidad jQueryMobile al no incluir en ella el código para cargar los archivos correspondientes.