jQuery Tools, une alternative légère à jQuery UI

05/06/2009
Web Développement et Design Allez aux commentaires

jQuery Tools est une série de plugins d'interface dans le même style que jQuery UI. Il est moins complet mais beaucoup plus léger, de plus il contient quelques fonctions intéressantes qui méritent que l'on s'y attarde.

jquery-tools-535-300x137

Voici les différents composants de jQuery Tools:

  • Tabs: système d'onglets et d'accordéons
  • Tooltip
  • Scrollable: système de défilement avancé, avec ou sans navigation, automatique ou pas !
  • Overlay: effet de pop-up (lightbox) des plus sympa
  • Expose: très sympa pour mettre en évidence une partie d'un page !
  • Flashembed: pour intégrer du flash

Et il existe toutes une partie consacrée à l'interaction avec le lecteur FLV gratuit "Flow PLAYER", ce qui est tout à fait compréhensible étant donné que jQuery Tools fait parti de ce même projet !

Démonstration

Et une petite vidéo rapide juste pour voir tout ça en mouvement:

Téléchargement

Rendez-vous sur cette page, vous pourrez éventuellement cocher ou décocher les éléments que vous désirez. Et pour jQuery c'est ici.

Installation

Intégration du script jQuery Tools + jQuery

Code à placer entre les balises HTML <head> et </head>

<!-- Ici on intègre jQuery -->
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<!-- Et maintenant jQuery Tools -->
<script type="text/javascript" src="jquery.tools.min.js"></script>

On notera qu'ils fournissent une version hébergée par leur soin qui inclue d'office jQuery ainsi que les principaux plugins, dans ce cas remplacez le code ci-dessus par:

<script src="http://cdn.jquerytools.org/1.0.0/jquery.tools.min.js"></script>

L'avantage c'est que vous bénéficierez du téléchargement parallèle (CDN) puisqu'il se trouve sur un autre domaine.

Intégration des différents plugins

La documentation officielle est bien faite et très complète, alors je ne vais pas tous retaper ici. Je vous invite donc à suivre les liens suivants selon ce que vous désirez implanter.

Conclusions

Pour seulement 6ko (18ko non gzippé) hors jQuery, pourquoi se priver ?! Même si il ne dispose pas d'autant de plugins que jQuery UI, il inclut tout de même les principaux effets d'interface.

-----

Articles relatifs

  1. Nicolas F.
    05/06/2009 à 17:47 | #1
    Répondre | Citer

    Sympa, je ne connaissais pas. A examiner pour de futurs sites. Y’a moyen de profiter de CDN pour JQuery seul et prototype également ?

  2. k-ny
    05/06/2009 à 17:51 | #2
    Répondre | Citer

    @Nicolas F.
    Tu peux profiter du CDN pour toutes les grosses librairies javascript (et même jquery UI) via Google Ajax Libraries API (exemple) ;)

  3. art2code
    06/06/2009 à 01:23 | #3
    Répondre | Citer

    Excellent! je ne connaissais pas non plus!
    à suivre …

  4. Asno
    17/06/2009 à 10:27 | #4
    Répondre | Citer

    Bonjour,

    Est-il possible d’utiliser les deux au même temps ?

    J’aimerais utiliser slider de jQuery UI et tooltips de jQuery Tools

    Merci d’avance

  5. ASno
    08/07/2009 à 11:00 | #5
    Répondre | Citer

    Quelqu’un le sait comment faire ???

  6. Araneo
    01/09/2009 à 13:16 | #6
    Répondre | Citer

    @ASno
    tu peux le faire sans problème a partir du moment ou tu n’utilise pas des objet qui ont le même nom , c’est la seule limitation (par exemple pour les Tab, tu peux utiliser soit celui de JQuery UI ou celui de JQuery Tools mais pas les 2)
    je les utilise conjointement sans PB j’ai les Tab de UI avec a l’intérieur les Scrollable de Tools par exemple

  1. Pas encore de trackbacks