Vamos a aprender cómo usar jQuery UI con todas sus funcionalidades sin la necesidad de descargarlo o instalarlo en nuestro servidor. Lo primero que debemos de realizar, es ir a la página oficial de jQuery UI:
Luego, veremos que existe una sección de “Demos” en la página en la cual podremos ver todas las funcionalidades que ofrece jQuery UI y probar las diferentes configuraciones que estas mismas traen. En cada uno de estos “demos” podremos encontrar el código de cómo está realizado. Estos códigos se encuentran actualmente vinculados a la versión en línea de jQuery UI, es decir, si copiamos directamente dicho código, podremos ver dicha funcionalidad funcionando completamente en un servidor local. Sin embargo, es necesario tener acceso a internet ya que los archivos relacionados se encuentran en un servidor en línea.
Entre las diversas ventajas de utilizar este método se encuentran las siguientes:
- Ocupa menos espacio en nuestro servidor
- No es necesario estar actualizando los vínculos cada vez que movamos nuestros archivos
Para poder vincular los scripts y estilos de jQuery UI debemos ir al widget o funcionalidad que deseamos implementar. Por ejemplo, si queremos implementar la funcionalidad de “Tabs” o “Pestañas”.
Luego, debemos elegir a mano derecha la configuración que queramos de dicho widget. En este caso y como ejemplo, utilizaremos la funcionalidad: “Collapse Content”. Notaremos que en la parte inferior de la página aparece el ícono de un ojo gris con el texto: “view source”.
Le daremos un click para que nos muestre el código fuente de dicho ejemplo. Lo que debemos copiar a nuestro script es toda la cabecera <head></head> que es donde se encuentran los vínculos a los scripts y estilos. Es decir, la siguiente parte:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css">
Dicha parte debemos reemplazarla por la cabecera de nuestro código para que funcione correctamente. Realizados estos pasos sencillos, tendremos la versión en línea de jQuery UI en nuestra propia página. Dicho paso debe realizarse para cada widget que queramos implementar, teniendo en cuenta de no reemplazar a los anteriores, pues los códigos de los scripts y estilos incluidos son únicos por widget.
