Diversión con jquery plug-ins

La librería jQuery es impresionante por sí mismo, y cuando se agrega librerías como jQuery UI y jQuery Mobile, puede ver exactamente lo poderoso que esta herramienta es. Pero eso no es todo. Los desarrolladores de jQuery construido en un mecanismo de extensión increíble que hace que sea fácil para los terceros añadir nuevas extensiones llamadas enchufe-ins a jQuery.

Los detalles de cada plug-in variar, pero en general, hay que hacer lo siguiente para que funcionen:

1. Enlace a jQuery.

   Todos estos plug-ins de ampliar la funcionalidad de jQuery, por lo que comienzan con la suposición de que estás usando jQuery en su sitio.

2. Descargar una biblioteca adicional.

   Los plug-ins son todos los archivos principalmente de javascript, así que o bien se instalan en su propio servidor o hacer un enlace. Algunos de los plug-ins incluyen archivos e instrucciones adicionales, así que asegúrese de comprobar los detalles sobre el plug-in de la página principal.

3. Añadir una en eso() función.

   La mayoría de las páginas de jQuery tienen algún tipo de inicialización, y casi todos los plug-in tiene que ser inicializado. Asegúrese de añadir una en eso() función de la forma habitual.

4. Llame a la función jQuery apropiado.

   La mayoría de los plug-ins simplemente añadir nuevas funciones a jQuery. En su mayor parte, la ejecución de un plug-in requiere simplemente la aplicación de las nuevas funciones de jQuery a un nodo o nodos en su página.

Hay literalmente cientos y cientos de grandes plug-ins disponibles. Se puede ver un montón de ellos en Libros de Andy. Usted puede encontrar muchos más plug-ins en el jQuery Plugin Registro.

ipwEditor

Este fresco plug-in hace que una parte de su página web editable. Se puede elegir entre una forma simple de edición o algo más sofisticado con la herramienta FCKedit. (Después de empezar a jugar con esta herramienta, reconocerá inmediatamente, ya que probablemente se ha utilizado docenas de veces como un usuario.) La ipwEditor no guarda sus páginas. No obstante, deberá algún tipo de AJAX y la codificación del lado del servidor para hacer eso. Sin embargo, esta es una manera muy fácil de construir un CMS simplista.

Video: Create Your First jQuery Plugin

Flot

A veces sus páginas web deben mostrar algún tipo de datos. Hay una serie de potentes plug-ins de gráficos que puede utilizar. Una opción fácil y potente se llama Flot.

Video: Build jQuery Plugin (with example)

los Flot programa le permite construir un gráfico de una matriz 2D de puntos de datos. Puede extraer los datos de una base de datos, recoger parte de los usuarios, o lo que sea. los Flot plugin crea un lienzo y genera uno de una serie de gráficos estándar. Se trata de una herramienta especialmente poderosa si lo que necesita hacer gráficos en tiempo real en su sitio.

Nube

En los últimos años, se ha hecho popular a la oferta visualizaciones de datos, o maneras para ilustrar datos. Uno de estos mecanismos es la nube de etiquetas. Esencialmente esta herramienta pone un número de palabras en posiciones semi-aleatorios. En una nube típica etiqueta, la posición, tamaño y color de las palabras se utilizan para representar la fuerza relativa y la relación de los términos. los nube jQuery plug-in hace que sea muy fácil de construir sus propias nubes de etiquetas. Puede convertir cualquier lista de HTML a una nube de etiquetas. Sólo tiene que añadir una opción valor atributo a cada elemento de la lista, y el plug-in cambia automáticamente el tamaño y el peso del elemento de acuerdo con el valor.

tablesorter

AJAX programas a menudo implican la recuperación de datos, que con frecuencia se muestran en una tabla HTML. los plug-in tablesorter permite al usuario ordenar fácilmente una mesa haciendo clic en un encabezado.

Cuando el usuario hace clic en el encabezado de la primera nombre, la tabla está ordenada por nombres en orden alfabético. Haga clic en la primera cabecera de nombre otra vez para ordenar por nombre en orden inverso. El comportamiento por defecto de la tablesorter le permite ordenar por cualquier campo de cabecera.

Droppy

Los menús desplegables se han convertido en una herramienta importante en la usabilidad de sitios web. Hay cientos de jQuery plug-ins para manejar esta función. Una buena opción es Droppy porque es muy fácil de usar.

La mayoría de los sistemas de navegación son en última instancia anidar listas de enlaces. El plug-in Droppy simplemente toma una ul con un montón de enlaces (anidados tan profundamente como lo desea) y lo convierte en un menú desplegable con un formato agradable.

Galleria

galerías de imágenes son otro tema muy popular plug-in. Muchas galerías de imágenes están disponibles para jugar. Galleria es una poderosa galería popular, la imagen, y no requiere ningún tipo de script del lado del servidor.

La galería de imágenes por defecto tiene algunas funciones muy útiles:

• Las imágenes son pre-cargado: Cada imagen se carga en memoria cuando la página se inicia, por lo que no habrá ningún retraso cuando el usuario cambia entre imágenes.

• La herramienta crea automáticamente la galería de imágenes en miniatura: Los (en miniatura) indexar imágenes más pequeñas se crean automáticamente y se añaden a la página.

• Al hacer clic en la miniatura se expande en el área de visualización: La mayor área de visualización contiene una versión ampliada de la imagen actual.

• Al hacer clic en el área de visión le permite ver la imagen siguiente: El comportamiento por defecto le permite rápida desplazarse por las imágenes con clics del ratón.

• La salida se basa en CSS: Utilice el archivo CSS incluido para administrar la visualización de la página, incluyendo cómo y dónde van las miniaturas, cuán grande es la imagen de la pantalla, y mucho más.

• Tiene muchas opciones: La Galleria plug-in es muy adaptable. Cuenta con muchas opciones avanzadas. Consulte la documentación para más.

Video: jQuery Tutorial - 118 - Creating a basic plugin

Usando Galleria es muy similar a cualquier otra jQuery plug-in. Añadir los scripts apropiados, escribir algo de HTML básico, y añadir un nodo mágica jQuery:

1. Importar los guiones.

   Tendrá que jQuery como siempre, así como jquery.galleria y la hoja de estilo CSS galleria.css.

2. Crear una lista de imágenes.

   Hacer que cada elemento de la lista una imagen.

3. Añade el Galleria () nodo a la lista.

   Eso es realmente todo lo que necesita hacer.

4. Juega con las opciones.

   Mirar por encima de la documentación de algunas grandes opciones, incluyendo la capacidad de utilizar miniaturas personalizadas, especifique su propio contenedor de salida, y ejecutar las funciones de devolución de llamada cuando el usuario selecciona una imagen o imágenes en miniatura.