jueves, 21 de febrero de 2013

Cuadros de diálogo con Jquery Mobile


Otro complemento muy importante de Jquery Mobile es la creación de cuadros de diálogo, es muy útil para mostrar mensajes de información o simplemente para navegar entre páginas, el atributo encargado de la creación del cuadro de diálogo es data-rel="dialog", para regresar del cuadro del diálogo se puede crear un botón de cancelar o de regreso agregándole a un botón el atributo data-rel="back".

En el siguiente ejemplo la página principal tendrá tres botones ancla, que llevarán a un cuadro de diálogo dónde se abrirá la página seleccionada, cada una de las páginas tiene un botón home, con el atributo data-rel="back" que regresará de nuevo a la página principal.

Página principal ...

<div data-role="page">
<div data-role="header">
        <h1>Cuadros de diálogo con Jquery Mobile</h1>
    </div>   
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<a href="#page2" data-role="button" data-rel="dialog" data-icon="star" data-iconpos="left" data-theme="a" data-mini="true" data-transition="slide">Pag. 2</a>
<a href="#page3" data-role="button" data-rel="dialog" data-icon="star" data-iconpos="left" data-theme="b" data-mini="true" data-transition="pop">Pag. 3</a>
<a href="#page4" data-role="button" data-rel="dialog" data-icon="star" data-iconpos="left" data-theme="c" data-mini="true" data-transition="fade">Pag. 4</a>
</div>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>


Las tres páginas siguientes #page2, #page3, #page4 ...

<div data-role="page" id="page2">
<div data-role="header"><h1>Pag. 2</h1></div>
<div data-role="content">
<a data-rel="back" id="ancla" data-role="button" data-icon="home" data-iconpos="notext" data-transition="pop"></a>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>

<div data-role="page" id="page3">
<div data-role="header"><h1>Pag. 3</h1></div>
<div data-role="content">
<a data-rel="back" id="ancla" data-role="button" data-icon="home" data-iconpos="notext"  data-transition="slideup"></a>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>

<div data-role="page" id="page4">
<div data-role="header"><h1>Pag. 4</h1></div>
<div data-role="content">
<a data-rel="back" id="ancla" data-role="button" data-icon="home" data-iconpos="notext" data-transition="slidedown"></a>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>


Jquery Mobile