PDF de programación - Manual jQuery & jQueryUI

Manual jQuery & jQueryUI



INSTITUTO TECNOLOGICO DE CHIHUAHUA II



March 14, 2012

Elaborado por: •Isaac Ojeda Quintana



•Mariana Martínez Almeida







Tabla de contenido
1.

Introducción ................................................................................................................................ 4

1.1 Software a Utilizar ..................................................................................................................... 4

1.1.1 Descargar jQuery y jQueryUI .............................................................................................. 4

1.2 Añadir JavaScript a una Página.................................................................................................. 4

2.

Introducción a jQuery.................................................................................................................. 6

2.1 Objetos en JavaScript ................................................................................................................ 6

2.2 Conceptos Básicos de jQuery .................................................................................................... 7

2.2.1 $(document).ready() .......................................................................................................... 7

2.2.2 Selección de Elementos ...................................................................................................... 7

2.2.3 Guardar Selecciones ........................................................................................................... 8

2.2.4 Obtenedores (Getters) & Establecedores (Setters) ........................................................... 9

2.3 Ejemplo practico ........................................................................................................................ 9

3. Eventos .......................................................................................................................................... 14

3.1 Introducción ............................................................................................................................ 14

3.2 Vincular Eventos a Elementos ................................................................................................. 14

4.

Efectos ....................................................................................................................................... 15

4.1

Introducción ...................................................................................................................... 15

4.2 Efectos Incorporados en la Biblioteca ..................................................................................... 15

4.2.1 Cambiar la Duración de los Efectos .................................................................................. 15

4.2.1.1 Realizar una Acción Cuando un Efecto fue Ejecutado................................................... 16

4.3 Efectos Personalizados con $.fn.animate................................................................................ 16

4.4 Control de los Efectos.............................................................................................................. 16

4.5 Ejemplo practico (Eventos & Efectos) ..................................................................................... 17

5.

jQuery User Interface ................................................................................................................ 21

5.1 Introducción ............................................................................................................................ 21

5.1.1 Librería y estilos de página ............................................................................................... 21

5.2 Módulos de jQuery UI ............................................................................................................. 22

5.2.1 Interacciones .................................................................................................................... 22

5.2.2 Widgets ............................................................................................................................ 22

5.3 Efectos ................................................................................................................................. 31

6 jQuery Plugins ................................................................................................................................ 32

6.1 Step Carousel........................................................................................................................... 32

6.1.1 Estructura HTML ............................................................................................................... 32

6.1.2 CSS .................................................................................................................................... 33

6.1.3 Configuración del Plugin................................................................................................... 34

6.2 Galería fotográfica con “Glisse” .............................................................................................. 36

6.2.1 Esctructura HTML ............................................................................................................. 37

6.2.2 CSS .................................................................................................................................... 37

6.2.3 Configuración ................................................................................................................... 38

Trabajos citados ................................................................................................................................ 40



1. Introducción

jQuery es una biblioteca de JavaScript que permite simplificar la manera de interactuar con los
documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a páginas web.

jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de
interfaces web debería de conocer. El propósito de este manual es proveer un resumen de la
biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas
básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje.

Para trabajar con el contenido de este manual necesitara varias de las siguientes herramientas:

1.1 Software a Utilizar

 Un navegador web actualizado
 Un editor de textos planos(como Notepad++,Komodo,etc)


Las bibliotecas jQuery y jQueryUI

1.1.1 Descargar jQuery y jQueryUI

Podemos visitar la página oficial de jQuery para obtener la versión más actual y estable:
http://docs.jquery.com/Downloading_jQuery y http://jqueryui.com/download. En este último nos
da la opción de seleccionar o crear un tema para jQueryUI, nos mostrara ejemplos de
componentes de jQuery UI y seleccionaremos el que necesitemos.

1.2 Añadir JavaScript a una Página

Una vez descargado jQuery y el plugin jQueryUI debemos agregarlo a nuestra página web. Existen
dos formas de insertar código JavaScript dentro de una pagina: escribiendo código en la misma o a
través de un archivo externo utilizando la etiqueta script.



Dentro de esta etiqueta podemos empezar a escribir código JavaScript, la segunda opción es
usando la misma etiqueta pero nuestro código JavaScript ira dentro de un archivo de texto plano
con extensión “.js”.

Dentro del atributo ‘src’ debe de ir la ruta donde se encuentra en este caso el archivo con
extensión .js .Y así es como agregamos la biblioteca jQuery a nuestra página web, y en la etiqueta
de abajo estaremos casi listos para comenzar a escribir código JavaScript utilizando jQuery



.

2. Introducción a jQuery

jQuery se encuentra escrito en JavaScript, un lenguaje de programación muy rico y expresivo. El
manual está orientado a personas con conocimientos básicos en este lenguaje así que no se
tomaran temas referentes a JavaScript, pero si usted esta interesado en aprender el lenguaje más
en profundidad, puede leer el libro JavaScript: The Good Parts escrito por Douglas Crockford.

2.1 Objetos en JavaScript

Los objetos son elementos que pueden contener cero o más conjuntos de pares de nombres
claves y valores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o
número válido. El valor puede ser cualquier tipo de valor: un número, una cadena, un arreglo, una
función, incluso otro objeto.

[Definición: Cuando uno de los valores de un objeto es una función, ésta es nombrada como un
método del objeto.] De lo contrario, se les llama propiedades.

Curiosamente, en JavaScript, casi todo es un objeto — arreglos, funciones, números, incluso
cadenas — y todos poseen propiedades y métodos.

Creación de un “objeto literal”



2.2 Conceptos Básicos de jQuery

2.2.1 $(document).ready()

No es posible interactuar de forma segura con el contenido de una página hasta que el documento
no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través
de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la
página este disponible.

El bloque $(document).ready()



Existe una forma abreviada para $(document).ready() la cual podrá encontrar algunas veces; sin
embargo, es recomendable no utilizarla en caso que este escribiendo código para gente que no
conoce jQuery.

Forma abreviada para $(d