Manual JQuery & JQueryUI De
User Manual:
Open the PDF directly: View PDF .
Page Count: 41
Download | ![]() |
Open PDF In Browser | View PDF |
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. 1.1 Software a Utilizar Para trabajar con el contenido de este manual necesitara varias de las siguientes herramientas: 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 $(document).ready() Además es posible pasarle a $(document).ready() una función nombrada en lugar de una anónima: Pasar una función nombrada en lugar de una función anónima 2.2.2 Selección de Elementos El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca. A continuación se muestran algunas técnicas comunes para la selección de elementos: Selección de elementos en base a su ID Selección de elementos en base al nombre de clase Selección de elementos por su atributo Selección de elementos en forma de selector CSS Pseudo-selectores 2.2.3 Guardar Selecciones Cada vez que se hace una selección, una gran cantidad de código es ejecutado. jQuery no guarda el resultado por si solo, por lo tanto, si va a realizar una selección que luego se hará de nuevo, deberá guardar la selección en una variable. Guardar selecciones en una variable Una vez que la selección es guardada en la variable, se la puede utilizar en conjunto con los métodos de jQuery y el resultado será igual que utilizando la selección original. 2.2.4 Obtenedores (Getters) & Establecedores (Setters) jQuery “sobrecarga” sus métodos, en otras palabras, el método para establecer un valor posee el mismo nombre que el método para obtener un valor. Cuando un método es utilizado para establecer un valor, es llamado método establecedor (en inglés setter). En cambio, cuando un método es utilizado para obtener (o leer) un valor, es llamado obtenedor (en inglés getter). El método $.fn.html utilizado como establecedor $('h1').html('hello world'); El método html utilizado como obtenedor $('h1').html(); 2.3 Ejemplo practico Vamos a hacer un ejemplo sencillo de selecciones de objetos y verificar que realmente obtuvimos un elemento HTML con jQuery. Tendremos una pagina muy simple: A simple vista ya podemos reconocer donde estamos agregando la biblioteca jQuery y en donde podemos empezar a escribir código JavaScript. Lo que haremos es obtener el valor delque tiene la clase “miClase” y alcon el id “miId” le daremos un contenido que queramos (sustituyendo el contenido actual). Dentro de la etiqueta