Anuncio
En nuestra lección final en esto jQuery para principiantes serie de tutoriales, vamos a echar un vistazo a jQuery UI - El complemento jQuery más utilizado para agregar interfaces gráficas de usuario a aplicaciones web. Desde elegantes formas y efectos visuales, hasta widgets arrastrables, hilanderos y cuadros de diálogo: jQuery UI le brinda el poder de crear ricas UI web.
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 importarle? Hacer que la web sea interactiva: una introducción a jQueryjQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos utilizan: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, más compatible y más utilizada ... Lee mas
- 1: Selectores y conceptos básicos Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa 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 un código y aprendamos cómo ... Lee mas
- 2: métodos Introducción a jQuery (Parte 2): Métodos y funcionesEsto es parte de una introducción continua para principiantes a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Lee mas
- 3: Esperando carga de página y funciones anónimas Introducción a jQuery (Parte 3): Esperando a que la página se cargue y funciones anónimasSe puede decir que jQuery es una habilidad esencial para el desarrollador web moderno, y en esta miniserie breve espero brindarle el conocimiento para comenzar a utilizarla en sus propios proyectos web. En... Lee mas
- 4: eventos Tutorial de jQuery (Parte 4): oyentes de eventosHoy vamos a mejorarlo y realmente mostraremos dónde brilla jQuery: eventos. Si siguió los tutoriales anteriores, ahora debería tener una comprensión bastante buena del código básico ... Lee mas
- Depuración con las herramientas de desarrollador de Chrome Resuelva los problemas del sitio web con las herramientas de desarrollador de Chrome o FirebugSi ha estado siguiendo mis tutoriales de jQuery hasta ahora, es posible que ya se haya encontrado con algunos problemas de código y no sepa cómo solucionarlos. Cuando se enfrenta a un bit de código no funcional, es muy ... Lee mas
- 5: AJAX Tutorial de jQuery (Parte 5): ¡AJAX a todos!A medida que nos acercamos al final de nuestra serie de mini-tutoriales jQuery, ya es hora de que analicemos en profundidad una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con ... Lee mas
¿Qué es jQuery UI y por qué debería usarlo?
jQuery UI le brinda 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 tener una idea rápida de lo que puede hacer con él, simplemente navegue por MakeUseOf. En el nuestro, el contenido es en realidad solo separado divs con una lista desordenada para actuar como índice. Ejecute la función de pestañas jQuery en ellos y mágicamente se convertirán en pestañas. ¡Increíble! Incluso puede cargar contenido de pestañas a través de AJAX si lo desea.
La página de Recompensas también utiliza un cuadro de diálogo "ventana emergente modal" 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, usamos el simple información sobre herramientas característica para proporcionar pistas sobre los botones.
jQuery UI realmente se destaca cuando se trata de formularios, dando acceso a una multitud de controles deslizantes y selectores. Soy un gran admirador de selector de fechas widget yo mismo, que puede cargar encima de un cuadro de entrada de texto normal donde se supone que 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 increíble que es porque el Demostraciones oficiales de jQuery UI ofrece una buena visión general de todas las funciones disponibles, así como ejemplos de código simple. Ve a leerlo.
Agregar jQuery UI
La forma más sencilla de comenzar con jQuery UI es agregar las siguientes líneas a su encabezado, pero hacer asegúrese de que se agreguen DESPUÉS de la referencia principal de jQuery, ya que jQuery UI requiere que jQuery esté precargado. Necesita tanto una referencia al script de complemento como un hoja de estilo que contiene la descripción visual de esos elementos de la interfaz de usuario.