jQuery para principiantes (Parte 6) - jQuery UI y lecturas adicionales

En nuestra lección final en este jQuery para principiantes serie de tutoriales, vamos a echar un breve vistazo a jQuery UI - El complemento jQuery más utilizado para agregar interfaces gráficas de usuario a aplicaciones web. Desde formas sofisticadas y efectos visuales, hasta widgets que se pueden arrastrar, giradores y cuadros de diálogo: la interfaz de usuario jQuery le brinda la capacidad de crear interfaces de usuario web ricas..

Si aún no lo ha hecho, asegúrese de leer nuestros artículos anteriores de la serie:

• Introducción: ¿Qué es jQuery y por qué debería importarte? Cómo hacer que la web sea interactiva: una introducción a jQuery Cómo hacer que la web sea interactiva: una introducción a jQuery jQuery es una biblioteca de scripts del lado del cliente que utiliza casi todos los sitios web modernos: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, la más compatible y la más utilizada ... Leer más
• 1: Selectores y conceptos básicos Tutorial de jQuery - Primeros pasos: conceptos básicos y selectores Tutorial de jQuery - Procedimientos iniciales: conceptos básicos y selectores La semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algún código y aprendamos cómo ... Leer más
• 2: Introducción a los métodos de jQuery (Parte 2): Introducción a los métodos y funciones de jQuery (Parte 2): Métodos y funciones Esto es parte de una introducción para principiantes en curso a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery de cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Leer más
• 3: esperando la carga de la página y funciones anónimas Introducción a jQuery (Parte 3): esperando la página para cargar y funciones anónimas Introducción a jQuery (Parte 3): esperando la página para cargar y funciones anónimas jQuery es una habilidad esencial para El desarrollador web moderno, y en esta pequeña miniserie, espero poder darle el conocimiento para comenzar a utilizarlo en sus propios proyectos web. En… Leer más
• 4: Tutorial de eventos de jQuery (Parte 4) - Oyentes de eventos Tutorial de jQuery de eventos (Parte 4) - Oyentes de eventos Hoy vamos a mejorarlo y realmente mostraremos dónde brilla jQuery: eventos. Si siguió los tutoriales anteriores, ahora debería tener una buena comprensión del código básico ... Leer más
• Debugging with Chrome Developer Tools Descubra los problemas del sitio web con Chrome Developer Tools o Firebug Descubra los problemas del sitio web con Chrome Developer Tools o Firebug Si ha estado siguiendo mis tutoriales de jQuery hasta ahora, es posible que ya haya encontrado algunos problemas de código y no sepa cómo para arreglarlos. Cuando se enfrenta con un bit de código no funcional, es muy ... Leer más
• 5: Tutorial de jQuery de AJAX (Parte 5): ¡AJAX todos ellos! Tutorial de jQuery (Parte 5): ¡AJAX todos ellos! A medida que nos acercamos al final de nuestra serie de mini tutoriales de jQuery, es hora de que echemos un vistazo más a fondo a una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con ... Leer más

¿Qué es la interfaz de usuario de jQuery y por qué debo usarla??

jQuery UI le ofrece todos los componentes necesarios para una aplicación web moderna con una GUI. A falta de una mejor descripción, es una colección de widgets..

Para obtener una idea rápida de lo que puede hacer con él, simplemente navegue por MakeUseOf. En la nuestra, el contenido es en realidad solo separado divs con una lista desordenada para actuar como un índice. Ejecuta la función de pestañas jQuery en ellas, y se convierten mágicamente en pestañas. ¡Increíble! Incluso puedes cargar contenido de pestañas a través de AJAX si quieres.

La página de Recompensas también usa un “ventana emergente modal” Cuadro de diálogo para confirmar la acción del usuario y devolver mensajes. Para enfocar la atención del usuario, puede hacer que el cuadro de diálogo atenúe el resto del contenido de la página hasta que finalice la interacción..

En nuestro sitio de respuestas, utilizamos el simple información sobre herramientas característica para proporcionar consejos sobre los botones.

jQuery UI realmente sobresale cuando se trata de formularios, dando acceso a una multitud de controles deslizantes y selectores. Soy un gran fan de la selector de fechas widget, que puede cargar encima de un cuadro de entrada de texto normal donde el usuario debe escribir una fecha.

Parece complicado ¿no? ¿Te imaginas codificar algo así en JavaScript puro? Así es como lo haces con jQuery UI:

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

No pasaré más tiempo explicando lo maravilloso que es porque las demostraciones oficiales de jQuery UI ofrecen una buena descripción general de todas las funciones disponibles, así como ejemplos de código simple. Ve a leerlo.

Añadiendo jQuery UI

La forma más sencilla de comenzar con la interfaz de usuario de jQuery es agregar las siguientes líneas a su encabezado, pero asegúrese de agregarlas DESPUÉS de la referencia principal de jQuery, ya que la interfaz de usuario de jQuery requiere la precarga de jQuery. Necesita tanto una referencia al script del plugin, como una hoja de estilo que contiene la descripción visual de esos elementos UI.

>