Unidad 23. Widgets de jQuery (I)


23.1. Introducción

Ver el videotutorial

jQuery UI es un conjunto de pequeños programas que sirven como componentes para construir la interface de una página web, dándole más vida y funcionalidad. Estos componentes reciben el nombre de widgets y su uso es muy sencillo y personalizable. Están escritos en Javascript, igual que todo el framework de jQuery, pero igual que con otros elementos y características de Dreamweaver, no debes preocuparte por el código involucrado. Cuando utilizamos un componente de jQuery UI, Dreamweaver añade las librerías de Javascript necesarias para su funcionamiento, así como diversas hojas de estilo, las cuales también debes copiar a tu servidor de Internet para que tu página funcione correctamente.

Si deseas aprender más sobre estas librerías de jQuery en particular, puedes consultar su página web oficial, jqueryui.com.

Es importante decir que en versiones anteriores de Dreamweaver, había una colección de widgets de Spry, pero su uso ha sido descontinuado. Sin embargo, si tenemos una página web con widgets de Spry, podemos seguir editándola con Dreamwever, lo que ya no es posible hacer es añadir más widgets de este tipo.

El conjunto de widgets de jQuery UI están disponibles tanto en el menú Insertar, opción jQuery UI, como en el panel Insertar, en la categoría del mismo nombre.

 

 

Podemos clasificar los widgets de jQuery UI en dos grupos, los que sirven como elementos para la interfaz de una página web en general y aquellos que son específicos para ser usados en formularios. Veamos unos y otros con algunos ejemplos.

23.2. Accordion

Accordion crea paneles colapsables con los que podemos añadir una gran cantidad de información en una página sin utilizar mucho espacio. Un ejemplo de su uso puedes verlo aquí mismo.

Sección 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Sección 2

Sección 3

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Como puedes ver, los paneles creados por Accordion pueden contener cualquier tipo de información: texto, imágenes, formularios, elementos dinámicos, etcétera.

Cuando insertamos un widget de este tipo, de forma predeterminada se insertan tres paneles con la siguiente apariencia:

Modificar el título de cada sección es tan simple como hacer clic en la palabra Sección y escribir el título deseado. Dotar de contenido al widget depende de la vista con la que estemos trabajando. En la vista Diseño de Dreamweaver, el primer panel está abierto, con lo que podemos escribir el contenido, insertar imágenes, etcétera. Cuando pasamos el cursor sobre el título del resto de las secciones, aparece un icono en el que hay que hacer clic para que el panel correspondiente se abra y podamos, por tanto, trabajar con su contenido.

 


Marzo-2015
Pág. 23.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.