Introducción a la biblioteca de interfaz de usuario de jQuery

Adición de la secuencia de comandos jQuery UI y uso básico

Para comenzar con la biblioteca jQuery UI, deberá agregar el script jQuery, el script jQuery UI y la hoja de estilo jQuery UI a su HTML.

Primero, descargar jQuery UI; elija las características que necesita en la página de descarga. Descomprima su descarga y coloque jquery-ui.css y jquery-ui.js (y jquery.js) en una carpeta donde pueda usarlos desde su HTML (por ejemplo, con sus otros scripts y hojas de estilo).

jQuery UI depende de jQuery, así que recuerda incluir jquery.js antes de jquery-ui.js.

<link rel="stylesheet" href="stylesheets/jquery-ui.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>

¡Eso es todo! Ahora puede usar jQuery UI. Por ejemplo, use el selector de fechas con el siguiente HTML:

<input type="text" name="date" id="date">

Luego usa el siguiente JavaScript:

$("#date").datepicker();

Lo que te dará una buena ventana emergente de selector de fechas:

captura de pantalla

Para obtener más información, consulte la guía oficial “Primeros pasos”.

Configurar jQuery UI por primera vez Ejemplo

El marco de la interfaz de usuario de jQuery ayuda a ampliar y aumentar los controles de la interfaz de usuario para la biblioteca JavaScript de jQuery.

Cuando desee utilizar jQuery UI, deberá agregar estas bibliotecas a su HTML. Una forma rápida de comenzar es usar las fuentes de código disponibles de la red de entrega de contenido:

Bibliotecas jQuery

https://code.jquery.com/jquery-3.1.0.js
https://code.jquery.com/ui/1.12.0/jquery-ui.js

Puede elegir muchos temas diferentes para jQuery UI e incluso crear su propio tema. Para este ejemplo, usaremos ‘Suavidad’. Agrega el tema a través de CSS.

CSS de la interfaz de usuario de jQuery

https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css

Poniendolo todo junto

Cuando haya descargado o seleccionado su CDN, ahora querrá agregar estas bibliotecas y hojas de estilo a su HTML para que su página web ahora pueda usar jQuery y jQuery UI. El orden en el que carga las bibliotecas es importante. Llame primero a la biblioteca jQuery y luego a su biblioteca jQuery UI. Dado que jQuery UI extiende jQuery, debe llamarse después. Su HTML puede parecerse a lo siguiente.

<html>
<head>
  <title>My First UI</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
 
</body>
</html>
Complemento giratorio jQuery UI →