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>