jQuery UI es un conjunto seleccionado de interacciones de interfaz de usuario, efectos, widgets y temas creados sobre la biblioteca jQuery JavaScript. Es la mejor manera de diseñar fácilmente un sitio web atractivo. Por ejemplo, si desea agregar un selector de fecha en la página web, simplemente puede crear un cuadro de texto y adjuntar la función jQuery UI datepicker() con el cuadro de texto. Creará un atractivo widget selector de fechas.
¿Por qué usamos jQuery UI?
jQuery UI contiene un conjunto de complementos que proporciona nuevas funciones a la biblioteca principal de jQuery. Se clasifica en cuatro grupos, es decir, interacciones, widgets, efectos, utilidades. Es una biblioteca de código abierto que contiene diferentes efectos de animación y widgets que ayudan en el desarrollo de aplicaciones web fáciles de usar altamente interactivas. Esta biblioteca necesita muy poco mantenimiento. Se puede utilizar con casi todos los navegadores.
¿Cómo usar jQuery UI en un proyecto?
Básicamente, existen dos métodos para agregar jQuery UI en un proyecto. El primero es usar un enlace CDN, y el segundo es descargar todos los archivos de jQuery UI.
1. Usando el enlace CDN: sin descargar los archivos de la interfaz de usuario de jQuery, puede usar directamente los enlaces CDN dentro de la sección principal para ejecutar el código.
<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>
2. Descargue archivos de jQuery UI: visite la documentación oficial (https://jqueryui.com/) de jQueryUI y haga clic en el botón Descarga personalizada para descargar una versión personalizada de la biblioteca. Después de descargar el archivo zip, descomprima los archivos y guárdelos en una carpeta. Después de eso, cree un archivo HTML y agregue los siguientes enlaces dentro de la sección principal del código.
<enlace rel=”hoja de estilo” href=”jqueryui/jquery-ui.min.css”>
<script src=”jqueryui/external/jquery/jquery.js”></script>
<script src=”jqueryui/jquery- ui.min.js”></script>
Ejemplo: En este ejemplo, crearemos un efecto de acordeón animado usando jQuery UI.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(function () {
$("#gfg").accordion({
animate: 1000
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>jQuery UI Accordion animate Option</h3>
<br><br>
<div id="gfg">
<h3>GFG</h3>
<div>GeeksforGeeks</div>
<h3>Geeks</h3>
<div>GeeksforGeeks</div>
<h3>GeeksforGeeks</h3>
<div>Welcome to GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
