Jquery para principiantes (parte 6) - jquery ui y lectura adicional

Vídeo: Ajax, JQuery, JQuery UI para principiantes con Ejemplos Prácticos - Clase en Vivo

En nuestra última lección en este jQuery para principiantes serie de tutoriales, vamos a echar un breve vistazo a jQuery UI - el plugin jQuery más ampliamente utilizado para añadir interfaces gráficas de usuario para aplicaciones web. A partir de las formas de fantasía y efectos visuales, a los widgets que pueden arrastrarse, hiladores y cuadros de diálogo - jQuery UI le da el poder para crear interfaces de usuario rica red.

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

• Introducción: ¿Qué es jQuery y por qué te importa?
• 1: selectores y Fundamentos
• 2: Métodos
• 3: A la espera de carga de la página y funciones anónimas
• 4: Eventos
• Depurar con herramientas de desarrollo de Chrome
• 5: AJAX

¿Qué es jQuery UI y por qué debo usar?

jQuery UI le da todos los componentes necesarios para una aplicación web moderna con una interfaz gráfica de usuario. 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 navegar alrededor MakeUseOf. En el nuestro, el contenido es en realidad separada divs con una lista desordenada de actuar como un índice. Ejecutar la función de pestañas jQuery en ellos, y que mágicamente se convierten en fichas. ¡Increíble! Incluso puede cargar el contenido a través de AJAX pestaña si lo desea.

Vídeo: Como utilizar Datepicker - Jquery-UI [WEB]

La página de recompensas también utiliza un cuadro de diálogo “popup modal” para confirmar la acción del usuario y los mensajes de retorno. Para enfocar la atención del usuario, puede hacer que el cuadro de diálogo atenuar el resto del contenido de la página hasta que se termine la interacción.

En nuestro respuestas sitio, utilizamos la sencilla información sobre herramientas función para proporcionar consejos sobre los botones.

jQuery UI realmente sobresale cuando se trata de formas, que da acceso a una multitud de deslizadores y recolectores. Soy un gran fan de la selector de fechas haremos el mismo, que se puede cargar en la parte superior de un cuadro de entrada de texto normal, donde se supone que el usuario escriba una fecha.

Se ve muy complicado, no lo hace? ¿Se imaginan la codificación algo así en javascript puro? Así es como lo haces con jQuery UI:

ps"#dateField").selector de fechas()-

No voy a pasar más tiempo explicando lo impresionante que es debido a que las demostraciones oficiales jQuery UI dan una buena visión general de todas las funciones disponibles, así como ejemplos de código simples. Ir leerlo.

Vídeo: Web Dev - 2/6/2015 - jQuery UI Intro

Adición de jQuery UI

La forma más sencilla de empezar a trabajar con jQuery UI es añadir las siguientes líneas a su cabecera - pero asegúrese de que éstos se añaden después de la referencia principal de jQuery, ya que requiere jQuery jQuery UI para ser pre-cargado. Es necesario tanto una referencia a la secuencia de comandos plug-in, y una hoja de estilo que contiene la descripción visual de los elementos de interfaz de usuario.

En este caso, hemos relacionado con el tema llamado “ui-ligereza” -, pero hay una buena selección de temas pre-hecho se puede elegir de aquí, o crear el suyo propio. Tenga en cuenta que si decide crear su propio tema, no va a ser alojado en Google - elegir un pre-hechos uno, y ese enlace anterior funcionará bien cambiando el nombre del tema.

En WordPress, creo que el método anterior para ser la forma más fácil de incluirlo - Sólo asegúrese de que lo haga después de wp_head () ha sido llamado. El método oficial de WordPress es utilizar wp_enqueue_script () sin embargo, se detalla en esta pregunta StackExchange.

Vídeo: jQuery AJAX para Realizar Consultas con PHP y MySQL - Estilos con Bootstrap y jQuery UI (6/12)

Personalización de la Descarga

Una característica interesante del sitio de descarga de interfaz de usuario jQuery es que se puede personalizar las características que desee, lo que reduce el tamaño total del javascript. El tamaño total de la secuencia de comandos con todo lo permitido (Sin incluir una hoja de estilo, que tendrá que incluir también) es sobre 230kb. Así, mientras que podría reducir el tamaño de eso con una descarga de encargo, si usted está utilizando más del 50% del conjunto de características, que no es realmente vale la pena. Mediante el uso de la norma, la biblioteca completa, se puede hacer uso de la versión Google Hosted - que es probable que ya sea almacenado localmente en el navegador de los usuarios de todos modos. Si sólo necesita unas pocas características, sin embargo, hacer una descarga personalizada y servir un archivo minimizado de forma local desde su sitio.

recursos

Hemos llegado al final de nuestro mini-serie, por lo que a dónde ir desde aquí? Por suerte, este es el Internet, y Google es una cosa:

• Una de las mejores maneras de aprender es empezar a usarlo para construir cosas interesantes. Aquí hay 19 tutoriales de jQuery únicos para sus proyectos web.
• 33 (en su mayoría imágenes relacionadas) Ideas jQuery.
• Smashing Magazine sigue siendo un favorito sólido en mi feed RSS, y tienen un enorme archivo de material relacionado con jQuery para aprender.
• Tuts + tiene una serie de vídeo por 30 días en jQuery que vale la pena ver, con más de 40.000 abonados hasta el momento!
• Una colección de enlaces a tutoriales de jQuery, 53 de 1stwebdesigner.

También me gustaría sugerir el aprendizaje de algunos básicos PHP, que necesitará para manejar cualquier AJAX o procesamiento del lado del servidor de formas. Recuerde, jQuery es sólo un lenguaje del lado del cliente que se ejecuta en el navegador, por lo que su fantástica nueva aplicación web no va a hacer mucho sin algún tipo de procesamiento del lado del servidor. WordPress, por supuesto, es una gran manera de comenzar a aprender PHP mediante la personalización de temas y escribir sus propios plugins.Cómo Ajax-ify Sus comentarios WordPressCómo Ajax-ify Sus comentarios WordPressPor defecto, el sistema de comentarios de WordPress es lamentablemente inadecuada. Se podría cambiar a un sistema de terceros como Livefyre o Disqus, pero si usted prefiere mantener todo en su casa o algún otro tipo de ...Lee mas

Ahora, tome un momento para palmadita en la espalda por haber venido hasta aquí - usted es impresionante - y sentir a compartir cualquier comentario o tal vez algunos recursos adicionales en los comentarios libres.