Curso Javascript Intermedio

CURSO JAVASCRIPT
INTERMEDIO
TEMAS:
• Uso y manejo de formato JSON • Jquery recorrer elementos del • Jquery UI
DOM
• Simular una clase con una • Draggable
función • Jquery métodos de utilidad
• Droppable
• Manejo de prototipos • Jquery Eventos
• Resizable
• Browser
• Uso de get y set • Slectable
• Document
• Selectores • Sortable
• Objectos
• DOM nodos • Accordion
• Keyboard
• Eventos • Slider
• Mouse
• Tabs
• Jquery primeros pasos • Jquery Efectos
• • Tooltip
• Jquery selectores Basicos
• Fading • Dialog
• Jquery css
• Sliding
• Jquery clases css
• Jquery AJAX
• Jquery dimensiones
• Jquery Parseo XML
• Jquery atributos
JSON
JSON (JavaScript Object Notation - Notación de Objetos de JavaScript) es un formato ligero de intercambio de datos.
Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo.
var str='{"propiedad":"valor"}';
var obj={"propiedad":"valor"};
var obj3={
"nombre":"vlady",
"propiedad":["valor 1", "valor2"],
"estilos":{"color":"0xFF0000" , "x":24}
}
Reglas :
1.- Las propiedades y valores string van con comillas dobles
2.- No se pueden guardar funciones como datos json ( pero si pueden ir en formato string );
3.- El formato de los datos json debe ser como el formato de los objetos ( propiedades y valores ).
Validar nuestro json https://jsonformatter.curiousconcept.com/

JSON
JSON Maneja 2 funciones importantes. JSON.stringify y JSON.parse
• JSON.stringify : Convierte un valor dado en javascript a una cadena JSON, opcionalmente reemplaza
valores si es especificada la función de remplazo, o si se especifican las propiedades mediante un array
de reemplazo.
JSON
JSON Maneja 2 funciones importantes. JSON.stringify y JSON.parse
• JSON.parse : Analiza una cadena de texto como JSON, transformando opcionalmente el valor
producido por el análisis.
JSON
Actividad 1.
- Crear un objeto que contenga 2 propiedades, 1 arreglo, 1 objeto y convertirlo a formato string valido para json
- Crear un string que contenga 1 arreglo, 1 objeto y 1 propiedad en formato valido para json y convertirlo a objeto.
- Crear un objeto con una propiedad string que al convertirlo en json con parse me de la propiedad string invertida.
- Guardar 2 datos en local storage en formato json y recuperarlos
NOTA: JSON se emplea

habitualmente en entornos donde
el tamaño del flujo de datos entre
cliente y servidor es de vital
importancia (de aquí su uso por
Yahoo, Google, etc, que atienden
a millones de usuarios) cuando la
fuente de datos es explícitamente
de fiar.
SIMULAR UNA CLASE CON UNA FUNCIÓN
Una clase consta de:
- Clase
- Propiedades
- Metodos
SIMULAR UNA CLASE CON UNA FUNCIÓN
Actividad 2.
- Crear una clase alumno
- Crear una clase hijo
- Crear una clase casa

MANEJO DE PROTOTIPOS
Los prototipos en javascript nos permite simular herencia (recordemos que en JavaScript no existe la herencia basada
en clases), si queremos agregar métodos o propiedades a un objeto podemos hacerlo mediante el prototype.
USO DE GET Y SET
GET :A veces es deseable permitir acceso a una propiedad que retorna un valor dinámicamente calculado, o si desea
mostrar el estado de alguna variable interna sin requerir el uso de llamadas a métodos explicitos.
En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simultáneamente un getter
ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con
un setter para crear un tipo de pseudo-propiedad.
SET : te permite almacenar valores únicos de cualquier tipo, incluso valores primitivos u objetos de referencia.
USO DE GET Y SET Para OBJETOS
USO DE GET Y SET Para CLASES con ECMA SCRIPT 6
ACTIVIDAD 3
- Crear una extencion de la clase String que me permita ponerle un limite máximo de caracteres.
- Crear una extencion de la clase array que se llame indexOf que me permita saber si un elemento ya existe un
elemento del arreglo y devuelva el id de la primera coincidencia o -1 de no encontrar ninguna.
- Crear una extencion de la clase array que se llame shuffle que me regrese el arreglo revuelto
- Crear una extencion de la clase String que le de formato de moneda si es un numero valida
- Crear una extencion de la clase String que le quite las etiquetas a una cadena html
ejemplo: <html><body><p>Hola</p></body> </html> solo me devuelva Hola
- Crear una una extencion de la clase array que se llame pushUnico que permita incluir solo elementos únicos sin repetir
en un arreglo
EXTRA : - Crear una función que simule un for recorriendo un arreglo basado en setTimeout o setInterval reciba como
parametro el arreglo , tiempo en milisegundos , función que se accione al termino del recorrido del arreglo.
SELECTORES
Selectores nos permite obtener los elementos usando la misma sintaxis que aplicamos cuando creamos nuestras reglas
en CSS.
• querySelector: podemos obtener el primer elemento del DOM que haga match con lo que le pasamos.
Funciona exactamente igual que los selectores de jQuery.
• querySelectorAll: funciona de la misma manera que el selector anterior (querySelector), pero nos trae todos
los elementos que coincidan con la condición dada, en vez de solo el primero elemento; dicha colección de
elementos será representada en un array.
• getElementById: Este método nos permite obtener un elemento del DOM segun el valor del atributo id del
mismo:
• getElementsByTagName: Este método nos permite obtener todos los elementos del DOM segun el nombre
de la etiqueta del elemento; la colección de elementos será devuelta en un array.
• getElementsByClassName: Este método nos permite obtener todos los elementos del DOM segun el valor del
atributo class del mismo; dicha colección será devuelta en un array.
https://www.w3schools.com/cssref/trysel.asp
Selector Example Example description CSS
SELECTORES
.class .intro Selecciona todos los elementos con class = "intro" 1
#id #firstname Selecciona el elemento con id = "firstname" 1
* * Selecciona todos los elementos 2
element p Selecciona todos los elementos <p> 1
element,element div, p Selecciona todos los elementos <div> y todos los elementos <p> 1
element element div p Selecciona todos los elementos <p> dentro de los elementos <div> 1
element>element div > p Selecciona todos los elementos <p> donde el padre es un elemento <div> 2
element+element div + p Selecciona todos los elementos <p> que se colocan inmediatamente después de los elementos <div> 2
element1~element2 p ~ ul Selecciona cada elemento <ul> que está precedido por un elemento <p> 3
[attribute] [target] Selecciona todos los elementos con un atributo de destino 2
[attribute=value] [target=_blank] Selecciona todos los elementos con target = "_ blank" 2
[attribute~=value] [title~=flower] Selecciona todos los elementos con un atributo de título que contiene la palabra "flor" 2
[attribute|=value] [lang|=en] Selecciona todos los elementos con un valor de atributo lang que comienza por "en" 2
[attribute^=value] a[href^="https"] Selecciona cada elemento <a> cuyo valor de atributo href comienza por "https" 3
[attribute$=value] a[href$=".pdf"] Selecciona cada elemento <a> cuyo valor de atributo href termina con ".pdf" 3
[attribute*=value] a[href*="w3schools"] Selecciona cada elemento <a> cuyo valor de atributo href contiene la subcadena "w3schools" 3
:active a:active Selecciona el enlace activo 1
::after p::after Insertar algo después del contenido de cada elemento <p> 2
::before p::before Insertar algo antes del contenido de cada elemento <p> 2
:checked input:checked Selecciona cada elemento <input> seleccionado 3
:disabled input:disabled Selecciona cada elemento <input> deshabilitado 3
:empty p:empty Selecciona cada <p> elemento que no tiene hijos (incluidos los nodos de texto) 3
:enabled input:enabled Selecciona cada elemento <input> habilitado 3
:first-child p:first-child Selecciona cada <p> elemento que es el primer hijo de su padre 2
::first-letter p::first-letter Selecciona la primera letra de cada elemento <p> 1
::first-line p::first-line Selecciona la primera línea de cada elemento <p> 1
:first-of-type p:first-of-type Selecciona cada <p> elemento que es el primer <p> elemento de su elemento principal 3
:focus input:focus Selecciona el elemento de entrada que tiene el foco 2
:hover a:hover Selecciona enlaces en el mouse sobre 1
:in-range input:in-range Selecciona elementos de entrada con un valor dentro de un rango especificado 3
:invalid input:invalid Selecciona todos los elementos de entrada con un valor no válido 3
SELECTORES
:lang(language) p:lang(it) Selecciona cada elemento <p> con un atributo lang igual a "it" (italiano) 2
:last-child p:last-child Selecciona cada <p> elemento que es el último hijo de su padre 3
:last-of-type p:last-of-type Selecciona cada <p> elemento que es el último <p> elemento de su padre 3
:link a:link Selecciona todos los enlaces no visitados 1
:not(selector) :not(p) Selecciona cada elemento que no es un elemento <p> 3
:nth-child(n) p:nth-child(2) Selecciona cada <p> elemento que es el segundo hijo de su padre 3
:nth-last-child(n) p:nth-last-child(2) Selecciona cada <p> elemento que es el segundo hijo de su padre, contando desde el último hijo 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selecciona cada <p> elemento que es el segundo <p> elemento de su padre, contando desde el último niño 3
:nth-of-type(n) p:nth-of-type(2) Selecciona cada elemento <p> que es el segundo <p> elemento de su elemento principal 3
:only-of-type p:only-of-type Selecciona cada <p> elemento que es el único elemento <p> de su elemento principal 3
:only-child p:only-child Selecciona cada <p> elemento que es el único hijo de su padre 3
:optional input:optional Selecciona los elementos de entrada sin atributo "required" 3
:out-of-range input:out-of-range Selecciona elementos de entrada con un valor fuera de un rango especificado 3
:read-only input:read-only Selecciona elementos de entrada con el atributo "readonly" especificado 3

SELECTORES
:read-write input:read-write Selecciona elementos de entrada con el atributo "readonly" NO especificado 3
:required input:required Selecciona elementos de entrada con el atributo "required" especificado 3
:root :root Selecciona el elemento raíz del documento 3
::selection ::selection Selecciona la parte de un elemento seleccionada por un usuario
:target #news:target Selecciona el elemento activo #news activo (hecho clic en una URL que contenga ese nombre de anclaje) 3
:valid input:valid Selecciona todos los elementos de entrada con un valor válido 3
:visited a:visited Selecciona todos los enlaces visitados 1
Liga del excel con los selectores
https://docs.google.com/spreadsheets/d/1NXQNX0OC_-OOZtqiHA5jg0kiVRKdscHmFLQR3_0BI1A/edit?usp=sharing
SELECTORES
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>Bienvenidos</h1>
<div id="div">Div con id</div><br>
<div class="div">Div con class</div><br>
<p>Párrafo</p>
<a href="www.google.com" target="_blank" class="div">texto del enlace 1</a>
<ul class="lista">
<li value="0">El 1</li>
</ul>

<a id="mienlace" href="www.google.com" target="_blank">texto del enlace 2</a>
<p align="center" name="uno">Texto centrado</p>
<script>
var domE1=document.querySelector("[name]");
console.log( domE1.innerHTML );
var domE2=document.querySelectorAll(".div");
console.log( domE2 );
var domE3=document.getElementById("mienlace");
var domE4=document.getElementsByTagName("p");
var domE5=document.getElementsByClassName("lista");
</script>
</body>
</html>
Actividad 4
- Utilizar el codigo html anterior para identificar mediante un selector cada div que contenga el documento
- Utilizar el codigo html anterior para identificar mediante un selector cada liga que contenga una clase
- Utilizar el codigo html anterior para identificar mediante un selector los elementos de la lista e imprimir el valor
de cada elemento
- Utilizar el codigo html anterior para identificar mediante un selector las ligas en el html e imprimir el texto que
contienen
- Recorrer cada elemento mediante selectores poner en negrita <b> texto ejemplo </b> o fontWeight
- Cambiar de color el fondo a gris de cada elemento de la lista que tenga un valor que sea par
- Haz que al pasar el mouse sobre una liga esta cambie su color de fondo
- Simular la funcion de jquery para buscar un selector o selectores determinados
function $ ( selector ){
// Codigo que realiza para devolver el elemento
}
- EXTRA simular la funcion css de jquery $(selector).css( attributocssstr , valorcssstr );
Liga importante de estilos directos en javascript

https://www.w3schools.com/jsref/dom_obj_style.asp
DOM NODOS
La creación del Document Object Model o DOM es una de las innovaciones que más ha influido en el desarrollo de las
páginas web dinámicas y de las aplicaciones web más complejas.
DOM permite a los programadores web acceder y manipular las páginas XHTML como si fueran documentos XML. De
hecho, DOM se diseñó originalmente para manipular de forma sencilla los documentos XML.
A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de
programación (Java, PHP, JavaScript) y cuyas únicas diferencias se encuentran en la forma de implementarlo.
DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que están
interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la
unión de todos los nodos se llama "árbol de nodos".
DOM NODOS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
DOM NODOS
La transformación automática de la página en un árbol de nodos siempre sigue las mismas reglas:
● Las etiquetas XHTML se transforman en dos nodos: el primero es la propia etiqueta y el segundo nodo es hijo del
primero y consiste en el contenido textual de la etiqueta.
● Si una etiqueta XHTML se encuentra dentro de otra, se sigue el mismo procedimiento anterior, pero los nodos
generados serán nodos hijo de su etiqueta padre.
Como se puede suponer, las páginas XHTML habituales producen árboles con miles de nodos. Aun así, el proceso de
transformación es rápido y automático, siendo las funciones proporcionadas por DOM las únicas que permiten acceder
a cualquier nodo de la página de forma sencilla e inmediata.
TIPOS DE NODOS
La especificación completa de DOM define 12 tipos de nodos, aunque las páginas XHTML habituales se pueden
manipular manejando solamente cuatro o cinco tipos de nodos:
● Document, nodo raíz del que derivan todos los demás nodos del árbol.
● Element, representa cada una de las etiquetas XHTML. Se trata del único nodo que puede contener atributos y el
único del que pueden derivar otros nodos.
● Attr, se define un nodo de este tipo para representar cada uno de los atributos de las etiquetas XHTML, es decir,
uno por cada par atributo=valor.
● Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
● Comment, representa los comentarios incluidos en la página XHTML.
Los otros tipos de nodos existentes que no se van a considerar son DocumentType, CDataSection, DocumentFragment,
Entity, EntityReference, ProcessingInstruction y Notation.
Atributos y métodos generales de un nodo
Atributo Descripción
nodeName Valor de la propiedad nodeName del elemento, por ejemplo el tipo de etiqueta HTML
nodeValue Valor de la propiedad nodeValue del elemento, por ejemplo si es una etiqueta HTML será null
nodeType Constante numérica que identifica el tipo de nodo
parentNode Referencia al objeto padre en el árbol nodal
childNodes Referencia a una colección que contiene todos los nodos hijo
firstChild Referencia al primer nodo hijo
LastChild Referencia al último nodo hijo
previousSibling Referencia al nodo hermano previo
nextSibling Referencia al nodo hermano siguiente
attributes Referencia al objeto que contiene los atributos
ownerDocument Referencia al objeto documento propietario

Métodos disponibles que nos permiten realizar diversas
operaciones sobre un determinado nodo
Método Descripción Forma de uso
insertBefore Inserta un nodo hijo antes del referenciado node.insertBefore(newnode, existingnode)
replaceChild Reemplaza el nodo hijo referenciado node.replaceChild(newnode, oldnode)
removeChild Elimina el nodo hijo referenciado node.removeChild(node)
appendChild Añade un nodo al final de la lista de nodos hijo node.appendChild(node)
hasChildNodes Permite determinar si un nodo tiene hijos node.hasChildNodes()
cloneNode Devuelve un duplicado del nodo donde deep es booleano especifica si se node.cloneNode(deep)
copia la descendencia si o no
contains Devuelve un valor booleano que indica si un nodo es un descendiente node.contains(node)

de un nodo especificado.
style La propiedad de estilo devuelve un objeto CSSStyleDeclaration, que node.style.property = value

representa el atributo de estilo de un elemento.
La propiedad style se utiliza para obtener o establecer un estilo

específico de un elemento utilizando diferentes propiedades CSS.
USEMOS NODOS
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Párrafo</p>
<a href="www.google.com" target="_blank" class="div" value="0" name="enlace1">texto del enlace 1</a>
<ul class="lista">
</ul>

<script>
var nodeAnchor = document.querySelector('a');

var nodeLista = document.querySelector('li');
var nodeBody = document.querySelector('body');
console.log('Tipo: ' + nodeAnchor.nodeType);

console.log('Nombre: ' + nodeAnchor.nodeName);
console.log('Valor: ' + nodeAnchor.nodeValue); // Solo existe en los atributos para saber el valor del atributo
console.log('Atributos: ' + nodeAnchor.attributes);
console.log('Documento propietario: ' + nodeAnchor.ownerDocument);
console.log('Nodo padre: ' + nodeAnchor.parentNode);
console.log('Nodo hermano siguiente: ' + nodeLista.nextSibling.nextSibling);
console.log('Nodo hermano previo: ' + nodeLista.previousSibling.previousSibling);
console.log('Nodo primer hijo: ' + nodeBody.firstChild);
console.log('Nodo ultimo hijo: ' + nodeBody.LastChild);
console.log('Nodo hermano previo: ' + nodeBody.childNodes);
console.log(nodeAnchor.nodeType);
console.log(nodeAnchor.nodeName);
console.log(nodeAnchor.nodeValue);
console.log(nodeAnchor.attributes);
console.log(nodeAnchor.ownerDocument);
console.log(nodeAnchor.parentNode);
console.log(nodeLista.nextSibling.nextSibling);
console.log(nodeLista.previousSibling.previousSibling);
console.log(nodeBody.firstChild);
console.log(nodeBody.LastChild);
console.log(nodeBody.childNodes);
</script>
</body>
</html>
Actividad 5
1.- Con el html anterior recorre los nodos hijos del body y elimina el segundo nodo que sea una liga
2.- Con el html anterior recorre los nodos hijos del body y agrega un duplicado de la lista
3.- Con el html anterior recorre los nodos hijos del body y agrega 2 elementos a la lista
4.- Con el html anterior recorre los nodos hijos del body e imprime en consola el código javascript contenido en el
documento
EVENTOS
Hasta ahora, todas las aplicaciones y scripts que se han creado tienen algo en común: se ejecutan desde la primera
instrucción hasta la última de forma secuencial. Gracias a las estructuras de control de flujo (if, for, while) es posible
modificar ligeramente este comportamiento y repetir algunos trozos del script y saltarse otros trozos en función de
algunas condiciones.
Este tipo de aplicaciones son poco útiles, ya que no interactúan con los usuarios y no pueden responder a los diferentes
eventos que se producen durante la ejecución de una aplicación. Afortunadamente, las aplicaciones web creadas con el
lenguaje JavaScript pueden utilizar el modelo de programación basada en eventos.
En este tipo de programación, los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que
mueva el ratón, que cierre la ventana del navegador). A continuación, el script responde a la acción del usuario
normalmente procesando esa información y generando un resultado.
Los eventos hacen posible que los usuarios transmitan información a los programas. JavaScript define numerosos
eventos que permiten una interacción completa entre el usuario y las páginas/aplicaciones web. La pulsación de una
tecla constituye un evento, así como pinchar o mover el ratón, seleccionar un elemento de un formulario,
redimensionar la ventana del navegador, etc.
EVENTOS
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento,
JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen
traducirse por "manejadores de eventos".
Crear páginas y aplicaciones web siempre ha sido mucho más complejo de lo que debería serlo debido a las
incompatibilidades entre navegadores. A pesar de que existen decenas de estándares para las tecnologías empleadas,
los navegadores no los soportan completamente o incluso los ignoran.
Las principales incompatibilidades se producen en el lenguaje XHTML, en el soporte de hojas de estilos CSS y sobre
todo, en la implementación de JavaScript. De todas ellas, la incompatibilidad más importante se da precisamente en el
modelo de eventos del navegador.
MODELOS DE EVENTOS
Así, existen hasta tres modelos diferentes para manejar los eventos dependiendo del navegador en el que se ejecute la
aplicación.
● Modelo básico de eventos: Este modelo simple de eventos se introdujo para la versión 4 del estándar HTML y se
considera parte del nivel más básico de DOM. Aunque sus características son limitadas, es el único modelo que es
compatible en todos los navegadores y por tanto, el único que permite crear aplicaciones que funcionan de la
misma manera en todos los navegadores.
● Modelo de eventos estándar: Las versiones más avanzadas del estándar DOM (DOM nivel 2) definen un modelo de
eventos completamente nuevo y mucho más poderoso que el original. Todos los navegadores modernos lo
incluyen, salvo Internet Explorer.
Modelo de eventos de Internet Explorer: Internet Explorer utiliza su propio modelo de eventos, que es similar
pero incompatible con el modelo estándar. Se utilizó por primera vez en Internet Explorer 4 y Microsoft decidió
seguir utilizándolo en el resto de versiones, a pesar de que la empresa había participado en la creación del
estándar de DOM que define el modelo de eventos estándar.
MODELO BÁSICO DE EVENTOS
En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que se le pueden asignar.
Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo del ratón) puede estar definido para varios
elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes.
El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al
evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de
mover el ratón se denomina onmousemove.
Los eventos más importantes definidos por JavaScript:
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onresize Se ha modificado el tamaño de la ventana del navegador <body>

onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón "entra" en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>

onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>

Un evento de JavaScript por sí mismo carece de utilidad. Para que los eventos resulten útiles, se deben asociar
funciones o código JavaScript a cada evento. De esta forma, cuando se produce un evento se ejecuta el código indicado,
por lo que la aplicación puede responder ante cualquier evento que se produzca durante su ejecución.
Las funciones o código JavaScript que se definen para cada evento se denominan "manejador de eventos" y como
JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores:
● Manejadores como atributos de los elementos XHTML.

● Manejadores como funciones JavaScript externas.
● Manejadores "semánticos".
Manejadores de eventos como atributos
Se trata del método más sencillo y a la vez menos profesional de indicar el código JavaScript que se debe ejecutar
cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento XHTML. En el
siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el ratón sobre un botón:
<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
<div onclick="alert('Has pinchado con el ratón');" onmouseover="alert('Acabas de pasar el ratón por encima');">
Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima
</div>
<body onload="alert('La página se ha cargado completamente');">

//...
</body>
Manejadores de eventos como funciones externas
La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero menos aconsejable
de tratar con los eventos en JavaScript. El principal inconveniente es que se complica en exceso en cuanto se añaden
algunas pocas instrucciones, por lo que solamente es recomendable para los casos más sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario, es aconsejable agrupar todo el
código JavaScript en una función externa y llamar a esta función desde el elemento XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un botón:
function muestraMensaje() {
alert('Gracias por pinchar');
}
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />

Manejadores de eventos como funciones externas
Afortunadamente, existe un método alternativo para definir los manejadores de eventos de JavaScript. Esta técnica es
una evolución del método de las funciones externas, ya que se basa en utilizar las propiedades DOM de los elementos
XHTML para asignar todas las funciones externas que actúan de manejadores de eventos. Así, el siguiente ejemplo:
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />

Se puede transformar en:
// Función externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la función externa al elemento

document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="1" />
Obteniendo información del evento (objeto event)
Si se quiere programar una aplicación que funcione correctamente en todos los navegadores, es necesario obtener el
objeto event de forma correcta según cada navegador. El siguiente código muestra la forma correcta de obtener el
objeto event en cualquier navegador:
<!DOCTYPE html>
<html>
<head>
function manejadorEventos(elEvento) { <title></title>
var evento = elEvento || window.event; <style>
li{
} }
cursor:pointer;
li:hover{
background-color:#ccc;
}
</style>
</head>
<body>
<ul class="lista">
var node = document.querySelectorAll('li'); <li value="2">El 3</li>
for(var i=0,l=node.length;i<l;i++){ </ul>
node[i].onclick=clic; <script>
} var node = document.querySelectorAll('li');
for(var i=0,l=node.length;i<l;i++)
function clic(ev){ node[i].onclick=clic;
var e = ev || window.event; function clic(ev){

var e=ev||window.event;
console.log(e); console.log(e);
}
}
</script>
</body>
</html>
Actividad 6
1.- Crear un html que al cargar la pagina me de una alerta
2.- Crear un html que al descargar o cerrar la pagina me de una alerta
3.- Crear un html con 3 botones que al presionar el segundo botón me da la alerta de “correcto” y los otros de
“incorrecto”
4.- Crear un html que tenga una caja editable y valide que la caja le escriban “verdadero” para dar la alerta de
“correcto”
5.- Crear un html que contenga una pregunta y sus posibles respuestas deben tener rollover y al pinchar cualquier
respuesta debe quedar marcada la respuesta seleccionada.
<script>
// Funcion For por intervalos,
// ini = valor inicial , fin = valor maximo ,
// fn = funcion a ejecutar por intervalos, mil = milisegundos entre
ejecucion
function forr(ini,fin,fn,mil){
var ite=ini; (ini<fin)?repite():"";
function repite(){
var inter=setTimeout(function(){
fn(); ite++;
if(ite<fin){repite();}
},mil);
}
}
var i=0;
forr(0,10,function(){
console.log(i++)
Actividad 7
1.- Crear un html que funcione como un juego de pares
2.- Crear un html que al presionar 3 botones me deje avanzar ( implementar 1 variable para que sea secuencial o no la
secuencia de clics para que me deje avanzar)
¿Qué es jQuery?
JQuery es una biblioteca de JavaScript rápida, pequeña y característica. Hace cosas como el desplazamiento y
manipulación de documentos HTML, manejo de eventos, animación y Ajax mucho más simple con una API fácil de usar
que funciona a través de una multitud de navegadores. Con una combinación de versatilidad y extensibilidad.
A partir de jQuery 3.0, los siguientes navegadores son compatibles:
Internet Explorer: 9+
Chrome, Edge, Firefox, Safari: actual y actual - 1
Opera: Actual
Safari Mobile iOS: 7+
Android 4.0+
Existe la versión 1.9 que aún conserva algunas retro compatibilidades pero ya no es recomendable usarlo.
Jquery está bajo la licencia MIT license: Usted es libre de usar el Proyecto en cualquier otro proyecto (incluso proyectos
comerciales) siempre y cuando el encabezado de derechos de autor se mantenga intacto.
JQuery primeros pasos
1.- Descargar jquery https://jquery.com/download/
● Versión comprimida para producción: Comúnmente usada para componentes terminados
● Versión descomprimida para desarrollo: Comúnmente usada para componentes en desarrollo
Detalles de cambios importantes en jquery https://platzi.com/blog/novedades-jquery-3/
2.- Agregar a nuestro html la libreria jquery
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
3.- Inicializar nuestro jquery

<body>
<script>
$(function(){
// inica mi jquery cuando documento se ha cargado
});
</script>
</body>
JQuery Selectores
https://www.w3schools.com/cssref/trysel.asp
o slides 15 ,16 y 17 de este curso
<!doctype html>
<html>
<head>
</head>
<body>
<p>Mi primer uso de jquery</p>
<script>
$(function(){
console.log($);
console.log("Mi primer jquery");
});
</script>
</body>
</html>
JQuery Selectores
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Párrafo</p>
<a href="www.google.com" target="_blank" class="div">texto del
enlace 1</a>
<ul class="lista">
</ul>

<script>
$(function(){
});
</script>
</body>
</html>
JQuery CSS
Estas propiedades se utilizan para manipular el estilo o propiedades de elementos
html.
➔ attr y prop
● 1 primer parámetro funcionan como get identifica el atributo o propiedad
● 2 segundo parámetro opcional funciona como asignación de la propiedad o <!DOCTYPE html>
<html>
<head>
atributo <title></title>
○ $(“div”).attr(“id”); <script src="js/jquery-
3.2.1.min.js"></script>
○ $(“div”).attr(“id”,”a1”); </head>
<body>
<p>Párrafo</p>
➔ removAttr y removeProp
<a href="www.google.com"
target="_blank" class="div">texto del enlace 1</a>
<ul class="lista">
● 1 primer parámetro nombre del atributo o propiedad a borrar 1</li>
<li value="0">El
○ $(“h1”).removeAttr(“id”); 2</li>
<li value="1">El
<li value="2">El
3</li>
➔ val
<li value="3">El
4</li>
<li value="4">El
sirve para elementos de formulario combobox, checkbox, radiobutton, list 5</li>
</ul>
y varía los usos, desde asignar texto, saber qué texto tiene hasta seleccionar <div class="div">Div con class</div><br>
<a id="mienlace" href="www.google.com"
radio buttons o combobox como se muestra en la descripción de la página target="_blank">texto del enlace 2</a>
jquery
<script>
https://api.jquery.com/val/ $(function(){
JQuery CSS
➔ addClass
● 1 primer parámetro agrega una clase a un elemento o a varios
○ $(“h1”).addClass(“negritaRoja”);
➔ css
● 1 primer parámetro nombre de la propiedad css a asignar o modificar <!DOCTYPE html>
<html>
<head>
● 2 segundo paramentro valor de la propiedad css a asignar o modificar <title></title>
● 3 existe una tercera forma de usarse asignando o midificando varias <script src="js/jquery-
propiedades o atributos al mismo tiempo en formato de objeto. </head>
<body>
○ $(“div”).css(“opacity”); <h1>Bienvenidos</h1>
○ $(“div”).css(“opacity”,0.5); <p>Párrafo</p>
○ $(“div”).css({opacity:0.5, top:”10px”, width:”50%”}); target="_blank" class="div">texto del enlace 1</a>
<ul class="lista">
<li value="0">El
1</li>
➔ hasClass 2</li>
<li value="1">El
<li value="2">El
● 1 primer parámetro nombre de la supuesta clase 3</li>
<li value="3">El
○ $(“div”).hasClass(“negritaRoja”); 4</li>
<li value="4">El
5</li>
</ul>
➔ removeClass <div class="div">Div con class</div><br>
● 1 primer parámetro nombre de la clase target="_blank">texto del enlace 2</a>
○ $(“div”).removeClass(“negritaRoja”);
<script>
$(function(){
JQuery CSS
➔ toggleClass
● 1 primer parámetro agrega una clase a un elemento o a varios
● 2 segundo parametro opcional asigna el estado en ( true o false )
○ // Normalmente va ligado a un evento para quitar o poner con cada
evento. Para mas información https://api.jquery.com/toggleClass/
○ $(“h1”).toggleClass(“negritaRoja”); <!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-
</head>
<body>
<p>Párrafo</p>
target="_blank" class="div">texto del enlace 1</a>
<ul class="lista">
<li value="0">El
1</li>
<li value="1">El
2</li>
<li value="2">El
3</li>
<li value="3">El
4</li>
<li value="4">El
5</li>
</ul>

target="_blank">texto del enlace 2</a>
<script>
$(function(){
Actividad 8
1.- Crear un html que funcione como un una evaluación, muestre 5 preguntas y al contestar todas muestre la
calificación obtenida. ( las respuestas deben ser 2 o más por pregunta pero solo 1 la respuesta correcta).
JQuery Dimensiones
Con jQuery, es fácil de trabajar con las dimensiones de los elementos y la ventana del navegador.
jQuery tiene varios métodos importantes para trabajar con las dimensiones:
● width() : no incluye padding , borde ni margen

● height() : no incluye padding , borde ni margen
● innerWidth() : incluye padding
● innerHeight() : incluye padding
● outerWidth(true) : incluye padding, borde y margen
● outerHeight(true) : incluye padding, borde y margen
Todos los métodos tienen la funcionalidad de get y set

pueden leerse el valor actual o asignar un valor al
elemento
JQuery Dimensiones
La forma de utilizar estas funciones es la siguiente:
$(window).width();
$(window).height();
$(document).height();
$(document).width();
$("#div1").outerHeight(true);
$(".class1").outerHeight(true);
$("#div1").width(500).height(500);
JQuery Atributos
¿Que es un atributo?
Atributo: Cualquier cosa que tengamos en una etiqueta HTML para personalizarla.
Para obtener y/o modificar valores en los atributos de los diferentes elementos del DOM se utiliza el metodo
attr :
● Atributos que se modifican con attr(): class, id, href, label, src, title, value…
su sintaxis es la siguiente para obtener el valor del atributo seleccionado.
var atributo = $(selector).attr(atributo);

JQuery Atributos
attr :
● y su sintaxis para asignar un valor al atributo seleccionado
/* Sintaxis por defecto */

$(selector).attr(atributo, valor)
/* Modificar valor usando una funcion */

$(selector).attr(atributo,function(index,valor))
/* Modificar multiples valores en otros tantos atributos */

$(selector).attr({atributo1:valor1, atributo2:valor2,...})
donde :
index : Posición del elemento en el DOM en caso de haber varios.
valor : Valor que queremos aplicar al atributo.
JQuery Atributos
removeAttr :
● su sintaxis es la siguiente para remover el atributo seleccionado
$(selector).removeAttr(atributo);
JQuery Propiedades
¿Que es una propiedad?
Propiedad: cualquier cosa a la que podamos acceder desde una propiedad de un objeto nativo Javascript.
Para obtener y/o modificar valores en las propiedades de los elementos del DOM se utiliza el método
prop :
● Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly…
su sintaxis es la siguiente para obtener el valor del atributo seleccionado
$(selector).prop(propiedad);
JQuery Propiedades
prop :
● y su sintaxis para asignar un valor a la propiedad seleccionada
/* Sintaxis por defecto */

$(selector).prop(propiedad, valor)
/* Modificar valor usando una funcion */

$(selector).prop(propiedad,function(index,valor))
/* Modificar multiples valores en otros tantos atributos */

$(selector).prop({propiedad1:valor1, propiedad2:valor2,...})
donde :
index : Posición del elemento en el DOM en caso de haber varios.
valor : Valor actual de la propiedad que asignaremos.
JQuery Propiedades
removeProp :
● su sintaxis es la siguiente para remover la propiedad seleccionada
$(selector).removeProp(propiedad);
Para evitar casos de confusión, attr() solo te dará el valor de atributos HTML y prop() te dará el valor de las propiedades
del DOM de Javascript para un elemento dado.
JQuery Recorrer el DOM
each :
● Su funcionalidad es la de recorrer los elementos de un mismo tipo y a su vez ejecutar una acción por cada uno de
ellos. Y al igual que una función si agregamos un return el each se detendrá.
Su sintaxis es la siguiente:
$(selector).each( function(){
console.log( $(this) );
} );
$(selector).each( function(index){
console.log(index);
} );
$(selector).each( function(index,element){
console.log(element);
} );
donde :
index : El número de ocurrencia del elemento, es decir, durante el recorrido de elementos el
número de elemento encontrado.
element : Elemento actual dentro del recuento/recorrido. Se puede usar $(this).
Actividad 9
1. Crear un html que muestre dentro una tabla para mostrar 6 preguntas que se contestan con falso o verdadero con
radiobutton. Generar las preguntas respuestas correctas mediante el formato json.
El botón calificar marcará las respuestas correctas y las incorrectas, el botón reintentar resetea la actividad.
Las preguntas deben revolverse con cada reintento
PREGUNTAS FALSO VERDADERO
Pregunta 1 [radiobutton] [radiobutton]
Pregunta 2 [radiobutton] [radiobutton]
Respuestas Correctas: N Calificar Reintentar
2. Crear un html que muestre una imagen ejemplo : <img src="fondo.jpg" width="800" height="600"
id="mifondo" />
pero quiero que imprima en consola el tamaño real de la imagen.
Nota: La imagen mostrada debe ser mayor a los 800x600.
JQuery Métodos de Utilidad
trim: Remueve los espacios en blanco de una cadena string
$.trim(“ Hola ”); //”Hola”
contains: Devuelve true o false si un elemento es descendiente de otro elemento

$.contains( document.documentElement, document.body ); //true
$.contains( document.body, document.documentElement ); // false
jQuery.data: Almacene los datos arbitrarios asociados con el elemento especificado y / o devuelva el valor
que se estableció.
jQuery.data( $( "div" )[ 0 ], "llave", "hola" ); // Escribe Hola asignado a los div
jQuery.data( $( "div" )[ 0 ], "llave" ); // Lee el Hola asignado a los div
jQuery.data( $( "span" )[ 0 ], "prueba", { // Escribir objeto asignado a span
uno: 23,
dos: "dato lo que sea"
});
jQuery.data( $( "span" )[ 0 ], "prueba").uno // Leer objeto asignado a span
jQuery.data( $( "span" )[ 0 ], "prueba").dos // Leer objeto asignado a span
jQuery.globalEval: Este método se comporta de manera diferente que un eval () normal de JavaScript este
se ejecuta en un contexto global (que es importante para cargar scripts externos dinámicamente).
jQuery.globalEval( "var newVar = true;" )
jQuery.grep: Encuentra los elementos de una matriz que satisfacen una función de filtro. La matriz original
no se ve afectada.
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
console.log(arr); //1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1
arr = jQuery.grep(arr, function( n, i ) {

return ( n !== 5 && i > 4 );
});
console.log( arr.join( ", " ) ); //1, 9, 4, 7, 3, 8, 6, 9, 1
arr = jQuery.grep(arr, function( a ) {

return a !== 9;
});
console.log( arr.join( ", " ) ); //1, 4, 7, 3, 8, 6, 1
jQuery.inArray: Busca un valor especificado dentro de una matriz y devuelve su índice (o -1 si no se
encuentra).
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray( "John", arr ); // 3
$.isArray: Determina si el argumento es un array.

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$.isArray(arr); //true
$.isWindow: Determina si el argumento es window.

$.isWindow( window ); // true
$.now: Método es una abreviatura para el número devuelto por la expresión (new Date).getTime().
$.now();
jQuery.type: Determina el tipo de objeto
jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"
jQuery.type( true ) === "boolean"
jQuery.type( new Boolean() ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( new Number(3) ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( new String("test") ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Array() ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( Symbol() ) === "symbol" // as of jQuery 1.9
jQuery.type( Object(Symbol()) ) === "symbol" // as of jQuery 1.12
jQuery.type( /test/ ) === "regexp"
jQuery.parseXML( data ): Convierte una cadena string en un objeto xml.
var str = "<dato><nombre>vlady</nombre><apellido>sanchez</apellido></dato>";
var xml = $.parseXML(str); // objeto xml
jQuery.parseHTML( data [, context ] [, keepScripts ] ): Convierte una cadena string en un objeto html.
● context : Elemento de documento que servirá como contexto en el que se creará el fragmento
HTML
● keepScript : Es un booleano que indica si se deben incluir scripts pasadas en la cadena HTML
var str = "hola, mi nombre es <b>vlady</b>.",

var html = $.parseHTML( str ) // objeto html
jQuery.isXMLDoc( node ): Determina si el argumento es objeto xml.

$.isXMLDoc( xml ); // true
jQuery.isEmptyObject( object ): Determina si un objeto está vacío.

$.isEmptyObject( {} ); // true
$.isEmptyObject( { foo: "bar" } ); // false
JQuery Eventos
● Navegador : Eventos relacionados con el navegador
○ resize: Al redimensionar la ventana
$(selector).resize( handler ) donde handler es una función de acción al redimensionar
$( window ).resize(); // Simular el redimensionado del navegador
$( window ).resize(function() {
//Acción al redimensionar
});
○ scroll : Al scrollear un elemento

$(selector).scroll( handler ) donde handler es una función de acción al scrollear
$( "#target" ).scroll(); // Simular scrollear el elemento
$( "#target" ).scroll(function() {
// Acciones al scrollear
});
JQuery Eventos
● Documento : Eventos relacionados con el documento
○ ready: Al cargar el documento y este listo
$( document ).ready(function() {
// Cuando se carga el documento y esta listo // depreciada en jquery 3
});
$(function() {
// Esta es la forma de usarse desde jquery 3
});
JQuery Eventos
● Elementos : Eventos relacionados con elementos del dom
○ blur: Detecta cuando un elemento ha perdido el foco
$(selector).blur( handler )
$(selector).blur() // perder el foco de un elemento
$(selector).blur(function(event){
// acciones al perder el foco de un elemento
// el parámetro event contiene toda la información del evento
})
○ change: se activa cuando el contenido de un campo de un formulario sufre una modificación o no está ya
seleccionado.
$(selector).change( handler )
$(selector).change() // simular el evento de cambio de un formulario
$(selector).change(function(event){
// acciones al cambiar algun dato de un formulario
});
JQuery Eventos
○ focus: se activa cuando el contenido de un campo de un formulario esta seleccionado o tiene el foco;
$(selector).focus( handler )
$(selector).focus() // simular el foco en un elemento de formulario
$(selector).focus(function(event){
// acciones al tener el foco en un elemento de formulario
});
○ select: se activa cuando el texto de un campo de un elemento del formulario está seleccionado;
$(selector).select( handler )
$(selector).select() // simular el seleccionar el texto en un elemento de formulario
$(selector).select(function(event){
// acciones al tener seleccionado el texto en un elemento de formulario
});
JQuery Eventos
○ val: Obtener el valor actual del primer elemento en el conjunto de elementos coincidentes o establecer el
valor de cada elemento coincidente.;
$(selector).val([valor a asignar])
$(selector).val() // obtener el valor del elemento de formulario
$(selector).val("hola") // asignar un valor al elemento del formulario

JQuery Eventos
● Teclado : Eventos relacionados con las pulsaciones del teclado
○ keydown: se activa cuando el selector recibe el evento de presionado de una tecla;
$(selector).keydown( handler )
$(selector).keydown() // simular el presionar una tecla
$(selector).keydown(function(event){
// acciones al presionar una tecla, el objeto event contiene la información
// de tecla presionada y muchos otros detalles
});
○ keyup: se activa cuando el selector recibe el evento de soltado de una tecla;

$(selector).keyup( handler )
$(selector).keyup() // simular el soltado una tecla
$(selector).keyup(function(event){
// acciones al soltar una tecla, el objeto event contiene la información
// de tecla soltada y muchos otros detalles
});
JQuery Eventos
● Teclado : Eventos relacionados con las pulsaciones del teclado
○ keypress: se activa cuando el selector recibe el evento de presionado y soltado de una tecla;
$(selector).keypress( handler )
$(selector).keypress() // simular el presionar y soltado de una tecla
$(selector).keypress(function(event){
// acciones al presionar y soltar una tecla, el objeto event contiene la información
// de tecla presionada y soltada con muchos otros detalles
});
Actividad 10
1.- Crear un html que muestre un combobox y al seleccionar un elemento se imprime en consola la opción
seleccionada.
2.- Evitar el uso de la tecla enter en textarea
3.- Al seleccionar el texto de un elemento textarea o input mostrar el texto seleccionado en consola
4.- Evitar que escriban una lista de palabras en un input o textarea

- raza
- negro
- chino
- asiatico
- judio
- musulman
- mexicano
5.- Validar que escriben un correo correctamente en un input
6.- Validar que escriben un nombre valido en un input

JQuery Eventos
● Mouse : Eventos relacionados con el mouse.
○ click: se activa cuando el selector recibe el evento de presionado y soltado del mouse.
$(selector).click( handler )
$(selector).click() // simular el presionar y soltado del mouse.
$(selector).click(function(event){
// acciones al presionar y soltar el mouse, el objeto event contiene la información
// del evento de presionado y soltado del mouse y muchos otros detalles
});
○ dblclick: se activa cuando el selector recibe el evento de presionado y soltado del mouse 2 veces seguidas.
$(selector).dblclick( handler )
$(selector).dblclick() // simular el presionar y soltado del mouse 2 veces seguidas.
$(selector).dblclick(function(event){
// acciones al presionar y soltar el mouse 2 veces seguidas, el objeto event contiene la información
// del evento de presionado y soltado del mouse 2 veces seguidas y muchos otros detalles
});
JQuery Eventos
○ mousedown: se activa cuando el selector recibe el evento de presionado sin soltar el mouse.
$(selector).mousedown( handler )
$(selector).mousedown() // simular el presionar sin soltar el mouse.
$(selector).mousedown(function(event){
// acciones al presionar sin soltar el mouse, el objeto event contiene la información
// del evento y muchos otros detalles
});
○ mouseup: se activa cuando el selector recibe el evento de soltar el presionado del mouse.
$(selector).mouseup( handler )
$(selector).mouseup() // simular el soltar el presionado del mouse.
$(selector).mouseup(function(event){
// acciones al soltar el presionado del mouse, el objeto event contiene la información
});
JQuery Eventos
○ mousemove: se activa cuando el selector recibe el evento del mouse en movimiento.

$(selector).mousemove( handler )
$(selector).mousemove() // simular el mouse en movimiento.
$(selector).mousemove(function(event){
// acciones al mover el mouse, el objeto event contiene la información
});
○ mouseover: se activa cuando el mouse esta posicionado encima del selector.

$(selector).mouseover( handler )
$(selector).mouseover() // simular que se coloca el mouse sobre el selector.
$(selector).mouseover(function(event){
// acciones al posicionar el mouse sobre el selector, el objeto event contiene la información
});
JQuery Eventos
○ mouseout: se activa cuando el mouse deja de estar posicionado encima del selector.
$(selector).mouseout( handler )
$(selector).mouseout() // simular que se coloca fuera el mouse sobre el selector.
$(selector).mouseout(function(event){
// acciones al posicionar el mouse fuera el selector, el objeto event contiene la información
});
JQuery Eventos
○ contextmenu: se activa cuando das click derecho con el mouse sobre el selector.
$(selector).contextmenu( handler )
$(selector).contextmenu() // simular que se presiona el click derecho del mouse sobre el selector.
$(selector).contextmenu(function(event){
// acciones al presionar el click derecho del mouse sobre el selector ,
//el objeto event contiene la información del evento y muchos otros detalles
});
○ mouseenter: se activa cuando te posicionas con el mouse sobre el selector.

$(selector).mouseenter( handler )
$(selector).mouseenter() // simular que te posicionas con el mouse sobre el selector.
$(selector).mouseenter(function(event){
// acciones posicionarse con el mouse sobre el selector ,
});
JQuery Eventos
○ mouseleave: se activa cuando dejas de estar posicionado con el mouse sobre el selector.
$(selector).mouseleave( handler )
$(selector).mouseleave() // simular que se deja de estar posicionado con mouse sobre el selector.
$(selector).mouseleave(function(event){
// acciones dejes de estar posicionado sobre el selector
});
JQuery Eventos
○ hover: este evento es una abreviacion de mouseenter y mouseleave.
$(selector).hover( handlerIn , handlerOut )
$(selector).hover(
function(event){
// acciones posicionarse con el mouse sobre el selector ,
},
function(event){
// acciones al dejar de posicionarse con el mouse sobre el selector ,
}
);
Para desactivarlo
$( selector ).off( "mouseenter mouseleave" );
JQuery Eventos
Todos los eventos de jquery tienen otra forma para activar ,lanzar o desactivar un evento.
- para activar un evento

$( selector ).on( "click",handler );
$( selector ).on( "mousemove",handler );
$( selector ).on( "contextmenu",handler );
$( selector ).on( "mouseenter mouseleave", handlerInOut );
- para lanzar un evento

$( selector ).trigger( "click" );
$( selector ).trigger( "mousemove" );
$( selector ).trigger( "contextmenu" );
$( selector ).trigger( "mouseenter mouseleave" );
- para desactivar un evento

$( selector ).off( "click" );
$( selector ).off( "mousemove" );
$( selector ).off( "contextmenu" );
$( selector ).off( "mouseenter mouseleave" );
Actividad 11
1.- Crear un html donde evites que se de click derecho.
2.- Crear un html con un div el cual cambie de color al posicionar el mouse encima
3.- Crear un pequeño menú desplegable de 5 cuadros darle toda la funcionalidad que lleva un menú
- hover cambiar de color al pasar el mouse encima
[ ... ]
- dejar de mostrarse al presionar una opción
[ opción 1 ]
- dejar de mostrarse al presionar fuera del menú
[ opción 2 ]
- dejar de mostrarse al pasar unos 4 segundos
[ opcion 3 ]
[ opción 4 ]
[ opción 5 ]
4.- Crear un html con un cuadro div que al darle doble click crezca al 200% y al darle un click regrese a su tamaño
5.- Crear 2 botones con acción de click , al presionar un botón debe desactivar evento click del otro boton
6.- Crear un html que simule el pintar con el mouse
7.- Crear un html donde arrastres varias imágenes dentro de un div cuadrito al soltar las imágenes deben ponerse
transparentes al 50%
JQuery Efectos
- Anímate: Realiza una animación personalizada del conjunto de propiedades CSS.
- Show: Muestra los elementos.
- Hide: Oculta los elementos.
- Toggle: Muestra u oculta elementos.
- Stop: Detiene la animación actualmente en ejecución de los elementos.
- Finish: Detiene la animación actualmente en ejecución, y elimina todas las animaciones en cola de los elementos
realizando el cambio final inmediatamente.
- Delay: Establece un temporizador para retrasar la ejecución de la animación de los elementos.
- Queue: Muestra o manipula la cola de funciones de animación a ejecutar en los elementos.
- ClearQueue: Elimina de la cola de animación todos los elementos que no se han ejecutado.
JQuery Efectos
- DeQueue: Ejecuta la siguiente función en la cola de animación de los elementos.
- jQuery.speed: Modifica la velocidad de las animacione de los elementos.
- jQuery.fx.off: Desactiva globalmente todas las aniamciones

JQuery Efectos - Animate http://easings.net/es
https://raw.githubusercontent.com/ai/easings.net/maste
r/vendor/jquery.easing.js
● Forma corta
$(selector).animate( propiedad css , [duracion] ,[ easing ],[ complete] );
❖ Propiedades css: Propiedad css como top, left, width, height, opacity, font-size, border, etc. Las propiedades
pueden usarse por ejemplo : "-=10" , "30%" , "2em" , "toggle" , .5, "10px"
❖ duración: La duración de la animación se mide en milisegundos, la duración por default es de 400
milisegundos. También puede manejar "slow" , "fast" que serian 600 y 200 milisegundos respectivamente.
❖ easing: Cadena string que indica la función de atenuación que debe utilizar la animación. Por default usa
swing. Los 3 valores posibles son ( "swing", "lineal" , "" );
❖ complete: function que se ejecuta una vez completada la animación
Ejemplo:
$( "div" ).animate(
{
left: "+=50", ← Propiedad css
height: "toggle" ← Propiedad css
},
5000, ← tiempo en milisegundos
function() { ← función que se ejecutará al finalizar la animación
// Animación completa.
}
);
JQuery Efectos - Animate
● Forma extendida
$(selector).animate( propiedad css , [opciones] );
- Propiedades css: Propiedad css como top, left, width, height, opacity, font-size, border, etc.
- opciones: Objeto que contiene las opciones como propiedades del objeto
● duration: Una cadena o número que determina cuánto tiempo se ejecutará la animación
● easing ( default: swing ): Indica la función de atenuación que se debe utilizar para la transición
● queue: Booleano que indica que se debe colocar la animación en la cola de efectos, si es falsa comenzara
inmediatamente.
● specialEasing: Objeto que contiene una o más de las propiedades CSS definidas por el argumento de propiedades y sus
correspondientes funciones de atenuación.
● step: Una función a ser llamada para cada propiedad animada en cada elemento animado. Esta función proporciona
una oportunidad para modificar el objeto Tween para cambiar el valor de las propiedades
● progress: Función a ser llamada después de cada paso de la animación solo una vez por elemento animado,
independientemente del número de propiedades animadas
● complete: Función a ser llamada una vez que la animación está completa
● start: Función que se llama cuando comienza la animación de un elemento
● done: Función que se llama cuando se completa la animación de un elemento ( su objeto promise se resuelve )
● fail: Función que se llama cuando la animación de un elemento no se completa ( su objeto promise es rechazado )
● always: Función que se llama cuando la animación de un elemento se completa o se detiene sin completar ( su objeto
promise es resuelto o rechazado).
https://api.jquery.com/animate/
Ejemplo 1:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://jeanvladimir.mydomain.com/lib/jquery-rotation.js"></script>
<style type="text/css">
div{
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>Vlady</div>
<script>
$( "div" ).animate(
{
left: "+=250",
rotation:"+=360"
}, {
duration: "slow" ,
complete: function(){
console.log("Fin de la animación");
$( this ).animate({height: "toggle"});
}
}
);
</script>
</body>
</html>
Ejemplo 2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
div{
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="uno">Vlady</div>
<div id="dos">sanchez</div>
<script>
$( "#uno" ).animate({left: "+=250"}).animate({width:"+=100"});
$( "#dos" ).animate({opacity: "-=.5",height:"+=100"});
</script>
</body>
</html>
Actividad 12 https://greensock.com/jquery
https://greensock.com/js/speed.html
1.- Crear un html con un div el cual cambie de tamaño al 100% width de la ventana ( si la ventana se redimensiona debe
realizar la animación nuevamente ) en velocidad 500 milisegundos.
2.- Crear un html con un div el cual se anime cambiando de tamaño de 100px x 100px desde el centro del navegador
hasta abarcar el 100% de alto y ancho del navegador de forma rápida.
3.- Crear un html se simule el efecto de tecleado de un párrafo.
4.- Crear una animación de 5 divs en secuencia al terminar de animarse un div se anima el siguiente y asi hasta
completar la animación de los 5 divs en velocidad slow.
5.- Crear una animación que involucre 3 divs y que estén animando en secuencia indefinidamente ( loop )
al menos 1 div debe estar girando.
JQuery Efectos - hide
● Forma corta
$(selector).hide([duracion] ,[ easing ],[ complete] );
Ejemplo:
$( "div" ).hide();
$( "div" ).hide(1000);
$( "div" ).hide(2000,function(){
console.log(“fin”);
});
JQuery Efectos - hide
● Forma extendida
$(selector).hide( [opciones] );
- opciones: Objeto que contiene las opciones como propiedades del objeto
● duration: Una cadena o número que determina cuánto tiempo se ejecutará la animación
● easing ( default: swing ): Indica la función de atenuación que se debe utilizar para la transición
● queue: Booleano que indica que se debe colocar la animación en la cola de efectos, si es falsa comenzara
inmediatamente.
● specialEasing: Objeto que contiene una o más de las propiedades CSS definidas por el argumento de propiedades y sus
correspondientes funciones de atenuación.
● step: Una función a ser llamada para cada propiedad animada en cada elemento animado. Esta función proporciona
una oportunidad para modificar el objeto Tween para cambiar el valor de las propiedades
● progress: Función a ser llamada después de cada paso de la animación solo una vez por elemento animado,
independientemente del número de propiedades animadas
● complete: Función a ser llamada una vez que la animación está completa
● start: Función que se llama cuando comienza la animación de un elemento
● done: Función que se llama cuando se completa la animación de un elemento ( su objeto promise se resuelve )
● fail: Función que se llama cuando la animación de un elemento no se completa ( su objeto promise es rechazado )
● always: Función que se llama cuando la animación de un elemento se completa o se detiene sin completar ( su objeto
promise es resuelto o rechazado).
JQuery Efectos - show
● Forma corta
$(selector).show([duracion] ,[ easing ],[ complete] );
Ejemplo:
$( "div" ).show();
$( "div" ).show(1000);
$( "div" ).show(2000,function(){
console.log(“fin”);
});
JQuery Efectos - hide show
<!doctype html>
<html>
<head>
<title>Ejemplo</title>
<style>
div{
padding: 200px;
width: 50px;
height: 50px;
background-color: red;
color:white;
}
</style>
<script>
$(function(){
$( "div" ).hide(1000);
setTimeout(function(){
$( "div" ).show(500);
},1000);
setTimeout(function(){
$( "div" ).hide(800);
},3000);
});
</script>
</head>
<body>
<div>Hola</div>
</body>
</html>
JQuery Efectos - toggle
● Forma corta
$(selector).toggle();
$(selector).toggle([duracion] ,[ easing ],[ complete] );
$(selector).toggle( [opciones] );
$(selector).toggle([display]);
● display (boolean): true muestra el elemento , false oculta el elemento
Ejemplo:
$( "div" ).toggle();
$( "div" ).toggle(1000);
$( "div" ).toggle(true);
$( "div" ).toggle(2000,function(){
console.log("fin");
});
$( "div" ).toggle(false);
JQuery Efectos - stop
● Forma corta
$(selector).stop();
$(selector).stop( [queue ] [,clearQueue ] [, jumpToEnd ] );
● queue (String): El nombre de la cola en la que se detienen las animaciones.

● clearQueue (boolean): Un booleano que indica si se debe quitar la animación en cola también. El valor
predeterminado es false.
● jumpToEnd (boolean): Un booleano que indica si se debe completar la animación actual inmediatamente. El valor
predeterminado es false.
Ejemplo:
$( "div" ).stop();
$( "div" ).stop(true);
$( "div" ).stop(true,true);
$( "div" ).stop("uno");
$( "div" ).stop("dos",true);
JQuery Efectos - finish
● Forma corta
$(selector).finish();
$(selector).finish( [queue ]);
● queue (String): El nombre de la cola en la que se detienen las animaciones. Valor predeterminado "fx"
Ejemplo:
$( "div" ).finish();
$( "div" ).finish("uno");
JQuery Efectos - delay
● Forma corta
$(selector).delay( duration [,queue ]);
● duration (Integer): Un número entero que indica el número de milisegundos para retrasar la ejecución del
siguiente elemento de la cola.
● queue (String): Cadena que contiene el nombre de la cola. De forma predeterminada a "fx", la cola de efectos
estándar.
Ejemplo:
$( "div" ).delay(1000);
$( "div" ).delay(2000,"uno");
JQuery Efectos - queue
● Forma corta
$(selector).queue( [ queue ]);
● queue (String): Cadena que contiene el nombre de la cola. De forma predeterminada a "fx", la cola de efectos
estándar.
Ejemplo:
$( "div" ).queue("uno");
JQuery Efectos - clearQueue
● Eliminar de la cola todos los elementos que aún no se han ejecutado.
$(selector).clearQueue( [queueName ] )
● queueName (String): Cadena que contiene el nombre de la cola. De forma predeterminada a "fx", la cola de
efectos estándar.
Ejemplo:
$( "div" ).clearQueue("uno");
JQuery Efectos - dequeue
● Ejecute la siguiente función en la cola de los elementos coincidentes.
$(selector).dequeue( [queueName ] )
● queueName (String): Cadena que contiene el nombre de la cola. De forma predeterminada a "fx", la cola de
efectos estándar.
Ejemplo:
$( "div" ).dequeue("uno");
JQuery Efectos - speed
● Crea un objeto que contiene un conjunto de propiedades listo para ser utilizado en la definición de animaciones
personalizadas.
jQuery.speed( [duration ] [, settings ] );

jQuery.speed( [duration ] [, easing ] [, complete ] )
jQuery.speed( settings )
● duration (Number): Una cadena o número que determina cuánto tiempo se ejecutará la animación.
● easing (String): Cadena que indica la función de atenuación que se debe utilizar para la transición. Valor
predeterminado "swing".
● settings (object):
○ easing (String): Cadena que indica la función de atenuación que se debe utilizar para la transición.
○ complete (function) : Una función para llamar una vez que la animación está completa.
Ejemplo:
$.speed(600, { complete: function(){
console.log( "fin cualquier animacion" );
} } );
$.fx.speeds._default = 3000; // variable tiempo default de animaciones

$.fx.speeds.vlady = 1200; // agregar una variable propia de velocidad
JQuery Efectos - jQuery.fx.off
● Crea un objeto que contiene un conjunto de propiedades listo para ser utilizado en la definición de animaciones
personalizadas.
jQuery.fx.off : variable boleana para activar o desactivar todas las animaciones de forma global.
Ejemplo:
$.fx.off=true;
$.fx.off = !$.fx.off;
JQuery.fx.off=false;
Actividad 13
1.- Crear un html donde se reprodusca una animación de width de un div desde 0 hasta 100% esta animación debe
tener los botones de play, stop, iralfinal , iralprincipio, espera para reproducir.
2.- Crear 3 botones extra al primer html 1er boton para relentizar todas las animaciones , 2do boton para acelerar
todas las animaciones y 3er para cancelar todas las animaciones
3.- Crear un html con un div que responda al evento del mouse de scrolleo para acelerar o desacelerar
4.- Crear un html con 5 animaciones y que puedan manipularse con los siguientes botones y su funcionalidad
stop, play, reset y finaliza
JQuery Ajax
¿Qué es AJAX?
AJAX es el arte de intercambiar datos con un servidor y actualizar partes de una página web, sin volver a cargar toda la página.
Las principales propiedades son :
method: Métodos de comunicación "GET", "POST"

url: Ruta url
dataType: Tipos de datos permitidos text, html, xml, json, jsonp, and script.
Los principales métodos desde JQuery 3.0 son:
● jqXHR.done(function( data, textStatus, jqXHR ) {});

Evento de completado satisfactorio
● jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

Evento de completado con error reemplaza el método obsoleto .error().
● jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });

Evento de completado con o sin error reemplaza el método .complete () en desuso.
En respuesta a una solicitud exitosa, los argumentos de la función son los mismos que los de .done (): data, textStatus y el objeto jqXHR.
Para las solicitudes fallidas, los argumentos son los mismos que los de .fail (): el objeto jqXHR, textStatus y errorThrown.
● jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
Incorpora la funcionalidad de los métodos .done () y .fail (), lo que permite manipular (a partir de jQuery 1.8) el Promise subyacente.
JQuery Ajax pedir php
<!doctype html>
<html>
<head>
<script>
$(function(){
var jqxhr = $.ajax( "https://jeanvladimir.mydomain.com/tec/time.php" )
.done(function(data,estatus,jqxhrobj) {
console.log( "done : " ,data,estatus,jqxhrobj);
$("div").html("done : data = " +data+", estatus = "+estatus);
})
.fail(function(jqxhrobj,estatus,errorThrown) {
console.log( "fail",jqxhrobj,estatus,errorThrown );
$("div").html("fail : jqxhrobj = " +jqxhrobj+", estatus = "+estatus+" errorThrown =
"+errorThrown);
})
.always(function(dataOJqxhrobj,estatus,jqxhrobjOError) {
console.log( "always " ,dataOJqxhrobj,estatus,jqxhrobjOError);
});
});
</script>
</head>
<body>
<div>Cargando...</div>
</body>
JQuery Ajax enviar php
<!doctype html>
<html>
<head>
<script>
$(function(){
var obj={name:"vladimir sanchez",text:"Agregado extra"};
$.ajax({
url:"https://jeanvladimir.mydomain.com/tec/nombre.php",
method:"get",
data:obj
})
.done(function(data){
$("div").html("done "+data);
})
.fail(function(data,estatus){
console.log("fail",data,estatus);
$("div").html("fail "+estatus);
});
});
</script>
</head>
<body>
</body>
JQuery Ajax xml
<!doctype html>
<html>
<head>
<script>
$(function(){
var jqxhr = $.ajax({
url:"datos.xml",
dataType:"xml",
crossDomain:true,
method:"GET"
})
//console.log( "done : " ,data,estatus,jqxhrobj);
$(data).find("item").children().each(function(){
console.log($(this).parent().parent()[0].nodeName," - ",$(this).parent()[0].id," - ",$(this)[0].tagName," =
",$(this).text());
});
$("div").html("done : data = " +data+", estatus = "+estatus);
})
console.log( "fail",jqxhrobj,estatus,errorThrown );
$("div").html("fail : jqxhrobj = " +jqxhrobj+", estatus = "+estatus+" errorThrown = "+errorThrown);
})
console.log( "always " ,dataOJqxhrobj,estatus,jqxhrobjOError);
});
});
</script>
</head>
<body>
</body>
</html>
https://jeanvladimir.mydomain.com/tec/datos.xml
JQuery Ajax json
<!doctype html>
<html>
<head>
<script>
$(function(){
var jqxhr = $.ajax({
url:"datos.json",
dataType:"text",
crossDomain:true,
method:"GET"
})
var obj=JSON.parse(data)
console.log(obj);
})
})
});
});
</script>
</head>
<body>
</body>
</html>
https://jeanvladimir.mydomain.com/tec/datos.json
JQuery Ajax métodos globales
Estos métodos registran los manejadores que se deben llamar cuando ocurren ciertos eventos, como inicialización o finalización, para cualquier solicitud de
Ajax en la página.
Los eventos globales se disparan en cada solicitud de Ajax si la propiedad global en jQuery.ajaxSetup () es verdadera, que es por defecto.
Nota: Los eventos globales nunca se activan para secuencias de comandos entre dominios o solicitudes JSONP, independientemente del valor de global.
● $.ajaxComplete();
Registra un controlador para que se llame cuando las solicitudes Ajax se completen.
● $.ajaxError();
Registra un controlador para que se llame cuando las solicitudes de Ajax se completen con un error.
● $.ajaxSend();
Adjunte una función para ser ejecutada antes de que se envíe una solicitud Ajax.
● $.ajaxStart();
Registra un controlador para ser llamado cuando comience la primera solicitud de Ajax.
● $.ajaxStop();
Registra un controlador para que se llame cuando se hayan completado todas las solicitudes de Ajax.
● $.ajaxSuccess();
Adjunte una función para ejecutar cada vez que una solicitud Ajax se complete con éxito.
JQuery Parsear xml
Los métodos que utiliza el parseo o recorrido de xml son los siguientes
- children() : Muestra los hijos internos

- nodeName: Muestra el nombre del nodo
- tagName: Muestra el nombre de la etiqueta
- text(): Muestra el contenido de la etiqueta
- parent() : Muestra el padre de una etiqueta u objeto
- find() : Busca en los elementos internos de un elemento
- each() : Recorre los elementos internos de un elemento
Actividad 14
● Crea un html que cargue la fecha actual de un servidor externo se bloquee al llegar a las
10:50 am del 31 / 10 / 2017
● Crear un html que lea una sección html de forma externa
● Crear un html que lea el archivo xml ejemplo y obtenga la segunda pregunta y sus
respuestas
● Crear un html que lea el json ejemplo y obtener las propiedades el valor de la variable
“revolver”
http://fenixwebserver.com/
JQuery UI
JqueryUI es una poderosa biblioteca Javascript construida sobre la biblioteca jQuery JavaScript. UI significa interfaz de usuario.
Es un conjunto de complementos para jQuery que agrega nuevas funcionalidades a la biblioteca central de jQuery.
El conjunto de complementos en JqueryUI incluye interacciones de interfaz, efectos, animaciones, widgets y temas creados en la biblioteca JavaScript de
jQuery.
Fue lanzado en septiembre de 2007, anunciado en una publicación de blog por John Resig en jquery.com.
Características
JqueryUI se clasifica en cuatro grupos, interacciones, widgets, efectos, utilidades.
La estructura de la biblioteca es como se muestra en la imagen a continuación:
JQuery UI
● Interacciones: estos son los complementos interactivos, como arrastrar, soltar, cambiar el tamaño y más, que le dan al usuario la capacidad de
interactuar con elementos DOM.
● Widgets: al utilizar widgets que son complementos jQuery, puede crear elementos de interfaz de usuario como accordion, datepicker, etc.
● Efectos: estos se basan en los efectos jQuery internos. Contienen un conjunto completo de animaciones y transiciones personalizadas para elementos
DOM.
● Utilidades: son un conjunto de herramientas modulares que la biblioteca JqueryUI utiliza internamente.
Beneficios de JqueryUI
Los siguientes son algunos de los beneficios de Jquery UI:
● API Coherentes y consistentes.

● Soporte integral del navegador.
● Código abierto y de uso gratuito.
● Buena documentación.
● Potente mecanismo de tematización.
● Estable y mantenimiento amistoso.
JQuery UI instalación
La pagina para descargarse las versiones o editar el estilo de los complementos es
https://jqueryui.com/
Para estos ejemplos usaremos la versión base con los colores base
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
obligatoria la version de jquery compatible

https://code.jquery.com/jquery-3.2.1.min.js
//EJEMPLO 1:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type = "text/javascript">
$(function () {
$('#dialogMsg').dialog();
});
</script>
</head>
<body>
<form id = "form1" runat = "server">
<div id = "dialogMsg" title = "Mi primer mensaje">
Hola este es mi mensaje para JQueryUI.
</div>
</form>
</body>
</html>
JQuery UI Acordeón
El método accordion() se puede usar en dos formas
$(selector).accordion (options);
$(selector).accordion ("action", params);
El método accordion(opciones) declara que un elemento HTML y sus contenidos deben tratarse y administrarse
como menús de acordeón.
● options: es un objeto que especifica la apariencia y el comportamiento del menú involucrado.
$(selector).accordion(options);
Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción que
proporcionar, entonces las separarás usando una coma de la siguiente manera
$(selector).accordion({option1: value1, option2: value2..... });

JQuery UI Acordeón
# Option y Descripción
active
1
Indica el índice del menú que está abierto cuando se accede por primera vez a la página. Por defecto, su valor es 0, es decir, el primer menú.
animate
2
Esta opción se utiliza para configurar cómo animar paneles cambiantes. Por defecto, su valor es {}.
collapsible
3 Esta opción cuando se establece en verdadero, permite a los usuarios cerrar un menú haciendo clic en él. De forma predeterminada, los clics en el encabezado del
panel abierto no tienen efecto. Por defecto su valor es falso.
disabled
4 Esta opción cuando se establece en verdadero desactiva el acordeón. Por defecto su valor es falso.
event
5
Esta opción especifica el evento utilizado para seleccionar un encabezado de acordeón. Por defecto su valor es click.
header
6 Esta opción especifica un selector o elemento para anular el patrón predeterminado para identificar los elementos del encabezado. Por defecto, su valor es> li>:
first-child,>: not (li): par.
heightStyle
7
Esta opción se usa para controlar la altura del acordeón y los paneles. Por defecto, su valor es automático.
icons
Esta opción es un objeto que define los íconos a usar a la izquierda del texto del encabezado para paneles abiertos y cerrados. El icono que se utilizará para los
8
paneles cerrados se especifica como una propiedad denominada encabezado, mientras que el icono que se utiliza para los paneles abiertos se especifica como
una propiedad denominada headerSelected. Por defecto, su valor es {"encabezado": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s"}.
JQuery UI Acordeón
# Acción y Descripción
destroy
1
Esta acción destruye por completo la funcionalidad de acordeón de un elemento. Los elementos vuelven a su estado previo al inicio.
disable
2
Esta acción desactiva todos los menús. No se tendrá en cuenta ningún clic. Este método no acepta ningún argumento.
enable
3
Esta acción reactiva todos los menús. Los clics se consideran nuevamente. Este método no acepta ningún argumento.
option( optionName )
4 Esta acción obtiene el valor del elemento de acordeón actualmente asociado con el optionName especificado. Esto toma un valor de cadena como argumento.
option
5
Esta acción obtiene un objeto que contiene pares de clave / valor que representan el hash de opciones de acordeón actual.
option( optionName, value )

6
Esta acción establece el valor de la opción de acordeón asociada con el optionName especificado.
option( options )
7
Esta acción establece una o más opciones para el acordeón.
refresh
8 Esta acción procesa los encabezados y paneles que se agregaron o eliminaron directamente en el DOM. Luego vuelve a calcular la altura de los paneles de
acordeón. Los resultados dependen del contenido y de la opción heightStyle. Este método no acepta ningún argumento.
widget
9
Esta acción devuelve el elemento del widget de acordeón; el anotado con el nombre de la clase ui-acordeón.
<!doctype html>
<html lang = "en">
<head>
JQuery UI Acordeón <meta charset = "utf-8">

<title>jQuery UI Accordion </title>
<script>
$(function() {
$( "#accordion-6" ).accordion({
Gestión de eventos en elementos de acordeón create: function (event, ui) {
$("span#result").html ($("span#result").html () +
JqueryUI proporciona métodos de eventos que se activan para un evento en particular. },

"<b>Created</b><br>");
beforeActivate : function (event, ui) {

", <b>beforeActivate</b><br>");
},
# Método y descripción del evento

activate: function (event, ui) {
"<b>activate</b><br>");
activate(event, ui) }
});
Este evento se activa cuando se activa un menú. Este evento solo se activa en la });
1 </script>
activación del panel, no se activa para el panel inicial cuando se crea el widget de <style>
#accordion-6{font-size: 14px;}
acordeón. </style>
</head>
<body>
beforeActivate(event, ui) <div id = "accordion-6">
<h3>Tab 1</h3>
<div>
2 Este evento se desencadena antes de que se active un panel. Este evento se puede <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
cancelar para evitar que el panel se active. </p>
commodo consequat.
</div>
<h3>Tab 2</h3>
create(event, ui) <div>
3 <p>
Este evento se desencadena cuando se crea el acordeón. sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
sed do eiusmod tempor incididunt ut labore et dolore
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>
<!doctype html>
<html lang = "en">
<head>
JQuery UI Acordeón <meta charset = "utf-8">

<title>jQuery UI Accordion </title>
<script>
$(function() {
Ejemplo de option $( "#accordion-1" ).accordion({

heightStyle: "content"
});
$("#b1").click(function(){
Ejemplo de activar y desactivar $("#accordion-1").accordion("option", "disabled", true);
});
$("#accordion-1").accordion("option", "disabled", false);
Ejemplo de eliminar });

$("#accordion-1").accordion("destroy");
});
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
</p>
</div>
</div>
<button id="b1">Desactivar</button>
<button id="b2">Activar</button>
<button id="b3">Eliminar</button>
</body>
</html>
JQuery UI Dialog
Los cuadros de diálogo son una de las buenas maneras de presentar información en una página HTML. Un cuadro de diálogo es una ventana
flotante con un título y un área de contenido. Esta ventana se puede mover, redimensionar y, por supuesto, cerrar utilizando el icono "X" de forma
predeterminada.
jQueryUI proporciona el método de diálogo () que transforma el código HTML escrito en la página en código HTML para mostrar un cuadro de
diálogo.
El método de diálogo () se puede usar de dos formas:
$ (selector).dialog (options);
$ (selector).dialog ("acción", [params]);
El método de dialog(options) declara que un elemento HTML se puede administrar en forma de cuadro de diálogo.
- - options: es un objeto que especifica la apariencia y el comportamiento de esa ventana.
$ (selector).dialog (options);
Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript.

Si hay más de una opción que proporcionar, entonces las separarás usando una coma de la siguiente manera:
$ (selector).dialog ({option1: value1, option2: value2 .....});

JQuery UI Dialog
# Opción y descripción
appendTo
1 Si esta opción se configura como falsa, evitará que la clase ui-draggable se agregue a la lista de elementos DOM seleccionados. Por defecto, su valor es
verdadero.
autoOpen
2 Esta opción a menos que se establezca en falso, el cuadro de diálogo se abre al momento de la creación. Cuando es falso, el cuadro de diálogo se abrirá al llamar
al diálogo ('abrir'). Por defecto, su valor es verdadero.
buttons
3 Esta opción agrega botones en el cuadro de diálogo. Estos se enumeran como objetos, y cada propiedad es el texto en el botón. El valor es una función de
devolución de llamada que se llama cuando el usuario hace clic en el botón. Por defecto, su valor es {}.
closeOnEscape
4 A menos que esta opción se establezca en falso, el cuadro de diálogo se cerrará cuando el usuario presione la tecla Escape mientras el cuadro de diálogo tiene
foco. Por defecto, su valor es verdadero.
closeText
5
Esta opción contiene texto para reemplazar el valor predeterminado de Cerrar para el botón Cerrar. Por defecto, su valor es "cerrar".
dialogClass
6
Si esta opción se configura como falsa, evitará que la clase ui-draggable se agregue a la lista de elementos DOM seleccionados. Por defecto, su valor es "".
draggable
7 A menos que tenga esta opción como falso, el cuadro de diálogo se puede arrastrar haciendo clic y arrastrando la barra de título. Por defecto, su valor es
verdadero.
JQuery UI Dialog
height
8
Esta opción establece la altura del cuadro de diálogo. Por defecto, su valor es "auto".
hide
9
Esta opción se utiliza para establecer el efecto que se utilizará cuando se cierre el cuadro de diálogo. Por defecto su valor es nulo.
maxHeight
10
Esta opción establece la altura máxima, en píxeles, a la que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor es falso.
maxWidth
11
Esta opción establece el ancho máximo al que se puede cambiar el tamaño del cuadro de diálogo, en píxeles. Por defecto su valor es falso.
minHeight
12
Esta opción es la altura mínima, en píxeles, a la que se puede cambiar el tamaño del cuadro de diálogo. Por defecto su valor es 150.
minWidth
13
Esta opción es el ancho mínimo, en píxeles, para cambiar el tamaño del cuadro de diálogo. Por defecto su valor es 150.
modal
14 Si esta opción se establece en verdadero, el diálogo tendrá un comportamiento modal; otros elementos en la página se desactivarán, es decir, no se podrán
interactuar. Los diálogos modales crean una superposición debajo del diálogo pero encima de otros elementos de la página. Por defecto su valor es falso.
position
Esta opción especifica la posición inicial del cuadro de diálogo. Puede ser una de las posiciones predefinidas: centro (predeterminado), izquierda, derecha, arriba o
15
abajo. También puede ser una matriz de 2 elementos con los valores izquierdo y superior (en píxeles) como [izquierda, arriba], o posiciones de texto como
['derecha', 'arriba']. Por defecto, su valor es {mi: "centro", en: "centro", de: ventana}.
<!doctype html>
JQuery UI Dialog <html lang = "en">

<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
# Opción y descripción <style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
resizable border: 1px solid #b9cd6d;
16 Esta opción a menos que se establezca en falso, el cuadro de diálogo se puede color: #FFFFFF;
font-weight: bold;
cambiar de tamaño en todas las direcciones. Por defecto, su valor es verdadero. }
</style>
show <script>
$(function() {
17 Esta opción es un efecto que se utilizará cuando se abre el cuadro de diálogo. $( "#dialog-1" ).dialog({
Por defecto su valor es nulo. autoOpen: false,
});
$( "#opener" ).click(function() {
title $( "#dialog-1" ).dialog( "open" );
18 Esta opción especifica el texto que aparecerá en la barra de título del cuadro de });
diálogo. Por defecto su valor es nulo. });
</script>
</head>
width <body>
19 Esta opción especifica el ancho del cuadro de diálogo en píxeles. Por defecto su <div id = "dialog-1"
title = "Titulo de mi dialogo...">Este es mi texto del dialogo</div>
valor es 300. <button id = "opener">Abrir Dialogo</button>
</body>
</html>
JQuery UI Dialog
# Acción y descripción <!doctype html>
<html lang = "en">
<head>
close() <meta charset = "utf-8">
1
Esta acción cierra el cuadro de diálogo. Este método no acepta ningún argumento. <title>jQuery UI Dialog functionality</title>
<link
href="https://code.jquery.com/ui/1.12.1/themes/base/jq
destroy()
uery-ui.css" rel="stylesheet">
2 Esta acción elimina el cuadro de diálogo por completo. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta ningún
<script src="https://code.jquery.com/jquery-
argumento. 3.2.1.min.js"></script>
<script
isOpen() src="https://code.jquery.com/ui/1.12.1/jquery-
3 ui.min.js"></script>
Esta acción verifica si el cuadro de diálogo está abierto. Este método no acepta ningún argumento.
<style>
moveToTop() background:#b9cd6d;
4
Esta acción coloca los cuadros de diálogo correspondientes en primer plano (encima de los demás). Este método no acepta ningún argumento. border: 1px solid #b9cd6d;
color: #FFFFFF;
open() font-weight: bold;
5 }
Esta acción abre el cuadro de diálogo. Este método no acepta ningún argumento.
</style>
<script type = "text/javascript">
option( optionName ) $(function() {
6
Esta acción obtiene el valor actualmente asociado con el optionName especificado. Donde optionName es el nombre de la opción para obtener. $("#toggle").click(function() {
($("#dialog-5").dialog("isOpen") == false) ? $(
option() "#dialog-5").dialog("open") : $("#dialog-
5").dialog("close") ;
7 Esta acción obtiene un objeto que contiene pares de clave / valor que representan el hash de opciones de diálogo actual. Este método no
});
acepta ningún argumento.
$("#dialog-5").dialog({autoOpen: false});
});
option( optionName, value ) </script>
8
Esta acción establece el valor de la opción de diálogo asociada con el optionName especificado. </head>
<body>
<button id = "toggle">Toggle dialog!</button>
option( options )
9 <div id = "dialog-5" title = "Dialog Title!">
Esta acción establece una o más opciones para el diálogo. Click on the Toggle button to open and close this
dialog box.
widget() </div>
10 Esta acción devuelve el elemento del widget del cuadro de diálogo; el elemento anotado con el nombre de la clase ui-dialog. Este método no </body>
acepta ningún argumento. </html>
JQuery UI Dialog
<!doctype html>
# Método y descripción del evento <html lang = "en">
<head>
<title>jQuery UI Dialog functionality</title>
beforeClose(event, ui) <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet">
1 Este evento se desencadena cuando el cuadro de diálogo está a punto de cerrarse. Devolver falso evita que se cierre el cuadro de diálogo. Es útil para <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
cuadros de diálogo con formularios que no validan. Donde evento es de tipo Evento, y ui es de tipo Objeto. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
background:#b9cd6d;
close(event, ui) border: 1px solid #b9cd6d;
2 color: #FFFFFF;
Este evento se desencadena cuando el cuadro de diálogo está cerrado. Donde evento es de tipo Evento, y ui es de tipo Objeto. font-weight: bold;
}
.invalid { color: red; }
create(event, ui) textarea {
3 display: inline-block;
Este evento se desencadena cuando se crea el cuadro de diálogo. Donde evento es de tipo Evento, y ui es de tipo Objeto. width: 100%;
margin-bottom: 10px;
}
drag(event, ui) </style>
4 Este evento se desencadena repetidamente a medida que se mueve un cuadro de diálogo durante un arrastre. Donde evento es de tipo Evento, y ui es de <script type = "text/javascript">
$(function() {
tipo Objeto. $( "#dialog-6" ).dialog({
autoOpen: false,
buttons: {
dragStart(event, ui) OK: function() {
$( this ).dialog( "close" );
5 Este evento se desencadena cuando comienza un reposicionamiento del cuadro de diálogo arrastrando su barra de título. Donde evento es de tipo Evento, y }
ui es de tipo Objeto. },
beforeClose: function( event, ui ) {
if ( !$( "#terms" ).prop( "checked" ) ) {
event.preventDefault();
dragStop(event, ui) $( "[for = terms]" ).addClass( "invalid" );
6 }
Este evento se desencadena cuando termina una operación de arrastre. Donde evento es de tipo Evento, y ui es de tipo Objeto. },
width: 600
});
focus(event, ui) $( "#opener-5" ).click(function() {
7 $( "#dialog-6" ).dialog( "open" );
Este evento se desencadena cuando el diálogo gana enfoque. Donde evento es de tipo Evento, y ui es de tipo Objeto. });
});
</script>
open(event, ui) </head>
8 <body>
Este evento se desencadena cuando se abre el cuadro de diálogo. Donde evento es de tipo Evento, y ui es de tipo Objeto. <div id = "dialog-6">
<p>You must accept these terms before continuing.</p>
<textarea>This Agreement and the Request constitute the entire agreement of the
resize(event, ui) parties with respect to the subject matter of the Request. This Agreement shall be
9 Este evento se desencadena repetidamente a medida que se cambia el tamaño de un cuadro de diálogo. Donde evento es de tipo Evento, y ui es de tipo governed by and construed in accordance with the laws of the State, without giving
effect to principles of conflicts of law.</textarea>
Objeto. <div>
<label for = "terms">I accept the terms</label>
<input type = "checkbox" id = "terms">
resizeStart(event, ui) </div>
10 </div>
Este evento se desencadena cuando comienza el cambio de tamaño del cuadro de diálogo. Donde evento es de tipo Evento, y ui es de tipo Objeto. <button id = "opener-5">Open Dialog</button>
</body>
</html>
resizeStop(event, ui)
11
Este evento se desencadena cuando termina el cambio de tamaño del cuadro de diálogo. Donde evento es de tipo Evento, y ui es de tipo Objeto.
Actividad 15
● Crear un html que contenga un acordeón que abra un tab distinto cada segundo
1,2,3,1,2… etc.
● Crear un html que contenga un acordeón que al abrirse aparesca una un diálogo que diga
cual acordeon desplegaste.
● Crear un html que tenga un acordeón y un boton para agregar más elementos al
acordeón.
● Crear un html que tenga un diálogo que aparesca y desaparesca con botones externos.
JQuery UI Tabs
Las pestañas son conjuntos de contenido lógicamente agrupados que nos permiten cambiar rápidamente entre ellos. Las pestañas nos permiten
ahorrar espacio como acordeones. Para que las pestañas funcionen correctamente después del conjunto de marcas, debe usar:
Las pestañas deben estar en una lista ordenadas (<ol>) o desordenadas (<ul>).
Cada título de pestaña debe estar dentro de cada etiqueta <li> y envuelto por anclaje (<a>) con un atributo href.
Cada panel de pestañas puede ser cualquier elemento válido, pero debe tener un ID, que corresponde al hash en el ancla de la pestaña asociada.
El método de tabs() se puede usar de dos formas:
$ (selector).tabs (options);
$ (selector).tabs ("acción", [params]);
El método de tabs(options) declara que un elemento HTML y su contenido se deben administrar como pestañas.
- - options: es un objeto que especifica la apariencia y el comportamiento de las pestañas.
$ (selector).tabs (options);
Puede proporcionar una o más opciones a la vez usando el objeto JavaScript. Si hay más de una opción que proporcionar, entonces las separarás
usando una coma de la siguiente manera:
$ (selector).tabs ({option1: value1, option2: value2 .....});

<!doctype html>
<html lang = "en">
JQuery UI Tabs <head>

<title>jQuery UI Tabs functionality</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.cs
rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
La siguiente tabla enumera las diferentes opciones que se pueden usar con este método <script>
$(function() {
$( "#tabs-1" ).tabs();
});
</script>
<style>
#tabs-1{font-size: 14px;}
.ui-widget-header {
# Opción y descripción background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
1 active Esta opción especifica la pestaña / panel activo actual. Por defecto su valor es 0. }
</style>
</head>
<body>
2 collapsible Esta opción establecida en verdadero, permite que las pestañas se deseleccionen. Cuando se establece en <div id = "tabs-1">
<ul>
<li><a href = "#tabs-2">Tab 1</a></li>
falso (valor predeterminado), al hacer clic en una pestaña seleccionada no se anula la selección (permanece <li><a href = "#tabs-3">Tab 2</a></li>
seleccionada). Por defecto su valor es falso. </ul>

<div id = "tabs-2">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit...
3 disabled Esta opción utiliza una matriz para indicar pestañas de índice que están deshabilitadas (y, por lo tanto, no se </p>
</div>
<div id = "tabs-3">
pueden seleccionar). Por ejemplo, use [0, 1] para desactivar las dos primeras pestañas. Por defecto su valor es falso. <p>
sed do eiusmod tempor incididunt ut labore et dolore magna aliq
Ut enim ad minim veniam, quis nostrud exercitation ullamco labo
4 event Esta opción es un nombre del evento que permite a los usuarios seleccionar una nueva pestaña. Si, por nisi ut aliquip ex ea commodo consequat.
</p>
</div>
ejemplo, esta opción está configurada como "mouseover", pasar el mouse sobre una pestaña lo seleccionará. Por <div id = "tabs-4">
<p>
ed ut perspiciatis unde omnis iste natus error sit
defecto, su valor es "hacer clic". voluptatem accusantium doloremque laudantium, totam rem ape
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
5 heightStyle Esta opción controla el alto del widget de pestañas y cada panel. Por defecto, su valor es "contenido". <p>
nisi ut aliquip ex ea commodo consequat.
6 hide Esta opción especifica cómo animar la ocultación del panel. Por defecto su valor es nulo. </p>
</div>
</div>
</body>
</html>
7 show Esta opción especifica cómo animar la muestra del panel. Por defecto su valor es nulo.
<!doctype html>
<html lang = "en">

<link
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="st
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
La siguiente tabla enumera las diferentes acciones que se pueden usar con este método <script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
# Acción y descripción $( "#tabs-13" ).tabs();
$( "#tabs-13" ).tabs("disable");
});
</script>
1 destroy Esta acción destruye por completo la funcionalidad de pestañas de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no
<style>
acepta ningún argumento. #tabs-13{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
2 disable Esta acción desactiva todas las pestañas. Este método no acepta ningún argumento. color: #FFFFFF;
font-weight: bold;
}
</style>
3 disable( index ) Esta acción desactiva la pestaña especificada. Donde índice es la pestaña a ser deshabilitada. </head>
<body>
<div id = "tabs-13">
4 enable Esta acción activa todas las pestañas. Esta firma no acepta ningún argumento. <ul>
5 enable( index ) Esta acción activa una pestaña especificada. Donde índice es la pestaña que se habilitará. </ul>
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
6 load( index ) Esta acción fuerza una recarga de la pestaña indexada, ignorando la caché. Donde índice es la pestaña para cargar. sit amet, consectetur, adipisci velit...
</p>
</div>
7 option( optionName ) Esta acción obtiene el valor actualmente asociado con el optionName especificado. <p>
8 option Esta acción obtiene un objeto que contiene pares de clave / valor que representan el hash de las pestañas actuales. laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
9 option( optionName, value ) Esta acción establece el valor de la opción de pestañas asociada con el optionName especificado. El argumento optionName es el <p>
ed ut perspiciatis unde omnis iste natus error sit
nombre de la opción que se establecerá y el valor es el valor que se establecerá para la opción. voluptatem accusantium doloremque laudantium, totam rem ape
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
10 option( options ) Esta acción establece una o más opciones en las pestañas. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
11 refresh Esta acción vuelve a calcular el alto de los paneles de pestañas cuando se agregan o eliminan pestañas directamente en el DOM. Los resultados nisi ut aliquip ex ea commodo consequat.
</p>
dependen del contenido y de la opción heightStyle. </div>
</div>
</body>
</html>
12 widget Esta acción devuelve el elemento que sirve como el widget de pestañas, anotado con el nombre de la clase ui-tabs.
<!doctype html>
<html lang = "en">

<link
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="st
Además del método de tabs(opciones) que vimos en las secciones anteriores, JqueryUI ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/j
proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de <script>
$(function() {
eventos se enumeran a continuación $( "#tabs-21" ).tabs({
activate: function( event, ui ) {
var result = $( "#result-2" ).empty();
result.append( "activated" );
},
create: function( event, ui ) {
var result = $( "#result-1" ).empty();
result.append( "created" );
}
# Método y descripción del evento });
});
</script>
<style>
1 activate(event, ui) Este evento se activa después de que la pestaña se haya activado (después de la #tabs-21{font-size: 14px;}
.ui-widget-header {
finalización de la animación). background:#b9cd6d;

color: #FFFFFF;
font-weight: bold;
}
2 beforeActivate(event, ui) Este evento se desencadena antes de que se haya activado la pestaña. .resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
3 beforeLoad(event, ui) Este evento se desencadena cuando está a punto de cargarse una pestaña }
font-size:14px;
remota, después del evento beforeActivate. Este evento se desencadena justo antes de que se realice la </style>
</head>
solicitud de Ajax. <body>

<ul>
4 create(event, ui) Este evento se activa cuando se crean pestañas. <li><a href = "#tabs-24">Tab 3</a></li>
</ul>
<p>
5 load(event, ui) Este evento se activa después de que se haya cargado una pestaña remota. Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<p>
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
JQuery UI Tooltip
El widget Tooltip de jQueryUI reemplaza las sugerencias de herramientas nativas. Este widget agrega nuevos temas y permite la
personalización. Primero, déjenos entender qué son los tooltips? La información sobre herramientas se puede adjuntar a cualquier elemento.
Para mostrar información sobre herramientas, simplemente agregue el atributo de título a los elementos de entrada y el valor del atributo de
título se usará como información sobre herramientas. Cuando desplaza el elemento con el mouse, el atributo de título se muestra en una
pequeña casilla al lado del elemento.
jQueryUI proporciona el método tooltip () para agregar información sobre herramientas a cualquier elemento en el que desee que se muestre
información sobre herramientas. Esto da una animación de fundido por defecto para mostrar y ocultar la información sobre herramientas, en
comparación con solo alternar la visibilidad.
El método de tooltip() se puede usar de dos formas:
$ (selector).tooltip (options);
$ (selector).tooltip ("acción", [params]);
El método de tooltip(options) declara que se puede agregar un tooltip a un elemento HTML.

- - options: es un objeto que especifica el comportamiento y la apariencia del tooltip.
$ (selector).tooltip (options);
Puede proporcionar una o más opciones a la vez usando el objeto JavaScript. Si hay más de una opción que proporcionar, entonces las
separarás usando una coma de la siguiente manera:
$ (selector).tooltip ({option1: value1, option2: value2 .....});

JQuery UI Tooltip
La siguiente tabla enumera las diferentes opciones que se pueden usar con este método
<!doctype html>
# Opción y descripción <html lang = "en">
<head>
1 content Esta opción representa el contenido de una información sobre herramientas. Por defecto, su valor es función que <title>jQuery UI Tooltip functionality</title>
<link
devuelve el atributo de título. href="https://code.jquery.com/ui/1.12.1/themes/base/jqu
ery-ui.css" rel="stylesheet">
2 disabled Esta opción cuando se establece en verdadero desactiva la información sobre herramientas. Por defecto su valor es 3.2.1.min.js"></script>
falso. <script
src="https://code.jquery.com/ui/1.12.1/jquery-
ui.min.js"></script>
3 hide Esta opción representa el efecto de animación cuando se oculta la información sobre herramientas. Por defecto, su valor 
es verdadero. <script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
4 items Esta opción indica qué elementos pueden mostrar tooltip. Por defecto, su valor es [title]. });
</script>
</head>
5 position Esta opción decide la posición de la información sobre herramientas w.r.t el elemento de destino asociado. Por
<body>
defecto, su valor es función que devuelve el atributo de título. Los valores posibles son: my, at, of, collision, using, within. 
<label for = "name">Name:</label>
<input id = "tooltip-1" title = "Enter You name">
6 show Esta opción representa cómo animar la muestra de información sobre herramientas. Por defecto, su valor es true. <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
I also have a tooltip</a></p>
</body>
7 tooltipClass Esta opción es una clase que se puede agregar al widget de información sobre herramientas para información </html>
sobre herramientas como advertencias o errores. Por defecto su valor es null.
8 track Esta opción cuando se establece en verdadero, la información sobre herramientas sigue / rastrea el mouse. Por defecto su
valor es false.
JQuery UI Tooltip
La siguiente tabla enumera las acciones para este método
# Acción y descripción <!doctype html>

<html lang = "en">
<head>
1 close() Esta acción cierra la información sobre herramientas. Este método no acepta ningún argumento. <meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link
href="https://code.jquery.com/ui/1.12.1/themes/bas
2 destroy() Esta acción elimina por completo la funcionalidad de información sobre herramientas. Esto devolverá el e/jquery-ui.css" rel="stylesheet">
elemento a su estado previo al inicio. Este método no acepta ningún argumento. <script src="https://code.jquery.com/jquery-
<script
3 disable() Esta acción desactiva la información sobre herramientas. Este método no acepta ningún argumento. src="https://code.jquery.com/ui/1.12.1/jquery-
4 enable() Esta acción activa la información sobre herramientas. Este método no acepta ningún argumento. 
<script>
$(function() {
$("#tooltip-8").tooltip({
5 open() Esta acción abre programáticamente la información sobre herramientas. Este método no acepta ningún //use 'of' to link the tooltip to your
argumento. specified input
position: { of: '#myInput', my: 'left center',
at: 'left center' },
6 option( optionName ) Esta acción obtiene el valor asociado con optionName para la información sobre herramientas. }),
$('#myBtn').click(function () {
Este método no acepta ningún argumento. $('#tooltip-8').tooltip("open");
});
});
7 option() Esta acción obtiene un objeto que contiene pares de clave / valor que representa el hash de opciones de </script>
información sobre herramientas actual. Este método no acepta ningún argumento. </head>
<body style = "padding:100px;">

8 option( optionName, value ) Esta acción establece el valor de la opción de información sobre herramientas asociada 
<a id = "tooltip-8" title = "Message" href =
con el optionName especificado. "#"></a>
<input id = "myInput" type = "text" name =
"myInput" value = "0" size = "7" />
9 option( options ) Esta acción establece una o más opciones para la información sobre herramientas. <input id = "myBtn" type = "submit" name =
"myBtn" value = "myBtn" class = "myBtn" />
</body>
10 widget() Esta acción devuelve un objeto jQuery que contiene el elemento original. Este método no acepta ningún </html>
argumento. Regresa ui-tooltip

JQuery UI Tooltip <!doctype html>
<html lang = "en">
<head>
Además del método de tooltip(options) que vimos en las secciones anteriores, JqueryUI proporciona métodos <meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a <link
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-
continuación ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-
# Método y descripción del evento 

<script>
$(function() {
$('.tooltip-9').tooltip({
1 create(event, ui) items: 'a.tooltip-9',
content: 'Hello welcome…',
Se activa cuando se crea la información sobre herramientas. Donde evento es de tipo Evento, y ui es de tipo show: "slideDown", // show immediately
open: function(event, ui) {
Objeto. ui.tooltip.hover(
function () {
$(this).fadeTo("slow", 0.5);
});
}
2 close(event, ui) });
Se activa cuando se cierra la información sobre herramientas. Por lo general, se desencadena en el enfoque o });
$(function() {
mouseleave. Donde evento es de tipo Evento, y ui es de tipo Objeto. $('.tooltip-10').tooltip({
items: 'a.tooltip-10',
content: 'Welcome to TutorialsPoint…',
show: "fold",
close: function(event, ui) {
3 open(event, ui) ui.tooltip.hover(function() {
$(this).stop(true).fadeTo(500, 1);
Se activa cuando se muestra o se muestra la información sobre herramientas. Por lo general, se activa en },
function() {
focusin o mouseover. Donde evento es de tipo Evento, y ui es de tipo Objeto. $(this).fadeOut('500', function() {
$(this).remove();
});
});
}
});
});
</script>
</head>
<body style = "padding:100px;">


<div id = "target">
<a href = "#" class = "tooltip-9">Hover over me!</a>
<a href = "#" class = "tooltip-10">Hover over me too!</a>
</div>
</body>
</html>
JQuery UI Slider
Se usa un control deslizante siempre que se obtenga un valor numérico dentro de un cierto rango. La ventaja de un control deslizante sobre la
entrada de texto es que resulta imposible para el usuario introducir un valor incorrecto. Cualquier valor que puedan elegir con el control
deslizante es válido.
jQueryUI nos proporciona un control deslizante a través del control deslizante. jQueryUI proporciona el método slider() cambia la apariencia de
los elementos HTML en la página, agregando nuevas clases CSS que les dan el estilo apropiado.
El método de slider() se puede usar de dos formas:
$ (selector).slider (options);
$ (selector).slider ("acción", params);
El método slider(options) declara que un elemento HTML se debe administrar como un control deslizante.
- options: es un objeto que especifica la apariencia y el comportamiento del control deslizante.
$ (selector).slider (options);
$ (selector).slider ({option1: value1, option2: value2 .....});

JQuery UI Slider
# Opción y descripción <!doctype html>

<html lang = "en">
<head>
1 animate Esta opción cuando se establece en verdadero, crea un efecto animado cuando los usuarios hacen clic directamente en el eje. Por <meta charset = "utf-8">
defecto su valor es falso. <title>jQuery UI Slider functionality</title>
<link
href="https://code.jquery.com/ui/1.12.1/themes/base/jque
2 disabled Esta opción cuando se establece en verdadero, desactiva el control deslizante. Por defecto su valor es falso. ry-ui.css" rel="stylesheet">
3 max Esta opción especifica el valor superior del rango que puede alcanzar el control deslizante: el valor representado cuando el manejador se <script src="https://code.jquery.com/ui/1.12.1/jquery-
mueve hacia la extrema derecha (para controles deslizantes horizontales) o superior (para controles deslizantes verticales). Por defecto su valor ui.min.js"></script>
es 100. 
<script>
4 min Esta opción especifica el valor inferior del rango que puede alcanzar el control deslizante: el valor que se representa cuando el control se $(function() {
$( "#slider-1" ).slider();
mueve hacia la izquierda (para deslizadores horizontales) o hacia abajo (para controles deslizantes verticales). Por defecto su valor es 0. });
</script>
</head>
5 orientation Esta opción indica la orientación horizontal o vertical del control deslizante. Por defecto, su valor es horizontal.
<body>

6 range Esta opción especifica si el control deslizante representa un rango. Por defecto su valor es falso. <div id = "slider-1"></div>
</body>
</html>
7 step Esta opción especifica intervalos discretos entre los valores mínimos y máximos que el control deslizante puede representar. Por defecto
su valor es 1.
8 value Esta opción especifica el valor inicial de un control deslizante con una sola asa. Si hay varios identificadores (consulte las opciones de
valores), especifica el valor del primer identificador. Por defecto su valor es 1.
9 values Esta opción es de tipo Array y hace que se creen múltiples identificadores y especifica los valores iniciales para esos identificadores.
Esta opción debería ser una matriz de valores posibles, uno para cada identificador. Por defecto su valor es nulo.
JQuery UI Slider
# Acción y descripción
1 destroy Esta acción destruye por completo la funcionalidad del control deslizante de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta ningún argumento.
2 disable Esta acción desactiva la funcionalidad del control deslizante. Este método no acepta ningún argumento.
3 enable Esta acción habilita la funcionalidad del control deslizante. Este método no acepta ningún argumento.
4 option( optionName ) Esta acción recupera el valor de la opción de parámetro especificada. Esta opción corresponde a una de las utilizadas con control deslizante (opciones). Donde optionName es el nombre de la
opción para obtener.
5 option() Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de las opciones del control deslizante actual.
6 option( optionName, value ) Esta acción establece el valor de la opción del control deslizante asociada con el optionName especificado. El argumento optionName es el nombre de la opción que se establecerá y el
valor es el valor que se establecerá para la opción.
7 option( options ) Esta acción establece una o más opciones para el control deslizante. Las opciones de argumento son un mapa de pares de opción-valor que se establecerán.
8 value Esta acción recupera el valor actual de options.value (el control deslizante). Úselo solo si el control deslizante es único (si no, use el control deslizante ("valores")). Esta firma no acepta ningún argumento.
9 value( value ) Esta acción establece el valor del control deslizante.
10 values Esta acción recupera el valor actual de options.values (el valor de los controles deslizantes en una matriz). Esta firma no acepta ningún argumento.
11 values( index ) Esta acción obtiene el valor para el identificador especificado. Donde index es de tipo Integer y es un índice basado en cero del handle.
12 values( index, value ) Esta acción establece el valor para el identificador especificado. Donde índice es el índice basado en cero del identificador y el valor es el valor para establecer.
13 values( values ) Esta acción establece el valor de todos los identificadores.
14 widget Esta acción devuelve un objeto jQuery que contiene el control deslizante. Este método no acepta ningún argumento. Regresa ui-slider
JQuery UI Slider
Ejemplo
<!doctype html>
<html lang = "en">
<head>
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-
ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-


<script>
$(function() {
$( "#slider-4" ).slider({
orientation:"vertical"
});
$( "#slider-4" ).slider('disable');
orientation:"vertical",
value:50,
slide: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
});
</script>
</head>
<body>

<div id = "slider-4"></div>
<p>
<label for = "minval">Minumum value:</label>
<input type = "text" id = "minval"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
</body>
</html>
JQuery UI Slider <!doctype html>
<html lang = "en">
<head>
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet">
Además del método slider (options) que vimos en las secciones anteriores, JqueryUI proporciona métodos de <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación 
<script>
$(function() {
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
start: function( event, ui ) {
# Método y descripción del evento $( "#startvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
1 change(event, ui) Este evento se desencadena cambios de valor del controlador, ya sea a $( "#stopvalue" )
través de la acción del usuario o mediante programación. },

change: function( event, ui ) {
$( "#changevalue" )
},
2 create(event, ui) Este evento se desencadena cuando se crea el control deslizante. slide: function( event, ui ) {
$( "#slidevalue" )
}
});
});
3 slide(event, ui) Este evento se desencadena para los eventos de movimiento del mouse cada </script>
</head>
vez que se arrastra el control a través del control deslizante. Devolver falso cancela la <body>
diapositiva. 
<p>
<label for = "startvalue">Start:</label>
<input type = "text" id = "startvalue"
4 start(event, ui) Este evento se activa cuando el usuario comienza a deslizarse. style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "stopvalue">Stop:</label>
5 stop(event, ui) Este evento se activa cuando se detiene una diapositiva. <input type = "text" id = "stopvalue"
</p>
<p>
<label for = "changevalue">Change:</label>
<input type = "text" id = "changevalue"
</p>
<p>
<label for = "slidevalue">Slide:</label>
<input type = "text" id = "slidevalue"
</p>
</body>
</html>
JQuery UI Slider
Actividad
● Crear un html que tenga un 3 tabs y dentro contenga 1 slider

JQuery UI Selectable
jQueryUI proporciona el método selectable() para seleccionar el elemento DOM individualmente o en un grupo.
Con este método, los elementos se pueden seleccionar arrastrando un cuadro (a veces llamado lazo) con el mouse sobre los elementos.
Además, los elementos se pueden seleccionar haciendo clic o arrastrando mientras se mantiene presionada la tecla Ctrl / Meta, lo que permite
selecciones múltiples (no contiguas).
El método de selectable() se puede usar de dos formas:
$ (selector).selectable(options);
$ (selector).selectable("acción", params);
El método selectable(options) declara que un elemento HTML contiene elementos seleccionables.

- options : es un objeto que especifica el comportamiento de los elementos involucrados al seleccionar.
$ (selector).selectable(options);
$ (selector).selectable ({option1: value1, option2: value2 .....});

La siguiente tabla enumera las diferentes opciones que se pueden usar con este método <!doctype html>
<html lang = "en">
<head>
# Opción y descripción <title>jQuery UI selectable-1</title>
<link
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-
1 appendTo Esta opción indica a qué elemento debe anexarse el ayudante de selección (el lazo). Por defecto, su valor es body. ui.css" rel="stylesheet">
2 autoRefresh Esta opción, si se establece en true, la posición y el tamaño de cada elemento seleccionable se calculan al comienzo de una <script src="https://code.jquery.com/ui/1.12.1/jquery-
operación de selección. Por defecto, su valor es true. ui.min.js"></script>
<style>
3 cancel Esta opción prohíbe seleccionar si comienza la selección de elementos. Por defecto, su valor es input, textarea, button, select, option. #selectable-1 .ui-selecting { background: red ; }
#selectable-1 .ui-selected { background: yellow; color: red;
}
4 delay Esta opción se usa para establecer el tiempo en milisegundos y define cuándo debe comenzar la selección. Esto se puede usar para
#selectable-1 { list-style-type: none; margin: 0; padding: 0;
evitar selecciones no deseadas. Por defecto su valor es 0. width: 20%; }
#selectable-1 li { margin: 3px; padding: 0.4em; font-size:
16px; height: 18px; }
5 disabled Esta opción cuando se establece en true, desactiva el mecanismo de selección. Los usuarios no pueden seleccionar los elementos
.ui-widget-content { background: #cedc98; border: 1px
hasta que se restaure el mecanismo usando la instrucción selectable("enable"). Por defecto su valor es false. solid #DDDDDD; color: #333333; }
</style>
<script>
6 distance Esta opción es la distancia (en píxeles) que debe mover el mouse para considerar la selección en progreso. Esto es útil, por ejemplo,
$(function() {
para evitar que simples clics se interpreten como una selección grupal. Por defecto su valor es 0. $( "#selectable-1" ).selectable();
});
</script>
7 filter Esta opción es un selector que indica qué elementos pueden ser parte de la selección. Por defecto su valor es *. pero puede ser “li”,
</head>
"li:first-child", “div” u otro elemento.
<body>
<ol id = "selectable-1">
8 tolerance Esta opción especifica qué modo usar para probar si el ayudante de selección (el lazo) debe seleccionar un elemento
<li class = "ui-widget-content">Product 1</li>
- touch: este tipo indica que el rectángulo de arrastre solo necesita intersectar cualquier parte del elemento seleccionable. <li class = "ui-widget-content">Product 2</li>
- fit: este tipo indica que la selección de arrastre debe abarcar por completo un elemento para que se seleccione. <li class = "ui-widget-content">Product 3</li>
. Por defecto, su valor es touch. <li class = "ui-widget-content">Product 4</li>
</ol>
</body>
</html>
<!doctype html>
<html lang = "en">
<head>
<title>jQuery UI Selectable</title>
# Acción Descripción <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet">
1 destroy Esta acción elimina por completo la funcionalidad seleccionable de un elemento. Los elementos vuelven a su estado
<style>
previo al inicio. #selectable-5 .ui-selecting,#selectable-6 .ui-selecting {
background: #707070 ; }
#selectable-5 .ui-selected,#selectable-6 .ui-selected {
background: #EEEEEE; color: #000000; }
2 disable Esta acción desactiva la funcionalidad seleccionable de un elemento. Este método no acepta ningún argumento. #selectable-5,#selectable-6 {
list-style-type: none; margin: 0; padding: 0; width: 20%; }
#selectable-5 li,#selectable-6 li {
margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
3 enable Esta acción habilita la funcionalidad seleccionable de un elemento. Este método no acepta ningún argumento. .ui-widget-content {
border: 1px solid #DDDDDD;
color: #333333;
4 option( optionName ) Esta acción obtiene el valor actualmente asociado con el optionName especificado. }
</style>
<script>
5 option() Esta acción obtiene un objeto que contiene pares de clave / valor que representan el hash de opciones seleccionables $(function() {
$( "#selectable-5" ).selectable();
actuales. $( "#selectable-5" ).selectable('disable');
$( "#selectable-6" ).selectable();
$( "#selectable-6" ).selectable( "option", "distance", 1 );
});
6 option( optionName, value ) Esta acción establece el valor de la opción seleccionable asociada con el optionName especificado. </script>
</head>
El argumento optionName es el nombre de la opción que se establecerá y el valor es el valor que se establecerá para la opción.
<body>
<h3>Disabled using disable() method</h3>
7 option( options ) Esta acción establece una o más opciones para el seleccionable. Las opciones de argumento son un mapa de <ol id = "selectable-5">
pares de opción-valor que se establecerán. <li class = "ui-widget-content">Product 2</li>
</ol>
<h3>Select using method option( optionName, value )</h3>
8 refresh Esta acción hace que se actualicen el tamaño y la posición de los elementos seleccionables. Se usa principalmente <ol id = "selectable-6">
cuando la opción de autorefresh está desactivada (establecida en falso). Este método no acepta ningún argumento. <li class = "ui-widget-content">Product 5</li>
</ol>
9 widget Esta acción devuelve un objeto jQuery que contiene el elemento seleccionable. Este método no acepta ningún argumento. </body>
</html>
JQuery UI Selectable <!doctype html>
<html lang = "en">
<head>
Además del método selectable(options) que vimos en las secciones anteriores, JqueryUI proporciona <title>jQuery UI selectable-7</title>
métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a rel="stylesheet">
continuación <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
#selectable-7 .ui-selecting { background: #707070 ; }
# Método y descripción del evento #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
#selectable-7 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-7 li { margin: 3px; padding: 0.4em;
1 create(event, ui) Este evento se desencadena cuando se crea el elemento seleccionable. Donde font-size: 16px; height: 18px; }
.ui-widget-content {
event es de tipo Evento, y ui es de tipo Objeto. background: #cedc98;
color: #333333;
}
.resultarea {
2 selected(event, ui) Este evento se desencadena para cada elemento que se selecciona. Donde event background: #cedc98;
border-top: 1px solid #000000;
es de tipo Evento, y ui es de tipo Objeto. border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
3 selecting(event, ui) Este evento se desencadena para cada elemento seleccionable que está a punto </style>
<script>
de ser seleccionado. Donde evento es de tipo Evento, y ui es de tipo Objeto. $(function() {
$( "#selectable-7" ).selectable({
selected: function() {
var result = $( "#result" ).empty();
4 start(event, ui) Este evento se desencadena al comienzo de la operación de selección. Donde evento $( ".ui-selected", this ).each(function() {
var index = $( "#selectable-7 li" ).index( this );
es de tipo Evento, y ui es de tipo Objeto. result.append( " #" + ( index + 1 ) );
});
}
});
});
5 stop(event, ui) Este evento se desencadena al final de la operación de selección. Donde evento es de </script>
</head>
tipo Evento, y ui es de tipo Objeto. <body>
<h3>Events</h3>
<ol id = "selectable-7">
6 unselected(event, ui) Este evento se desencadena al final de la operación de selección para cada <li class = "ui-widget-content">Product 1</li>
elemento que se deselecciona. Donde evento es de tipo Evento, y ui es de tipo Objeto. <li class = "ui-widget-content">Product 4</li>
7 unselecting(event, ui) Este evento se desencadena durante la operación de selección para cada </ol>
<span class = "resultarea">Selected Product</span>>
elemento seleccionado que está por deseleccionarse. Donde evento es de tipo Evento, y ui es de tipo <span id = result class = "resultarea"></span>
</body>
</html>
Objeto.
JQuery UI Sortable
jQueryUI proporciona el método sortable() para reordenar elementos en la lista o cuadrícula con el mouse.
Este método realiza una acción de escalabilidad basada en una cadena de operación pasada como primer parámetro.
El método de sortable() se puede usar de dos formas:
$ (selector).sortable(options);
$ (selector).sortable("acción", params);
El método sortable(options) declara que un elemento HTML contiene elementos intercambiables.

- options: es un objeto que especifica el comportamiento de los elementos involucrados durante el reordenamiento.
$ (selector).sortable(options);
$ (selector).sortable ({option1: value1, option2: value2 .....});

JQuery UI Sortable
<!DOCTYPE html>
La siguiente tabla enumera las diferentes opciones que se pueden usar con este método <html>
<head>
<title>jQuery UI Sortable - Example</title>
rel="stylesheet">
<style>
#sortable-2, #sortable-3 { list-style-type: none; margin: 0;
1 appendTo Esta opción especifica el elemento en el que se insertará el nuevo elemento creado con options.helper durante el tiempo del movimiento / arrastre. Por defecto su padding: 0; width: 25%; }
valor es top. #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
2 axis Esta opción indica un eje de movimiento ("x" es horizontal, "y" es vertical). Por defecto su valor es falso. border: 1px solid #DDDDDD;
color: #333333;
}
.highlight {
3 cancel Esta opción se usa para evitar la clasificación de elementos haciendo clic en cualquiera de los elementos del selector. Por defecto, su valor es "input, textarea, button, border: 1px solid red;
select, option". font-weight: bold;
font-size: 45px;
background-color: #333333;
connectWith Esta opción es un Selector que identifica otro elemento ordenable que puede aceptar elementos de este ordenable. Esto permite que los elementos de una lista se }
4 </style>
muevan a otras listas, una interacción de usuario frecuente y útil. Si se omite, no se conecta ningún otro elemento. Esta es una relación de una sola vía. Por defecto su valor es
falso. <script>
$(function() {
$( "#sortable-2" ).sortable({
containment Esta opción indica un elemento dentro del cual tiene lugar el desplazamiento. El elemento se representará mediante un selector (solo se considerará el primer delay:500,
5 placeholder: "highlight"
elemento de la lista), un elemento DOM o la cadena "principal" (elemento principal) o "ventana" (página HTML). });
distance:30
6 cursor Especifica la propiedad CSS del cursor cuando se mueve el elemento. Representa la forma del puntero del mouse. Por defecto, su valor es "auto". });
});
</script>
</head>
7 cursorAt Establece el desplazamiento del asistente de arrastre en relación con el cursor del mouse. Las coordenadas se pueden dar como un hash usando una combinación de
una o dos teclas: {arriba, izquierda, derecha, abajo}. Por defecto su valor es "falso". <body>
<h3>Delay by 500ms</h3>
<ul id = "sortable-2">
<li class = "default">Product 1</li>
8 delay Retraso, en milisegundos, después de lo cual se tiene en cuenta el primer movimiento del mouse. El desplazamiento puede comenzar después de ese momento. Por <li class = "default">Product 2</li>
defecto su valor es "0". <li class = "default">Product 3</li>
</ul>
9 disabled Esta opción si se establece en verdadero, desactiva la funcionalidad ordenable. Por defecto su valor es falso. <h3>Distance Delay by 30px</h3>
10 distance Número de píxeles que debe mover el mouse antes de que comience la clasificación. Si se especifica, la clasificación no comenzará hasta que el mouse sea arrastrado <li class = "default">Product 3</li>
más allá de la distancia. Por defecto, su valor es "1".
</ul>
</body>
</html>
11 dropOnEmpty Esta opción si se configura como falsa, los elementos de este ordenable no se pueden descartar en un ordenable de conexión vacío. Por defecto, su valor es
verdadero.
JQuery UI Sortable
12 forceHelperSize Si esta opción está establecida en verdadero, obliga al asistente a tener un tamaño. Por defecto su valor es falso.
13 forcePlaceholderSize Esta opción cuando se establece en verdadero, tiene en cuenta el tamaño del marcador de posición cuando se mueve
un elemento. Esta opción solo es útil si se inicializa options.placeholder. Por defecto su valor es falso.
14 grid Esta opción es una Matriz [x, y] que indica el número de píxeles que el elemento de clasificación mueve horizontal y verticalmente durante
el desplazamiento del mouse. Por defecto su valor es falso.
15 handle Si se especifica, restringe el inicio de la ordenación a menos que el mousedown ocurra en los elementos especificados. Por defecto su
valor es falso.
16 helper Permite que se use un elemento auxiliar para arrastrar la pantalla. Por defecto, su valor es String o Function.
17 items Esta opción especifica qué elementos dentro del elemento DOM se ordenarán. Por defecto su valor es> *. , li , li:firstChild , div
18 opacity Esta opción se usa para definir la opacidad del helper mientras se ordena. Por defecto su valor es falso.
19 placeholder Esta opción se usa para el nombre de clase que se aplica al espacio que de lo contrario sería blanco. De manera predeterminada,
su valor es falso.
20 revert Esta opción decide si los elementos ordenables deben volver a sus nuevas posiciones utilizando una animación suave. Por defecto su
valor es falso.
JQuery UI Sortable
21 scroll Esta opción se usa para habilitar el desplazamiento. Si se establece en verdadero, la página se desplaza cuando llega a un borde. Por
defecto, su valor es verdadero.
22 scrollSensitivity Esta opción indica cuántos píxeles debe salir el mouse del área visible para causar desplazamiento. Por defecto, su valor es
20. Esta opción se usa solo con options.scroll establecido en true.
23 scrollSpeed Esta opción indica la velocidad de desplazamiento de la pantalla una vez que comienza el desplazamiento. Por defecto su valor es
20.
24 tolerance Esta opción es una Cadena que especifica qué modo usar para probar si el elemento que se está moviendo está sobre otro elemento.
Por defecto, su valor es "intersectar". o podria ser “pointer”
25 zIndex Esta opción representa el índice z para elemento / ayuda mientras se ordena. Por defecto su valor es 1000.
JQuery UI Sortable
# Acción Descripción <!DOCTYPE html>

<html>
<head>
<title>jQuery UI Sortable - Example</title>
1 cancel() Esta acción cancela la operación de clasificación actual. Esto es más útil dentro de los manejadores para los eventos sort sort y sort <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet">
stop. Este método no acepta ningún argumento. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
2 destroy() Esta acción elimina la funcionalidad de bondad completamente. Esto devolverá el elemento a su estado previo al inicio. Este método
<style>
no acepta ningún argumento. #sortable-8{ list-style-type: none; margin: 0;
padding: 0; width: 25%; float:left;}
#sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
3 disable() Esta acción deshabilita la capacidad de ajuste de cualquier elemento ordenable en el conjunto envuelto. La capacidad de ajuste de los .default {
elementos no se elimina y se puede restaurar llamando a la variante de habilitación de este método. Este método no acepta ningún argumento. background: #cedc98;
color: #333333;
}
4 enable() Vuelve a habilitar la capacidad de ajuste en cualquier elemento ordenable en el conjunto envuelto cuya capacidad de compensación se </style>
ha deshabilitado. Tenga en cuenta que este método no agregará capacidad de recuperación a ningún elemento no clasificable. Este método no <script>
acepta ningún argumento. $(function() {
$('#sortable-8').sortable({
update: function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
5 option( optionName ) Esta acción obtiene el valor actualmente asociado con el optionName especificado. Donde optionName es el nombre de $("#sortable-9").text (productOrder);
}
la opción para obtener. });
});
</script>
6 option() Obtiene un objeto que contiene pares clave / valor que representan las opciones clasificables actuales hash .. Este método no acepta </head>
ningún argumento. <body>

<li id = "1" class = "default">Product 1</li>
<li id = "2" class = "default">Product 2</li>
7 option( optionName, value ) Esta acción establece el valor de la opción ordenable asociada con el optionName especificado. Donde <li id = "3" class = "default">Product 3</li>
optionName es el nombre de la opción para establecer y valorar es el valor para establecer para la opción. <li id = "4" class = "default">Product 4</li>
</ul>
<br>
<h3><span id = "sortable-9"></span></h3>
8 option( options ) Establece una o más opciones para el ordenable. Donde las opciones son un mapa de pares de opción-valor para establecer. </body>
</html>
9 refresh() Esta acción actualiza la lista de elementos si es necesario. Este método no acepta ningún argumento. Llamar a este método hará que
se reconozcan nuevos elementos agregados al ordenable.
JQuery UI Sortable
# Acción Descripción
10 toArray( options ) Este método devuelve una matriz de valores de id de los elementos ordenables en orden ordenado. Este método toma
Options como parámetro, para personalizar la serialización o el orden ordenado.
11 serialize( options ) Este método devuelve una cadena de consulta serializada (submittable vía Ajax) formada a partir del ordenable.
12 refreshPositions() Este método se usa principalmente internamente para actualizar la información en caché del ordenable. Este método no
acepta ningún argumento.
13 widget() Este método devuelve un objeto jQuery que contiene el elemento ordenable. Este método no acepta ningún argumento.
<!DOCTYPE html>
<html>
<head>
JQuery UI Sortable <title>jQuery UI Sortable - Example</title>

rel="stylesheet">
<style>
#sortable-10, #sortable-11 { list-style-type: none;
margin: 0; padding: 0; width: 80%; }
Además del método sortable(options) que vimos en las secciones anteriores, JqueryUI proporciona #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px;
padding: 0.4em; padding-left: 1.5em;
font-size: 17px; height: 16px; }
métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran .highlight {
border: 1px solid #000000;
a continuación font-weight: bold;
font-size: 45px;
background-color: #cedc98;
}
.default {
# Método y descripción del evento border: 1px solid #DDDDDD;
color: #333333;
}
.wrap {
1 activate(event, ui) Este evento se desencadena en el ordenable cuando se inicia una operación de clasificación en ordenable conectado. display: table-row-group;
}
.wrap1 {
2 beforeStop(event, ui) Este evento se desencadena cuando la operación de ordenación está a punto de finalizar, y la referencia del elemento float:left;
width: 100px;
auxiliar y marcador de posición sigue siendo válida. }
</style>
<script>
3 change(event, ui) Este evento se activa cuando el elemento ordenado cambia de posición dentro del DOM. $(function() {
start: function (event, ui) {
$("span#result").html ($("span#result").html ()
4 create(event, ui) Este evento se desencadena cuando se crea el ordenable. + "<b>start</b><br>");
},
receive : function (event, ui) {
5 deactivate(event, ui) Este evento se desencadena cuando un tipo conectado se detiene y se propaga al ordenable conectado. + ", receive");
},
stop: function (event, ui) {
6 out(event, ui) Este evento se activa cuando la posición de clasificación se aleja de una lista conectada. + "<b>stop</b><br>");
}
});
7 over(event, ui) Este evento se desencadena cuando un elemento de clasificación se mueve a una lista conectada. $( "#sortable-11" ).sortable({
connectWith : "#sortable-10, #sortable-11"
});
});
8 receive(event, ui) Este evento se desencadena cuando una lista conectada ha recibido un elemento de clasificación de otra lista. </script>
</head>
<body>
9 remove(event, ui) Este evento se desencadena cuando el elemento de clasificación se elimina de una lista conectada y se arrastra a otro. <div class = "wrap">
<div class = "wrap1">
<h3>List 1</h3>
10 sort(event, ui) Este evento se desencadena repetidamente para eventos mousemove durante una operación de clasificación. <li class = "default">A</li>
<li class = "default">B</li>
<li class = "default">C</li>
<li class = "default">D</li>
</ul>
</div>
<div class = "wrap1">
<h3>List 2</h3>
<li class = "default">a</li>
<li class = "default">b</li>
JQuery UI Sortable
Además del método sortable(options) que vimos en las secciones anteriores, JqueryUI proporciona
métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran
a continuación
# Método y descripción del evento
11 start(event, ui) Este evento se activa cuando se inicia una operación de clasificación.
12 stop(event, ui) Este evento se desencadena cuando finaliza una operación de clasificación.
13 update(event, ui) Este evento se desencadena cuando se detiene una operación de clasificación y se cambia la posición del elemento.
JQuery UI Draggable
jQueryUI proporciona el método draggable() para hacer que cualquier elemento DOM sea arrastrable. Una vez que el elemento se puede
arrastrar, puede mover ese elemento haciendo clic en él con el mouse y arrastrándolo a cualquier lugar dentro de la ventana gráfica.
El método de draggable() se puede usar de dos formas:
$ (selector).draggable(options);
$ (selector).draggable("acción", params);
El método draggable(options) declara que un elemento HTML se puede mover en la página HTML.
- options: es un objeto que especifica el comportamiento de los elementos involucrados.
$ (selector).draggable(options);
$ (selector).draggable ({option1: value1, option2: value2 .....});

JQuery UI Draggable
<!DOCTYPE html>
La siguiente tabla enumera las diferentes opciones que se pueden usar con este método <html>
<head>
rel="stylesheet">
</head>
<body>
<div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
1 addClasses Si esta opción se configura como falsa, evitará que la clase ui-draggable se agregue a la lista de elementos DOM seleccionados. Por defecto, su valor es <span>You can't move me!</span><br /><br />
verdadero. </div>
<div id = "div2" style = "border:solid 1px;background-color:grey;">
<span>
Dragging will start only after you drag me for 50px
2 appendTo Especifica el elemento al que se debe anexar el helper que se puede arrastrar mientras se arrastra. Por defecto, su valor es "parent". </span>
<br /><br />
</div>
<div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
3 axis Esta opción restringe el arrastre al eje horizontal (x) o vertical (y). Valores posibles: "x", "y". <span>
You have to wait for 500ms for dragging to start!
</span>
<br /><br />
4 cancel Puede usar esta opción para evitar que el arrastre comience en elementos especificados. Por defecto, su valor es "input, textarea, button, select, option". </div>
<div id = "div4" style = "width:200px;border:solid 1px;background-
color:green;">
<span>
5 connectToSortable Puede usar esta opción para especificar una lista cuyos elementos son intercambiables. Al final de la colocación, el elemento es parte de la lista. Por defecto Move
su valor es "falso". </span>
<br /><br />
</div>
6 containment Restringe arrastrando dentro de los límites del elemento o región especificada. Por defecto su valor es "falso".
<script>
$("#div1 span").draggable (
{ disabled: true }
7 cursor Especifica la propiedad CSS del cursor cuando se mueve el elemento. Representa la forma del puntero del mouse. Por defecto, su valor es "auto". );
$("#div2 span").draggable (
{ distance: 50 }
);
8 cursorAt Establece el desplazamiento del asistente de arrastre en relación con el cursor del mouse. Las coordenadas se pueden dar como un hash usando una combinación de $("#div3 span").draggable (
una o dos teclas: {arriba, izquierda, derecha, abajo}. Por defecto su valor es "falso". { delay: 500 }
);
$("#div4").draggable ();
</script>
9 delay Retraso, en milisegundos, después de lo cual se tiene en cuenta el primer movimiento del mouse. El desplazamiento puede comenzar después de ese momento. Por </body>
defecto su valor es "0". </html>
10 disabled Cuando se establece en verdadero, desactiva la capacidad de mover elementos. Los elementos no se pueden mover hasta que esta función esté habilitada (usando la
instrucción de arrastrar ("habilitar")). Por defecto su valor es "falso".
JQuery UI Draggable
11 distance Número de píxeles que debe mover el mouse antes de tener en cuenta el desplazamiento. Por defecto, su valor es "1".
12 grid Ajusta el auxiliar de arrastre a una cuadrícula, cada xey píxeles. La matriz debe ser de la forma [x, y]. Por defecto su valor es "falso".
13 handle Si se especifica, restringe el arrastre desde el inicio a menos que el mousedown ocurra en los elementos especificados. Por defecto su valor es "falso".
14 helper Permite que se use un elemento auxiliar para arrastrar la pantalla. Por defecto, su valor es "original".
15 iframeFix Evite que iframes capture los eventos mousemove durante un arrastre. Por defecto su valor es "falso".
16 opacity Opacidad del elemento movido cuando se mueve. Por defecto su valor es "falso".
17 refreshPositions Si se establece en verdadero, todas las posiciones desplegables se calculan en cada mousemove. Por defecto su valor es "falso".
18 revert Indica si el elemento vuelve a su posición original al final del movimiento. Por defecto su valor es "falso".
19 revertDuration Duración del desplazamiento (en milisegundos) después de lo cual el elemento vuelve a su posición original (ver opciones.revertir). Por defecto, su valor es "500".
20 scope Se utiliza para agrupar conjuntos de elementos arrastrables y que se pueden arrastrar, además de la opción de aceptar que se puede soltar. Por defecto, su valor es
"default".
21 scroll Cuando se establece en verdadero (valor predeterminado), la pantalla se desplazará si el elemento se mueve fuera del área visible de la ventana. Por defecto, su valor es
"verdadero".
JQuery UI Draggable
22 scrollSensitivity Indica cuántos píxeles debe salir el mouse de la ventana para provocar el desplazamiento de la pantalla. Por defecto, su valor es "20".
23 scrollSpeed Indica la velocidad de desplazamiento de la pantalla una vez que comienza el desplazamiento. Por defecto, su valor es "20".
24 snap Ajusta la visualización del elemento que se mueve en otros elementos (que están volados). Por defecto su valor es "falso".
25 snapMode Especifica cómo se debe realizar el ajuste entre el elemento movido y los indicados en options.snap. Por defecto, su valor es "both".
26 snapTolerance Número máximo de píxeles en la diferencia de posición necesaria para establecer el ajuste. Por defecto, su valor es "20".
27 stack Controla el índice z del conjunto de elementos que coinciden con el selector, siempre lleva el elemento actualmente arrastrado al frente. Muy útil en cosas como
administradores de ventanas. Por defecto su valor es "falso".
28 zIndex Z-index para el ayudante mientras se arrastra. Por defecto su valor es "falso".
JQuery UI Draggable
# Acción Descripción <!DOCTYPE html>

<html>
<head>
<link
1 destroy() Elimina la funcionalidad de arrastre por completo. Los elementos ya no son movibles. Esto devolverá el href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-
elemento a su estado previo al inicio. ui.css" rel="stylesheet">
2 disable() Desactiva la funcionalidad de arrastre. Los elementos no se pueden mover hasta la próxima llamada al <script src="https://code.jquery.com/ui/1.12.1/jquery-
método arrastrable ("enable"). </head>
<body>
3 enable() Reactiva la gestión de arrastre. Los elementos se pueden mover de nuevo. <div id = "div7" style = "border:solid 1px;background-
color:gainsboro;">
<span>You can't move me. Dragging is
4 option(optionName) Obtiene el valor actualmente asociado con el optionName especificado. Donde optionName es el disabled.</span><br><br>
nombre de la opción get y es de tipo String. </div>
<div id = "div8" style = "border:solid 1px;background-
color:grey;">
5 option() Obtiene un objeto que contiene pares de clave / valor que representan el hash de las opciones actuales que se <span>You can move me. Dragging is
enabled.</span><br><br>
pueden arrastrar. </div>
<script>
6 option(optionName, value) Establece el valor de la opción arrastrable asociada con el optionName especificado. $("#div7 span").draggable ();
Donde optionName es el nombre de la opción para establecer y valorar es el valor para establecer para la opción. $("#div7 span").draggable ('disable');
$("#div8 span").draggable ();
$("#div8 span").draggable ('enable');
7 option(options) Establece una o más opciones para el arrastrable. Donde las opciones son un mapa de pares de </script>
</body>
opción-valor para establecer. </html>
8 widget() Devuelve un objeto jQuery que contiene el elemento arrastrable.

JQuery UI Draggable
Además del método draggable(options) que vimos en las secciones anteriores, JqueryUI proporciona
métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran
a continuación
<!DOCTYPE html>
# Método y descripción del evento <html>
<head>
rel="stylesheet">
1 create(event, ui) Disparo cuando se crea el arrastrable. Donde evento es de tipo Evento, y ui es de tipo Objeto. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
2 drag(event, ui) Disparo mientras el mouse se mueve durante el arrastre. Donde evento es de tipo Evento, y ui es de <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
<span>Drag me to check the event method firing</span><br /><br />
tipo Objeto como ayudante, posición, desplazamiento. </div>
<script>
$("#div9 span").draggable ({
3 start(event, ui) Disparo cuando se inicia el arrastre. Donde evento es de tipo Evento, y ui es de tipo Objeto como cursor: "move",
axis : "x",
ayudante, posición, desplazamiento. drag: function( event, ui ) {
alert("hi..");
}
});
4 stop(event, ui) Disparo cuando se detiene el arrastre. Donde evento es de tipo Evento, y ui es de tipo Objeto como </script>
</body>
ayudante, posición, desplazamiento. </html>
JQuery UI Droppable
jQueryUI proporciona método droppable() para hacer que cualquier elemento DOM pueda mostrarse en un objetivo específico (un objetivo
para elementos que se pueden arrastrar).
El método de droppable() se puede usar de dos formas:
$ (selector).droppable(options);
$ (selector).droppable("acción", params);
El método droppable(options) declara que un elemento HTML puede usarse como un elemento en el que puede colocar otros elementos.
- options: es un objeto que especifica el comportamiento de los elementos involucrados.
$ (selector).droppable(options);
$ (selector).droppable ({option1: value1, option2: value2 .....});

<!doctype html>
<html lang = "en">
<head>
JQuery UI Droppable <meta charset = "utf-8">

<title>jQuery UI Droppable - Default functionality</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesh
<style>
#draggable-2 {
width: 100px; height: 50px; padding: 0.5em;
La siguiente tabla enumera las diferentes opciones que se pueden usar con este método }
margin: 0px 5px 10px 0;
#droppable-2,#droppable-3, #droppable-4,#droppable-5 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
1 accept Esta opción se usa cuando necesita controlar qué elementos arrastrables se deben aceptar para soltar. Por $( "#draggable-2" ).draggable();
$( "#droppable-2" ).droppable({
drop: function( event, ui ) {
defecto su valor es *. $( this )
.addClass( "ui-state-highlight" )
.find( "p" )
2 activeClass Esta opción es una Cadena que representa una o más clases de CSS que se agregarán al elemento }
.html( "Dropped!" );
});
desplegable cuando se está arrastrando un elemento aceptado (uno de los indicados en options.accept). Por defecto su
valor es falso. $( "#droppable-3" ).droppable({
disabled : "true",
drop: function( event, ui ) {
3 addClasses Esta opción cuando se establece en falso evitará que la clase ui-droppable se agregue a los elementos $( this )
.find( "p" )
que se pueden eliminar. Por defecto, su valor es verdadero. .html( "Dropped!" );
}
});
4 disabled Esta opción cuando se establece en verdadero desactiva el droppable. Por defecto su valor es falso.
$( "#droppable-4" ).droppable({
tolerance: 'touch',
5 greedy Esta opción se usa cuando necesita controlar qué elementos arrastrables se deben aceptar para colocar en drop: function( event, ui ) {
$( this )
elementos desplegables anidados. Por defecto su valor es falso. Si esta opción se establece en verdadero, cualquier .find( "p" )
.html( "Dropped with a touch!" );
elemento desplegable parent no recibirá el elemento. }
});
6 hoverClass Esta opción es una cadena que representa una o más clases de CSS que se agregarán al elemento de $( "#droppable-5" ).droppable({
tolerance: 'fit',
elementos desplegables cuando se mueve un elemento aceptado (un elemento indicado en options.accept). Por defecto drop: function( event, ui ) {
$( this )
su valor es falso. .addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped only when fully fit on the me!" );
7 scope Esta opción se usa para restringir la acción de los elementos que se pueden arrastrar solo a elementos que });
}
});
tienen el mismo options.scope (definido en "draggable" (opciones)). Por defecto, su valor es "default". </script>
</head>
8 tolerance Esta opción es una Cadena que especifica qué modo usar para probar si un elemento arrastrable está sobre <body>
<div id = "draggable-2" class = "ui-widget-content">
un elemento desplegable. Por defecto, su valor es "intersect". “fit” o “pointer”, “touch” <p>Drag me to my target</p>
</div>
<div id = "droppable-2" class = "ui-widget-header">
<p>Drop here</p>
JQuery UI Droppable
<!doctype html>
La siguiente tabla enumera las acciones para este método <html lang = "en">
<head>
<title>jQuery UI Droppable - Default functionality</title>
rel="stylesheet">
# Acción Descripción <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
1 destroy Esta acción destruye por completo la funcionalidad de un elemento que se puede eliminar. Los elementos .draggable-4 {
width: 90px; height: 50px; padding: 0.5em; float: left;
vuelven a su estado previo al inicio. margin: 0px 5px 10px 0;
border: 1px solid red;
background-color:#B9CD6D;
}
2 disable Esta acción deshabilita la operación desplegable. Los elementos ya no son elementos que se pueden soltar. .droppable-7 {
width: 100px; height: 90px;padding: 0.5em; float: left;
Este método no acepta ningún argumento. margin: 10px;
border: 1px solid black;
background-color:#A39480;
}
3 enable Esta acción reactiva la operación droppable. Los elementos pueden recibir nuevamente un elemento .droppable.active {
background-color: red;
desplegable. Este método no acepta ningún argumento. }
</style>
<script>
4 option Esta acción obtiene un objeto que contiene pares de clave / valor que representan el hash de opciones $(function() {
$('.draggable-4').draggable({ revert: true });
desplegables actuales. Este método no acepta ningún argumento. $('.droppable-7').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html(ui.draggable.remove().html());
5 option( optionName ) Esta acción obtiene el valor del elemento droppable actualmente asociado con el optionName $(this).droppable('destroy');
$( this )
especificado. Esto toma un valor de cadena como argumento. .addClass( "ui-state-highlight" )
.find( "p" )
.html( "i'm destroyed!" );
}
6 option( optionName, value ) Esta acción establece el valor de la opción droppable asociada con el optionName });
});
especificado. </script>
</head>
<body>
7 option( options ) Esta acción establece una o más opciones para el droppable. Las opciones de argumento son un <div class = "draggable-4"><p>drag 1</p></div>
<div class = "draggable-4"><p>drag 2</p></div>
mapa de pares de opción-valor que se establecerán. <div class = "draggable-4"><p>drag 3</p></div>
<div style = "clear: both;padding:10px"></div>
8 widget Esta acción devuelve un objeto jQuery que contiene el elemento desplegable. Este método no acepta ningún <div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
argumento. <div class = "droppable-7">drop here</div>
</body>
</html>
JQuery UI Droppable
<!doctype html>
Además del método droppable(options) que vimos en las secciones anteriores, JqueryUI proporciona <html lang = "en">
<head>
métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran <title>jQuery UI Droppable - Default functionality</title>
a continuación rel="stylesheet">
<style>
#draggable-5 {
# Método y descripción del evento width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-8 {
1 activate(event, ui) Este evento se activa cuando el elemento arrastrable aceptado comienza a arrastrarse. Esto puede width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
ser útil si desea hacer que la etiqueta "se ilumine" cuando se puede colocar. }
</style>
<script>
2 create(event, ui) Este evento se desencadena cuando se crea un elemento que se puede quitar. Donde event es de $(function() {
$( "#draggable-5" ).draggable();
tipo Evento, y ui es de tipo Objeto. $("#droppable-8").droppable({
drop: function (event, ui) {
$( this )
3 deactivate(event, ui) Este evento se activa cuando un arrastrable aceptado deja de arrastrar. Donde event es de tipo .find( "p" )
.html( "Dropped!" );
Evento, y ui es de tipo Objeto. },
4 drop(event, ui) Esta acción se desencadena cuando se suelta un elemento en la tabla desplegable. Esto se basa en la over: function (event, ui) {
$( this )
opción de tolerancia. Donde event es de tipo Evento, y ui es de tipo Objeto. .addClass( "ui-state-highlight" )
.find( "p" )
.html( "moving in!" );
},
5 out(event, ui) Este evento se desencadena cuando un elemento arrastrable aceptado se arrastra fuera del área out: function (event, ui) {
$( this )
desplegable. Esto se basa en la opción de tolerancia. Donde event es de tipo Evento, y ui es de tipo Objeto. .addClass( "ui-state-highlight" )
.find( "p" )
.html( "moving out!" );
}
6 over(event, ui) Este evento se desencadena cuando se arrastra un elemento arrastrable aceptado sobre el elemento });
});
desplegable. Esto se basa en la opción de tolerancia. Donde event es de tipo Evento, y ui es de tipo Objeto. </script>
</head>
<body>
<div id = "draggable-5" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-8" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
JQuery UI
Actividad
● Crear un html que contenga una lista que al seleccionarla se habilite el que puedan draggearse
● Crear un html con una lista de números que pueda ordenarse de mayor a menor
● Crear un html que contenga una lista de 4 elementos ordenable y agreguen 1 div draggable a la lista ordenable.
● Crear un html que valide que se arrastra con draggable o un droppable válido

Curso Javascript Intermedio

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Javascript Intermedio

Cargado por

Copyright:

Formatos disponibles

CURSO JAVASCRIPT

Validar nuestro json https://jsonformatter.curiousconcept.com/

NOTA: JSON se emplea

- Crear una clase alumno

- Crear una clase hijo

- Crear una clase casa

#id #firstname Selecciona el elemento con id = "firstname" 1

* * Selecciona todos los elementos 2

element p Selecciona todos los elementos <p> 1

[attribute] [target] Selecciona todos los elementos con un atributo de destino 2

:active a:active Selecciona el enlace activo 1

:checked input:checked Selecciona cada elemento <input> seleccionado 3

:disabled input:disabled Selecciona cada elemento <input> deshabilitado 3

:enabled input:enabled Selecciona cada elemento <input> habilitado 3

::first-letter p::first-letter Selecciona la primera letra de cada elemento <p> 1

::first-line p::first-line Selecciona la primera línea de cada elemento <p> 1

:focus input:focus Selecciona el elemento de entrada que tiene el foco 2

:hover a:hover Selecciona enlaces en el mouse sobre 1

:link a:link Selecciona todos los enlaces no visitados 1

:not(selector) :not(p) Selecciona cada elemento que no es un elemento <p> 3

:optional input:optional Selecciona los elementos de entrada sin atributo "required" 3

:read-only input:read-only Selecciona elementos de entrada con el atributo "readonly" especificado 3

Selector Example Example description CSS

:read-write input:read-write Selecciona elementos de entrada con el atributo "readonly" NO especificado 3

:required input:required Selecciona elementos de entrada con el atributo "required" especificado 3

:root :root Selecciona el elemento raíz del documento 3

::selection ::selection Selecciona la parte de un elemento seleccionada por un usuario

:visited a:visited Selecciona todos los enlaces visitados 1

Liga del excel con los selectores

<div class="div">Div con class</div><br>

- EXTRA simular la funcion css de jquery $(selector).css( attributocssstr , valorcssstr );

Liga importante de estilos directos en javascript

nodeType Constante numérica que identifica el tipo de nodo

parentNode Referencia al objeto padre en el árbol nodal

firstChild Referencia al primer nodo hijo

LastChild Referencia al último nodo hijo

previousSibling Referencia al nodo hermano previo

nextSibling Referencia al nodo hermano siguiente

attributes Referencia al objeto que contiene los atributos

ownerDocument Referencia al objeto documento propietario

insertBefore Inserta un nodo hijo antes del referenciado node.insertBefore(newnode, existingnode)

replaceChild Reemplaza el nodo hijo referenciado node.replaceChild(newnode, oldnode)

removeChild Elimina el nodo hijo referenciado node.removeChild(node)

appendChild Añade un nodo al final de la lista de nodos hijo node.appendChild(node)

hasChildNodes Permite determinar si un nodo tiene hijos node.hasChildNodes()

contains Devuelve un valor booleano que indica si un nodo es un descendiente node.contains(node)

style La propiedad de estilo devuelve un objeto CSSStyleDeclaration, que node.style.property = value

La propiedad style se utiliza para obtener o establecer un estilo

<div class="div">Div con class</div><br>

var nodeAnchor = document.querySelector('a');

console.log('Tipo: ' + nodeAnchor.nodeType);

Evento Descripción Elementos para los que está definido

onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>

onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>

onclick Pinchar y soltar el ratón Todos los elementos

onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>

Evento Descripción Elementos para los que está definido

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>

onkeypress Pulsar una tecla Elementos de formulario y <body>

onkeyup Soltar una tecla pulsada Elementos de formulario y <body>

onload La página se ha cargado completamente <body>

onresize Se ha modificado el tamaño de la ventana del navegador <body>

Evento Descripción Elementos para los que está definido