JQuery UI

La interface de usuario de JQuery

JQueryUI es un conjunto de componentes basados en la librería JQuery que permiten añadir una serie de efectos y funcionalidades a un proyecto de manera muy sencilla. Con JQueryUI es posible crear efectos acordeón, autocompletado, draggable, como también botones, campos de texto, ventanas, menús desplegables,... con un diseño predefinido. Esta librería está apoyada en JQuery, por tanto, es necesario disponer previamente de la librería JQuery para el correcto funcionamiento de ésta. Desde el menú de navegación de la página oficial de JQuery UI es posible visualizar una gran variedad de demos, opciones y diseños que muestran la gran popularidad y expansión de este set de plugins.

AÑADIR JQuery UI

Para añadir JQuery UI a un proyecto es necesario descargar la librería desde su página oficial e incluirlo al proyecto. El archivo una vez descargado y descomprimido se compone de un directorio que incluye archivos JavaScript (extensión js) y archivos de estilos ( extensión css), además de una carpeta con algunas imágenes. El archivo principal está incluido en dos versiones distintas, una es la versión normal (jquery-ui.js) y la otra, la versión simplificada (jquery-ui.min.js). Además de importar el archivo jquery-ui es necesario haber incluido la librería de JQuery previamente.

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.js"></script>

La sección de descarga de JQuery-UI contiene distintas opciones, entre ellas permite elegir algunos de sus estilos predefinidos. Estos estilos están compuestos por uno o varios archivos de estilos que pueden variar según las opciones marcadas. Al igual que el archivo jquery-ui.js los archivos de estilos vienen disponibles en dos versiones. Tan solo es necesario incluir el archivo o los archivos de estilos al proyecto para hacer uso de ellos.

<link type="text/css" rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.theme.min.css">

Una vez todo incluido en el archivo html correspondiente debería quedar algo similar al código de abajo

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<link type="text/css" rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.min.css">
		<link type="text/css" rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.structure.min.css">
		<link type="text/css" rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.theme.min.css">
		<script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
		<script type="text/javascript" src="js/interface.js"></script>
	</head>
	<body>
		<h1>JQuery-UI</h1>
	</body>
</html>

JQuery UI - MÉTODOS

La sección de DEMO de la página oficial de JQuery-UI muestra de forma detallada la implementación de los distintos métodos, aquí algunos ejemplos de algunos de ellos.

<div class="caja">
    Hola soy un elemento de la web
</div>
<div class="caja">
    Hola soy un elemento de la web
</div>
<div class="caja">
    Hola soy un elemento de la web
</div>

Draggable

$(document).ready(function(){
    $(".caja").draggable();
	
});

Resizable

$(document).ready(function(){
    $(".caja").resizable();	
});

<style>
.lista{
    width:20%;
    padding:20px;
    list-style:none;
    border:black 1px solid;
    cursor:pointer;
}
.lista li{
    background:lightblue;
    border:black 1px dashed;
}
ul .ui-unselecting{
    background: red;
}
ul .ui-selecting{
    background-color:#000;
}
ul .ui-selected{
    background: orange;
}
</style>

<ul class="lista">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

Selectable

$(document).ready(function(){	
    $(".lista").selectable();
});

Sortable

$(document).ready(function(){	
    $(".lista").sortable({
        update:function(event,ui){
            console.log("orden de lista modificado");
        }
    });
});

Draggable y Droppable

<div id="div"></div>
<div id="div2"></div>

$("#div").draggable();
$("#div2").droppable({
    drop: function(){
        console.log("soltado dentro del div2");
    }
});

JQuery UI - WIDGETS

Tooltip

<a href="#" title="Este es un efecto básico de tooltip" id="div">Tooltip</a>
<a href="#" title="Este es un efecto slide de tooltip" id="div2">Tooltip slide</a>

$("#div").tooltip();
$("#div2").tooltip({
    show:{
        effect:"slideDown",
	delay: 250
    }
});

Dialog

<button id="boton-dialog">Mostrar ventana</button>
<div id="div" title="ventana">
    <p>
    Este en un mensaje de información en una ventana de diálogo
    </p>
</div>

$("#boton-dialog").click(function(){
		$("#div").dialog();
	});

Datepicker

<input type="text" id="fecha">

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

Tabs

<div id="menu">
    <ul>
	<li><a href="#elemento-1">Tab 1</a></li>
	<li><a href="#elemento-2">Tab 2</a></li>
	<li><a href="#elemento-3">Tab 3</a></li>
	<li><a href="#elemento-4">Tab 4</a></li>
    </ul>
    <div id="elemento-1">
        Esta es la primera pestaña
    </div>
    <div id="elemento-2">
	Esta es la segunda pestaña
    </div>
    <div id="elemento-3">
	Esta es la tercera pestaña
    </div>
    <div id="elemento-4">
	Esta es la cuarta pestaña
    </div>
</div>

$("#menu").tabs();

Comentarios: 0