GUIA PRACTICA #2 SEMANA 7 MODULO: DESARROLLO DE APLICACIONES WEB CON SOFTWARE DISTRIBUCION. FACILITADORES: Tec. Keiry Bermdez, Ing.

Edgardo Claros e Ing. Erwin Vides. TEMA: php, Mysql y JqueryUi parte 2. DE LIBRE

jQuery UI es una biblioteca de componentes para el framework jQuery que le aaden un conjunto de plug-ins, widgets y efectos visuales para la creacin de aplicaciones web. Cada componente o 5 mdulo se desarrolla de acuerdo a la filosofa de jQuery (find something, manipulate it: encuentra algo, maniplalo).

Mdulos La biblioteca se divide en cuatro mdulos: Ncleo Contiene las funciones bsicas para el resto de mdulos. Interacciones Aade comportamientos complejos a los elementos: Draggable: Hace al elemento arrastrable. Droppable: Permite que el elemento responda a elementos arrastrables. Resizable: Permite redimensionar el elemento. Selectable: Permite seleccionar entre una lista de elementos. Sortable: Ordena una lista de elementos.

Widgets Es un conjunto completo de controles UI. Cada control tiene un conjunto de opciones configurables y se les pueden aplicar estilos CSS. Efectos Una API para aadir transiciones animadas y facilidades para interacciones. Core: Ampla los efectos de jQuery incluyendo morphing, requerido por el resto de efectos. Accordion: Men con efecto acorden. Autocomplete: Caja con autocompletado. Button: Botn. Dialog: Ventanas con contenido. Slider: Elemento para elegir en un rango de valores. Tabs: Pestaas. Datepicker: Calendario grfico. Progressbar: Barra de progreso.

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson

Blind Bounce Clip Drop Explode Fade Fold Highlight Pulsate Scale Shake Slide Transfer

El segundo que se explicara es el Widget Tabs, este tiene el siguiente diseo:

Este posee una la siguiente estructura html:

Contiene una etiqueta div contendora con un id llamado tabs (este nombre puede ser cualquiera). La estructura lgica indica que dentro del div contendor debe de crearse una etiqueta div que encerrara solamente 4 etiquetas: una etiqueta de tipo ul que encerrara una etiqueta tipo li, las cuales contendrn una etiqueta de tipo a estas en su propiedad href harn conexin con el id de cada div que se genere, 3 etiquetas sern las que formen el

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson

encabezado y una ltima etiqueta ser una de tipo div la cual tendr un id que servir para hacer referencia a las etiquetas de tipo a anteriormente creadas que servir como cuerpo de la pgina. Este conjunto de etiquetas se podrn crear en este orden las veces que se necesiten.

Ahora veremos el Script completo:

Se explicara la parte del head:

La segunda lnea llama el archivo css que se proporciona cuando se descarga jqueryui este puede ser colocado en cualquier parte del proyecto. La tercera y cuarta lnea llaman las dos libreras de jquery que son proporcionadas en los archivos que proporciona jquery.

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson

De la lnea 5 a la 10 se abren etiquetas tipo javascript las cuales contienen una funcin la cual da la orden de afectar a una etiqueta que posea un id tabs y que se le aplicara el widget Tabs.

Hagamos el ejemplo usando php, se usara el proyecto estudiantes que se ha desarrollado en las guas anteriores: lo que se har es listar todos los estudiantes en un acorden donde el header ser los nombres y apellidos de estos, el resto de la informacin se colocaran dentro de la etiqueta div. Agregue este mtodo dentro del archivo MainClass.php

El cdigo resultante sera el siguiente:

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson

DateTimePicker: Este nos genera dinmicamente un calendario completamente configurable. El resultado esperado es el siguiente:

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson

El cdigo que lo hace funcionar es el que se muestra a continuacin:

La lnea 8 es la que hace funcionar el widget DateTimePicker de la siguiente manera se le indica que afectara solo a controles de tipo input y se filtraran aplicndose el widget solo a los controles que de tipo input que posean una clase especifica en este caso es la clase datepicker esta puede ser cualquiera. En la lnea 14 se crea el control de tipo input con su class datepicker.

A continuacin configuraremos este mismo control para cambiar parmetros y hacerlos ms personalizables

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson

"Primero resuelve el problema. Entonces, escribe el cdigo" -- John Johnson