Outils pour utilisateurs

Outils du site


cours2012:programmation:jquery:utilisation_d_un_plugin_jquery_parallaxe

Utilisation d'un plug-in jQuery (parallaxe)

Souvent, jQuery est utilisé pour les effets obtenus en utilisant des extensions réalisées par d'autres : des plug-ins !

Ce type d'effets est souvent découvre en lisant des -revues- (aujourd'hui appelé des blogs) : Zoom sur l'effet parallaxe - Alsacreations

Remarques : vous pouvez ; vous abonnez aux -revues- (blogs) en utilisant les flux RSS1). Cela se fait en utilisant un Agrégateur

Un plug-in

Vous pouvez trouver des plug-ins sur un site dédier à cette tâche : http://plugins.jquery.com

Et trouver ceux qui font l'effet désiré.

Lequel prendre ? :

  • A-t-il été mis à jour récemment ?
    • Cela marque l'intérêt que lui porte son auteur et donc les chances qu'il soit utilisable sans problème.
  • Et-il utiliser par d'autre ?
    • Mine de rien, si tout le monde l'utilise, c'est que cela doit être intéressant.
  • En lisant la documentation et regardant les exemples (et le code, vive Firebug.

Comment l'utiliser ?

En lisant la documentation !

Non, je ne plaisante pas ! Tous les plug-ins ont des particularités et s'utilisent différemment. Alors, lisez la documentation et regardez les exemples.

Si cela ne fonctionne pas ? Pas de problèmes : vous ne demandez. En me montrant un exemple (qui ne fonctionne pas, mais qui devrait) ou en me décrivant le problème par mail ([email protected]) sans oublier de joindre une archive d'un exemple (qui ne fonctionne pas).

Généralement, cela me prend peu de temps pour corriger vos problèmes (si vous avez joint un exemple). Alors, n'hésitez pas.

Sinon, des pistes pour débuter :

  • Dans votre page HTML
    • Charger le code de jQuery : Eg. dans HEAD (ou bas de page)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  • Ensuite, copier le ou les fichiers JavaScript de plug-in dans un sous dossier. Puis ajouter après le chargement de jQuery, le chargement des fichiers du plug-in.
<script src="js/le-plug-in.js"></script><!--ici on a copié les fichiers dans un dossier 'js' -->
  • Si le plug-in était également fourni avec des fichiers CSS : également les lier à votre page.
  • Ensuite, ajoutez votre code JavaScript qui utilise le plug-in :
<script src="js/mon-code.js"></script>
  • Un problème fréquent est de ne pas charger les fichiers JavaScript dans le bon ordre : jQuery, plug-in et après votre code.

Maintenant, relire la documentation :

  • Quelle(s) commande(s) utilisé pour appliquer le plug-in ? Eg. il s'utilisent comme les autres fonctions de jQuery :
jQuery(function ($) {
 
  $('.selecteur-css').lePlugIn(/* éventuels param. */);
 
});
  • De plus en plus, ils utilisent des informations à ajouter à votre code HTML : (des classes CSS ou des attributs data
  <div class="plug-in-xxx" data-xxx="yyy">

Mais tout cela est marqué dans la documentation !

Si vous avez un problème :

  • Relisez la documentation du plug-in.
  • Regardez le code des exemples.
  • Essayer de partir d'un exemple fournit.
  • Faire une archive du code qui ne fonctionne pas et me l'envoyer par mail ([email protected]).
    • Quand :
      • On me donne un code que je peux rapidement tester et modifier.
      • On me décrit le problème.
    • Alors la réponse est très rapide.
1) avant que Google ou Facebook les interdise
cours2012/programmation/jquery/utilisation_d_un_plugin_jquery_parallaxe.txt · Dernière modification: 2013/04/08 19:30 (modification externe)