Amusez-vous avec les plug-ins jQuery

La bibliothèque jQuery est impressionnant sur son propre, et lorsque vous ajoutez des bibliothèques comme jQuery UI et jQuery Mobile, vous pouvez voir exactement comment cet outil est puissant. Mais ce nest pas tout. Les développeurs de jQuery construits dans un mécanisme d'extension incroyable qui le rend facile pour des tiers pour ajouter de nouvelles extensions appelées fiche

-ins à jQuery.

Les détails sur chaque plug-in varier, mais en général, vous devez faire ce qui suit pour les faire fonctionner:

1. Lien vers jQuery.

   Tous ces plug-ins d'étendre les fonctionnalités de jQuery, afin qu'ils commencent avec l'hypothèse que vous utilisez jQuery dans votre site.

2. Télécharger une bibliothèque supplémentaire.

   Les plug-ins sont tous les fichiers principalement javascript, donc il faut soit installer sur votre propre serveur ou faire un lien. Certains des plug-ins inclure des fichiers et des instructions supplémentaires, alors assurez-vous de vérifier les détails sur le plug-in la page principale.

3. Ajoutez un init () fonction.

   La plupart des pages jQuery ont une sorte de initialisation, et presque tous les plug-in doit être initialisé. Soyez sûr d'ajouter une init () fonction de la manière habituelle.

4. Appelez la fonction jQuery appropriée.

   La plupart des plug-ins Il suffit d'ajouter de nouvelles fonctions à jQuery. Pour la plupart, l'exécution d'un plug-in nécessite simplement l'application de nouvelles fonctions jQuery à un ou plusieurs nœuds sur votre page.

Il ya littéralement des centaines et des centaines de grands plug-ins disponibles. Vous pouvez voir un tas d'entre eux les livres de Andy. Vous pouvez trouver beaucoup plus de plug-ins au Registre de plugins jQuery.

ipwEditor

Ce plug-in fraîche rend une partie de votre page Web éditable. Vous pouvez soit choisir une forme simple de l'édition ou quelque chose de plus sophistiqué avec l'outil de FCKedit. (Après vous commencez à jouer avec cet outil, vous reconnaîtrez immédiatement parce que vous avez probablement utilisé des dizaines de fois en tant qu'utilisateur.) Le ipwEditor ne sauvegarde pas vos pages. Vous aurez toujours besoin d'une sorte d'AJAX et le codage côté serveur pour le faire. Toutefois, cela est un moyen très facile de construire un CMS simpliste.

Flot

Parfois, vos pages Web doivent afficher un certain type de données. Il ya un certain nombre de plug-ins graphiques puissants que vous pouvez utiliser. Une option facile et puissant est appelé Flot.

La Flot programme vous permet de créer un graphique à partir d'un tableau 2D de points de données. Vous pouvez extraire les données à partir d'une base de données, recueillir auprès des utilisateurs, ou que ce soit. La Flot plug-in construit une toile et génère un d'un certain nombre de cartes standard. Ceci est un outil particulièrement puissant si vous avez besoin de faire des graphiques en temps réel sur votre site.

Nuage

Au cours des dernières années, il est devenu populaire à l'offre visualisations de données, ou des moyens pour illustrer données. Un tel mécanisme est le nuage de tags. Essentiellement cet outil place un certain nombre de mots dans des positions semi-aléatoires. Dans un nuage typique, la position, la taille et la couleur des mots sont utilisés pour représenter la force relative et la relation entre les termes. La nuage jQuery plug-in rend très facile à construire vos propres nuages ​​de tags. Vous pouvez convertir toute liste HTML à un nuage. Il suffit d'ajouter une option valeur attribuer à chaque

élément de la liste, et le module d'extension modifie automatiquement la taille et le poids de l'élément en fonction de la valeur.

Tablesorter

AJAX programmes impliquent souvent la récupération de données, qui est fréquemment affichées dans un tableau HTML. Le plug-in de tablesorter permet à l'utilisateur de trier facilement une table en cliquant sur un titre.

Lorsque l'utilisateur clique sur la première tête de nom, la table est triée par ordre alphabétique des prénoms. Cliquez à nouveau sur la première tête de nom pour trier par prénom dans l'ordre inverse. Le comportement par défaut de la tablesorter vous permet de trier sur le champ d'en-tête.

Droppy

Les menus déroulants sont devenus un outil de convivialité important dans les sites Web. Il ya des centaines de plug-ins jQuery pour gérer cette fonction. Un bon choix est Droppy car il est très facile à utiliser.

La plupart des systèmes de navigation sont finalement imbriquées listes de liens. Le plug-in Droppy prend simplement une ul avec un tas de liens (imbriquée aussi profondément que vous le souhaitez) et le transforme en un menu déroulant bien formaté.

Galleria

Galeries d'images sont un autre sujet de plugin très populaire. Beaucoup de galeries d'images sont disponibles pour jouer avec. Galleria est une galerie d'image populaire, puissant, et ne nécessite pas de script côté serveur.

La galerie d'image par défaut a des fonctionnalités intéressantes:

• Les images sont pré-chargés: Chaque image est chargé en mémoire lorsque la page initialise, donc il n'y aura pas de retard lorsque l'utilisateur bascule entre les images.

• L'outil de la galerie crée automatiquement des images miniatures: L'index (vignettes) petites images sont automatiquement créés et ajoutés à la page.

• En cliquant sur une vignette développe dans la zone d'affichage: La plus grande zone de visualisation contient une version agrandie de l'image actuelle.

• En cliquant sur la zone d'affichage vous permet d'afficher l'image suivante: Le comportement par défaut vous permet de facilement faire défiler les images avec les clics de souris.

• La sortie est basée sur CSS: Utilisez le fichier CSS inclus pour gérer l'affichage de votre page, y compris comment et où les vignettes vont, comment grand l'image d'affichage est, et plus encore.

• Il dispose de nombreuses options: Le plug-in de Galleria est très personnalisable. Il dispose de nombreuses options avancées. Consultez la documentation pour plus.

Utilisation Galleria est un peu comme tout autre jQuery plug-in. Ajouter les scripts appropriés, écrire quelques HTML de base, et d'ajouter un nœud jQuery magique:

1. Importez les scripts.

   Vous aurez besoin de jQuery comme toujours, ainsi que jquery.galleria et la feuille de style CSS de galleria.css.

2. Créer une liste d'images.

   Faire de chaque élément de la liste une image.

3. Ajouter le galleria () le noeud à la liste.

   Cela est vraiment tout ce que vous devez faire.

4. Jouez avec les options.

   Regardez la documentation de quelques grandes options, y compris la possibilité d'utiliser les vignettes personnalisées, indiquez votre propre conteneur de sortie, et exécuter des fonctions de rappel lorsque l'utilisateur sélectionne une image ou une vignette.