JqueryUI - Configuración del entorno

Este capítulo discutirá sobre la descarga y configuración de la biblioteca JqueryUI. También estudiaremos brevemente la estructura del directorio y su contenido. La biblioteca JqueryUI se puede usar de dos maneras en su página web:

Descargue la biblioteca de UI de su sitio web oficial

Cuando abres el enlace http://jqueryui.com/, verá que hay tres opciones para descargar la biblioteca JqueryUI:

Custom Download - Haga clic en este botón para descargar una versión personalizada de la biblioteca.
Stable - Haga clic en este botón para obtener la versión estable y más reciente de la biblioteca JqueryUI.
Legacy - Haga clic en este botón para obtener la versión principal anterior de la biblioteca JqueryUI.

Descarga personalizada con Download Builder

Con Download Builder, puede crear una compilación personalizada para incluir solo aquellas partes de la biblioteca que necesita. Puede descargar esta nueva versión personalizada de JqueryUI, según el tema elegido. Verá la siguiente pantalla (la misma página está dividida en dos imágenes):

Esto es útil cuando solo necesita complementos o características específicas de la biblioteca JqueryUI. La estructura de directorios de esta versión se muestra en la siguiente figura:

Los archivos sin comprimir se encuentran en el directorio del paquete de desarrollo . El archivo sin comprimir se utiliza mejor durante el desarrollo o la depuración; el archivo comprimido ahorra ancho de banda y mejora el rendimiento en producción.

Descarga estable

Haga clic en el botón Estable, que conduce directamente a un archivo ZIP que contiene las fuentes, los ejemplos y la documentación de la última versión de la biblioteca JqueryUI. Extraiga el contenido del archivo ZIP en un directorio jqueryui .

Esta versión contiene todos los archivos, incluidas todas las dependencias, una gran colección de demostraciones e incluso el conjunto de pruebas unitarias de la biblioteca. Esta versión es útil para comenzar.

Descarga heredada

Haga clic en el botón Legacy, que conduce directamente a un archivo ZIP de la versión principal anterior de la biblioteca JqueryUI. Esta versión también contiene todos los archivos, incluidas todas las dependencias, una gran colección de demostraciones e incluso el conjunto de pruebas unitarias de la biblioteca. Esta versión es útil para comenzar.

Descargar la biblioteca de IU de CDN

Una CDN o Content Delivery Network es una red de servidores diseñada para entregar archivos a los usuarios. Si utiliza un enlace CDN en su página web, traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si el visitante de su página web ya ha descargado una copia de JqueryUI del mismo CDN, no tendrá que volver a descargarla.

La Fundación jQuery , Google y Microsoft proporcionan CDN que alojan el núcleo de jQuery y la interfaz de usuario de jQuery.

Debido a que una CDN no requiere que alojes tu propia versión de jQuery y jQuery UI, es perfecta para demostraciones y experimentación.

Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial.

Ejemplo

Ahora escribamos un ejemplo simple usando JqueryUI. Creemos un archivo HTML, copiemos el siguiente contenido en la etiqueta <head> -

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Los detalles del código anterior son:

La primera línea, agrega el tema jQuery UI (en nuestro caso ui-lightness ) a través de CSS. Este CSS hará que nuestra interfaz de usuario sea elegante.
Segunda línea, agrega la biblioteca jQuery, ya que jQuery UI está construida sobre la biblioteca jQuery.
Tercera línea, agrega la biblioteca jQuery UI. Esto habilita la interfaz de usuario de jQuery en su página.

Ahora agreguemos algo de contenido a la etiqueta <head> -

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

En el <body> agregue esto -

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

El código HTML completo es el siguiente. Guardarlo comomyfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

Abra la página anterior en su navegador. Producirá la siguiente pantalla.

↰ Previous page Next page ↱