jQuery UI LibraryComenzando con jQuery UI Library
Observaciones
jQuery UI es una biblioteca de IU de JavaScript, construida sobre jQuery, que ofrece un conjunto de interacciones de interfaz de usuario, efectos y widgets.
Versiones
| Versión | Fecha de lanzamiento |
|---|---|
| 1.7.0 | 2009-03-06 |
| 1.7.1 | 2009-03-19 |
| 1.7.2 | 2009-06-12 |
| 1.7.4 | 2010-05-04 |
| 1.8.0 | 2010-03-23 |
| 1.8.1 | 2010-05-04 |
| 1.8.2 | 2010-06-07 |
| 1.8.4 | 2010-08-10 |
| 1.8.5 | 2010-09-17 |
| 1.8.6 | 2010-10-02 |
| 1.8.7 | 2010-12-10 |
| 1.8.8 | 2011-01-14 |
| 1.8.9 | 2011-01-21 |
| 1.8.10 | 2011-02-24 |
| 1.8.11 | 2011-03-18 |
| 1.8.12 | 2011-04-23 |
| 1.8.13 | 2011-05-17 |
| 1.8.14 | 2011-06-28 |
| 1.8.15 | 2011-08-08 |
| 1.8.16 | 2011-08-18 |
| 1.8.17 | 2012-01-10 |
| 1.8.18 | 2012-02-23 |
| 1.8.19 | 2012-04-17 |
| 1.8.20 | 2012-04-30 |
| 1.8.21 | 2012-06-05 |
| 1.8.22 | 2012-07-24 |
| 1.8.23 | 2012-08-15 |
| 1.8.24 | 2012-09-28 |
| 1.9.0 | 2012-10-08 |
| 1.9.1 | 2012-10-25 |
| 1.9.2 | 2012-11-23 |
| 1.10.0 | 2013-01-17 |
| 1.10.1 | 2013-02-15 |
| 1.10.2 | 2013-03-14 |
| 1.10.3 | 2013-05-03 |
| 1.10.4 | 2014-01-17 |
| 1.11.0 | 2014-06-26 |
| 1.11.1 | 2014-08-13 |
| 1.11.2 | 2014-10-16 |
| 1.11.3 | 2015-02-12 |
| 1.11.4 | 2015-03-11 |
Agregar el script de jQuery UI y el uso básico
Para comenzar con la biblioteca de jQuery UI, deberá agregar el script jQuery, el script jQuery UI y la hoja de estilo jQuery UI a su HTML.
En primer lugar, descargue 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 puede usarlos desde su HTML (por ejemplo, con sus otros scripts y hojas de estilo).
jQuery UI depende de jQuery, así que recuerde incluir jquery.js antes que 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! Ahora puedes usar jQuery UI. Por ejemplo, use el selector de fecha 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 para el datepicker:
Para más información, consulte el gude oficial de "Cómo empezar" .
Configuración de jQuery UI para el primer 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 de jQuery JavaScript.
Cuando desee utilizar la interfaz de usuario jQuery, deberá agregar estas bibliotecas a su HTML. Una forma rápida de comenzar es utilizando las fuentes de código disponibles de Content Delivery Network:
Bibliotecas jQuery
https://code.jquery.com/jquery-3.1.0.js
https://code.jquery.com/ui/1.12.0/jquery-ui.js
Puedes elegir muchos temas diferentes para jQuery UI e incluso lanzar tu propio tema. Para este ejemplo, utilizaremos 'Suavidad'. Usted agrega el tema a través de CSS.
jQuery UI CSS
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 pueda usar jQuery y jQuery UI. El orden en que se cargan las bibliotecas es importante. Llame primero a la biblioteca jQuery y luego a su biblioteca jQuery UI. Como jQuery UI extiende jQuery, debe llamarse después. Su HTML puede ser similar al 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>
