Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Jugando con jQueryUI: Introducción


Hace un tiempo jQuery revoluciono la forma de escribir JavaScript, pues hizo más facil la vida de desarrolladores y no-desarrolladores sobre el manejo de ese tema tan complejo del DOM(Document Object Model) lo hace sentir como una manera aparentemente más divertida de crear contenido para la web. jQuery UI es un conjunto de plugins que añade nuevas funcionalidades a la biblioteca central de jQuery.

Instalando jQuery

Basta con descargar el plugin del sitio oficial jQuery UI, si vamos al link de estable “stable obtenemos una carpeta que es importante que analicemos:

Cuando se descomprime encontramos un directorio con la siguiente información interesante:

  • css – subdirectorio que contiene los archivos CSS asociados con  jQuery UI, para darle un aspecto personalizado a los elementos de que van estar presentes en la web.
  • js – subdirectorio que contiene los archivos de JavaScript para  jQuery UI. Cuenta con el archivo comprimido de todas las características de interfaz de usuario  jQuery UI junto con el archivo de la librería principal jQuery añadiendo sus funcionalidades.
  • development-bundle- subdirectorio, que contiene varios directorios; como “demos” (ejemplo de interfaz de usuario para usar con jQuery), documentación de jQuery UI llamado “docs”“themes” – temas relacionados con CSS  y  jQuery UI), y la interfaz de usuario “ui” (Archivos de javaScript para la interfaz de jQuery UI).
  •  index.html – ejemplos claros de las características de  jQuery UI. Hablaremos de esto más adelante.

¿Y la Visión general de jQueryUI?

Para entender que contiene y que nos ofrece  jQuery UI te invito a que de la carpeta que acabas de descargar abras el archivo index.htm, allí encontraras algo similar a esto:

Observa las diferentes características que añade jQuery UI, tales como:

  • Menús en acordeón
  • Barras de progreso (progress bars)
  • Botones y casillas de verificación (checkbox)
  • Cuadros de diálogo que se superponen
  • Mecanismo para Autocompletar
  • Mecanismo de pestañas para facilitar la visualización de la página
  • Iconos personalizados
  • Controles deslizantes (sliders)
  • Calendario (Cosa compleja de manejar)

Básicamente en esto se centra este plugin y la verdad es bastante lo que se puede hacer con esta extensión de la librería jQuery. Vamos a continuar con un ejemplo para esto yo utilizare jsFiddle ya que cuenta con la librería  jQuery y con el plugin jQuery UI para experimentar de manera rápida y casual.

A jugar un poco con jQueryUI

Vamos hacer un ejemplo básico con el Mecanismo de de Pestañas “Tabs”; trabajando con 4 pestañas, el código sin aplicarle todavía jQuery UI (sugiero por el momento utilizar jsFiddle por si no cuenta con un entorno de desarrollo definido):


 <div>
 <ul>
   <li><a href=#tab1>Tab 1</a></li>
   <li><a href=#tab2>Tab 2</a></li>
   <li><a href=#tab3>Tab 3</a></li>
   <li><a href=#tab4>Tab 4</a></li>
</ul>

<div id=tab1>HTML5facil BLog de la comunidad HTML5</div>
<div id=tab2>Otro Hola Mundo pero en jQueryUI</div>

<div id=tab3>Lorem ipsum</div>

<div id=tab4>Contenido pestaña 4</div>
</div>

En este momento verías algo así:

Para poder utilizar las pestañas o “Tabs” en jQuery UI utilizamos el método tabs() que describe la documentación oficial y que podemos observar en los ejemplos del index.html y lo agregamos a nuestro código de la siguiente manera, claro está que lo puede agregar de la manera desees, en <head>, en un archivo externo, por practicidad yo lo voy hacer debajo del código con la etiqueta <script>:

<div>

<script>

$("#tabs").tabs();

</script>

El método tabs() con respecto a la documentación oficial se utiliza de dos formas:

<ul>
	<li><em>$(selector, contexto).tabs (opciones)</em></li>
	<li><em>$(selector, contexto).tabs ("acción", parámetros) </em></li>
</ul>

Para nuestro ejemplo utilizamos la manera más básica, quedando de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <script src = "./jquery/js/jquery-1.7.1.min.js"></script> 
 <script src = ./jquery/js/jquery-ui-1.8.18.custom.min.js></script> 
 <link rel=stylesheet type=text/css href=./jquery/css/smoothness/jquery-ui-1.8.18.custom.css /> 
 <style type="text/css"> 
 li.ui-state-default{  
 font-size : 10px; 
 } 
 div.ui-tabs-panel{ 
 font-size : 15px; 
 font-family : georgia;  
 font-style : italic; 
 } 
 </style> 
</head> 
<body> 
<div id="tabs"> 
<ul> 
 <li><a href="#tab1">Tab 1</a></li> 
 <li><a href="#tab2">Tab 2</a></li> 
 <li><a href="#tab3">Tab 3</a></li> 
 <li><a href="#tab4">Tab 4</a></li> 
</ul> 
 <div id="tab1">HTML5facil BLog de la comunidad HTML5</div> 
 <div id="tab2">Otro Hola Mundo pero en jQueryUI</div> 
 <div id="tab3">Lorem ipsum</div> 
 <div id="tab4">Contenido pestaña 4</div> 
</div> 
<script> $("#tabs").tabs (); </script> 
</body> 
</html>

Lo que en sus navegadores debe mostrar es algo así:

¿Y tabs() tiene más opciones?

Si, anteriormente les había comentado que estábamos utilizando lo más básico del método tabs(), porque tabs(options) declara que un elemento HTML (y sus contenidos) debe ser administrado en forma de pestañas o tabs. El parámetro options es un objeto para especificar el aspecto y el comportamiento correspondiente a las pestañas. Los diferentes tipos de opciones están disponibles, dependiendo de si se las arreglan las pestañas en forma directa o los eventos relacionados con las pestañas:

Opción

Función

options.colllapsible Cuando se establece en true, permite que las pestañas anulen la selección. Cuando se establece en false (por defecto), al hacer clic en una pestaña seleccionada no anula la selección.
options.disabled Utiliza un array que indica las pestañas o tabs que están deshabilitados (y por lo tanto no pueden ser seleccionados). Por ejemplo, se utiliza [0, 1] para desactivar las dos primeras pestañas.
options.selected Indica que el índice o “index” de la primera pestaña o tab a mostrar. El valor predeterminado es 0, que indica la primera pestaña o tab en la página.
options.event Nombre del evento que permite a los usuarios seleccionar una pestaña o tab diferente al inicial (el valor predeterminado es clic). Si, por ejemplo, esta opción está establecida en “mouseover”, pasando el cursor del ratón sobre una pestaña quedaría seleccionada.
options.fx Indica el efecto que acompaña a la selección de la pestaña o tab, por ejemplo una visualización progresiva de la pestaña o tab junto con su contenido (de esta forma options.fx = {opacity: “toggle”}).
options.ajaxOptions Especificar las opciones de Ajax (cuando se desea actualizar el contenido de una pestaña o tab en Ajax). Por ejemplo, options.ajaxOptions.data le permite especificar los parámetros para el servidor.

Como ven tiene unas características interesantes para experimentar, obviamente tiene más cosas para experimentar, pero lo dejare para otro post y para que continúen investigando.

Conclusión

Mientras este en etapa de aprensión de conocimientos sugiero NO utilizar los CDN de jQuery UI en Google, pues es muy importante que se entienda para que funciona cada archivo y cuando ya tengas mucha más idea de cómo funciona el plugin o ya estés en etapa de despliegue, podrás usarlos adecuadamente.

comments powered by Disqus