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 que terceros puedan 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 extienden la funcionalidad de jQuery, por lo que comienzan con la suposición de que está utilizando jQuery en su sitio.

2. Descargue una biblioteca adicional.

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

3. Añadir un 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 un en eso() función de la forma normal.

4. Llame a la función jQuery apropiado.

   La mayoría de los plug-ins sólo tiene que añadir nuevas funciones a jQuery. En su mayor parte, la ejecución de un plug-in requiere simplemente la aplicación de nuevas funciones 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 los libros de Andy. Usted puede encontrar muchos más plug-ins en el Registro Plugin jQuery.

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, usted inmediatamente reconoces porque probablemente ha utilizado docenas de veces como un usuario.) El ipwEditor no guarda sus páginas. Usted todavía necesita 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.

Flot

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

los flot programa le permite construir un gráfico de una matriz 2D de puntos de datos. Usted puede extraer los datos de una base de datos, cobrar a los usuarios, o lo que sea. los flot plug-in crea un lienzo y genera uno de una serie de gráficos estándar. Esta es una herramienta especialmente poderosa si usted necesita hacer gráficos en tiempo real en su sitio.

Nube

En los últimos años, se ha vuelto popular de una oferta visualizaciones de datos, o maneras para ilustrar datos. Uno de estos mecanismos es la nube de etiquetas. Esencialmente esta herramienta coloca un número de palabras en posiciones semi-aleatorios. En una nube de etiquetas típica, la posición, el tamaño y el 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 atribuir 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

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

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

Droppy

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 un 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 complemento muy popular. Muchas galerías de imágenes están disponibles para jugar. Galleria es un popular, poderosa galería de imágenes, 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 de la galería crea automáticamente imágenes en miniatura: El índice de las imágenes más pequeñas (miniaturas) se crean automáticamente y se añadirá 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 visualización permite ver la siguiente imagen: El comportamiento por defecto le permite fácilmente cambiar entre 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 las miniaturas van, qué tan grande la imagen de la pantalla es, y más.

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

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

1. Importe los scripts.

   Usted necesitará jQuery como siempre, así como jquery.galleria y la hoja de estilos CSS galleria.css.

2. Crear una lista de imágenes.

   Haga que cada elemento de la lista una imagen.

3. Agregue el Galleria () nodo a la lista.

   Eso es realmente todo lo que necesita hacer.

4. Juega con las opciones.

   Revise la documentación de algunas grandes opciones, incluyendo la capacidad de utilizar las 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.