En este caso, te vamos a mostrar varios de ellos que están incluidos en Jquery User Interface. Para poder usar estos widgets en tus webs puedes descargarte la librería en este enlace. Deberas incluir los scripts en tus páginas añadiendo a tu cabecera HTML:

<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.7.2.custom.min.js”></script>
<link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />

Puedes ver los ejemplos en este enlace.

Ejemplo 1 – Acordeón

Este widget te permite poner varios divs que se muestran y esconden haciendo un efecto de acordeón. Para crear este widget necesitas una parte del código en HTML

<div id=”div_acordeon”>
<h3><a href=”#”>Contenido 1</a></h3>
<div>
<p>Aquí puedes poner el contenido de la primera division.</p>
</div>
<h3><a href=”#”>Contenido 2</a></h3>
<div>
<p>Aquí puedes poner el contenido de la segunda division.</p>
</div>
<h3><a href=”#”>Contenido 3</a></h3>
<div>
<p>Aquí puedes poner el contenido de la tercera division.</p>
Campo 1: <input type=”text” name=”texto” /><br/>
Campo 2: <input type=”password” name=”pass” />
</div>
</div>

La otra parte del código es javascript:

$(document).ready(function(){ $(“#div_acordeon”).accordion(); });

Con esta linea de js definimos que el div con identificador div_acordeon es el que contiene todos los títulos y los divs que se mostrarán y esconderán.

Ejemplo 2 – Calendario

Puedes añadir un calendario facilmente con este widget. Hay dos opciones. Definir el calendario sobre un div, siempre sera visible, o definirlo sobre un campo de texto, el calendario se mostrara cuando entren en el campo.

Para ello tenemos los codigos HTML:

<div id=”div_calendario”></div>
Campo de fecha: <input id=”text_calendario” type=”text”></p>

El código js para crear el calendario es:

$(document).ready(function(){ $(“#div_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });
$(document).ready(function(){ $(“#text_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });

Ejemplo 3 – Diálogo

Para los diálogos modales deberemos crear un div para cada uno de ellos con el contenido de estos. En el ejemplo hemos creado estos tres

<div id=”dialogo” title=”Titulo del diálogo modal”>
<p>Aquí puedes escribir el texto que desees</p>
</div>

<div id=”confirmacion” title=”Titulo de la confirmación modal”>
<p><span style=”float:left; margin:0 7px 20px 0;”></span>Texto de confirmación. Esta seguro?</p>
</div>

<div id=”formulario” title=”Titulo del formulario”>
<form>
<fieldset>
<label for=”name”>Nombre</label><br/>
<input type=”text” name=”name” id=”name” /><br/>
<label for=”email”>Correo</label><br/>
<input type=”text” name=”email” id=”email” value=”" /><br/>
<label for=”password”>Contraseña</label><br/>
<input type=”password” name=”password” id=”password” value=”" />
</fieldset>
</form>
</div>

El código js es:

$(function() {
$(“#dialogo”).dialog({ bgiframe: true, modal: true, autoOpen: false });
});

$(function() {
$(“#confirmacion”).dialog({ bgiframe: true, modal: true, autoOpen: false,
overlay: { backgroundColor: ‘#000′, opacity: 0.5 },
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
} }); });

$(“#formulario”).dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, resizable: false,
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
}, });

Para abrir un diálogo utilizamos el código js siguiente

$(“#dialogo”).dialog(‘open’);

Ejemplo 4 – Pestañas

El código HTML es:

<div id=”div_tabs”>
<ul>
<li><a href=”#tab1″>Pestaña 1</a></li>
<li><a href=”#tab2″>Pestaña 2</a></li>
<li><a href=”#tab3″>Pestaña 3</a></li>
</ul>
<div id=”tab1″>
<p>Aquí puedes poner el contenido de la primera pestaña.</p>
</div>
<div id=”tab2″>
<p>Aquí puedes poner el contenido de la segunda pestaña.</p>
</div>
<div id=”tab3″>
<p>Aquí puedes poner el contenido de la tercera pestaña.</p>
</div>
</div>

Y el js:

$(function() { $(“#div_tabs”).tabs(); });

Ejemplo 5 – Cambiar los themes, CSS

Puedes cambiar el estilo de los widgets modificando el fichero CSS. Otra forma más fácil de crear tu propio tema es utilizando la herramienta ThemeRoller que Jquery pone a tu disposición. Puedes modificar el estilo en linea y cuando sea de tu agrado descargarte el fichero CSS que lo define.

Puedes probar esta herramienta en este ejemplo y modificar el estilo de todos los ejemplos.