33 plugins pour Mootools que vous devriez connaitre !

Boris — Mon, 16 Apr 2007 21:50:13 +0200

Lightbox-like

SmoothBox, par Boris Popoff

La conversion pour Mootools de Thickbox, une lightbox-like fonctionnant sous jQuery. Elle permet d’afficher :

Une image seule

Un groupement de plusieurs images

Du contenu inline

Du contenu via Iframe

Du contenu AJAX

Elle permet également d’afficher, si vous le souhaitez, du flash, en passant par l’iframe. Le seul autre script presque aussi polyvalent est SqueezeBox d’Harald Kirschner, mais il ne fait pas l’iframe ' class='wp-smiley' /> Sinon, les deux scripts font à peu près le même poids, 11k pour smoothbox, 10k pour SqueezeBox.

SqueezeBox, par Harald Kirschner

Une des meilleures lightbox-like pour mootools que je connaisse à l’heure actuelle ! Par contre, attention, je crois que c’est encore en cours de dév.

Elle permet d’afficher :

Du contenu Inline

Du contenu Ajax

Des images

Une SmoothGallery

Du contenu Flash

Vous pouvez aussi spécifier la taille. Il manque juste l’iframe, qui, il est vrai est un élément déprécié. Si vous voulez absolument l’iframe vous pouvez utiliser SmoothBox ' class='wp-smiley' />

Je trouve ce script plutôt fluide, et assez joli, surtout le bouton “fermer”. Le détail qui tue, mais assez discret, les angles légèrement arrondis.

Slimbox, par Christophe Beyls

Slimbox est un clone du célèbre Lightbox JS v2.0, par Lokesh Dhakar. Le script pèse 7kb non compressé. Tout comme son grand frère il permet d’afficher des images ou des groupes d’images avec de jolis effets.

Slimbox Extended, par yukikun

Un clone de Slimbox avec la possibilité d’afficher une page web via iframe. Vous pouvez toujours afficher des images, et vous pouvez désormais en plus spécifier la page. L’auteur nous informe qu’il a également corrigé quelques bugs qui survenaient sous IE6.

MOOdalBox, par r4zv4n

MOOdalBox est une fenêtre popup inline, souvent appelée “modal box”, utilisée pour afficher du contenu chargé via une requête AJAX. Ce script est basé sur Slimbox, les effets sont les mêmes.

GMapsOverlay, par André Fiedler

Une lightbox permettant d’afficher une map google.

Videobox, par Faruk Can

Une lightbox permettant d’afficher des vidéos Youtube, Google video, etc …

Phatfusion’s Lightbox, par Phatfusion

Encore un clone de Slimbox qui ne change en fait pas grand chose. Il permet en gros d’ajouter une description en HTML.

Tableaux avancés

Mootable, par Owl Watch

Un plugin tout simplement excellent pour améliorer vos tableaux. Peut prendre comme source un objet Javascript, un tableau Javascript, ou un tableau HTML présent sur la page (caché via display:none).

Une fois le script exécuté, vous avez un très joli tableau avec effet zébré, et des lignes qui se colorent en jaune lors du passage de la souris. Vous pouvez trier le tableau, et redimensionner les colonnes. Cerise sur le gâteau, dans le cas du tableau HTML cela reste accessible, puisque si l’utilisateur a désactivé le Javascript, il verra tout de même le tableau original. Bref, Mootable est un plugin indispensable si vous voulez mettre es tableaux un peu évolués sur votre site ou dans votre appli web.

Sortable Table, par Phatfusion

Un autre plugin permettant d’avoir des tableaux avancés. Par rapport à Mootable, Sortable table permet en plus de filtrer les données via les champs présents en haut du tableau. Vous ne pouvez pas redimensionner les colonnes, par contre, elles sont bien entendu triables ' class='wp-smiley' /> Esthétiquement, je préfère Mootable, mais bon, le CSS, ca se modifie ' class='wp-smiley' />

Table Row AND Column highlighting, par Chris Esler

Un script qui permet de mettre en évidence les lignes ET les colonnes d’un tableau quand on fait glisser la souris au dessus d’une de ses cellules. Sympa, après, je ne sais pas si cela est très utile.

Editeurs de texte

PostEditor 2.0, par IceBeat

PostEditor n’est pas un éditeur WYSIWYG, mais plutôt une sorte de textarea très amélioré. Il permet entre autres de rendre possible l’utilisation de la touche tabulation, l’utilisation de Snippets, la fermeture de ces mêmes Snippets ainsi que des crochets, parenthèses, etc, etc …

Valerio de Mootools a apparemment été convaincu, puisqu’il la mis sur son forum ' class='wp-smiley' />

Most tiny WYSIWYG you ever seen, par Yaroslaff Fedin

Un éditeur de texte WYSIWYG qui pèse à peine 700 bytes. Il supporte entre autres les raccourcis claviers. Vous pouvez switcher facilement entre les vues “source” et “édition”.

inlineEdit, par Justin Maier

Un plugin de 4kb permettant d’éditer directement du texte présent sur une page web, et d’assigner un événement onChange pour, par exemple, enregistrer les modifications dans une base.

Slideshows

SmoothGallery, par Jonathan Schemoul

Une galerie d’images très réussie ressemblant pas mal à certaines choses qui existent déjà en flash. Vous pouvez la passer en mode slideshow (défilement automatique), ou gallery (défilement manuel). Le script fonctionne sous Mootools 1.0, et fait 16kb. Pour ceux qui utilisent encore la 0.83 ou moo.fx 1 ou 2, vous pouvez télécharger l’ancienne version, Smooth Slideshow v2.1.

Slideshow, par Aeron Glemann

Comme son nom l’indique, un plugin permettant de faire défiler une série d’image. Sur la démo, Les images sont constament en mouvement, et s’enchainent par défaut via des fondus, mais vous pouvez néanmoins choisir l’enchainement parmis 6 transitions différentes !

Phatfusion’s Slide Show, par Phatfusion

Un autre slideshow, avec 3 transitions différentes. Cette fois ci, vous avez les miniatures sur la gauche, et l’image s’affiche sur la droite. C’est donc un autre style que le précédent, peut être un peu moins original, mais tout aussi efficace.

Menus

Fancy Menu, par Guillermo Rauch

Un joli menu qui ressemble à du flash, mais ce n’est pas du flash ' class='wp-smiley' /> En plus, cela ne pèse que 1.5kb ! A voir !

Image Menu, par Phatfusion

Un très joli menu customizable a priori inspiré par celui du site de Mootools. Idem que le précédent, on dirait du flash, mais cela n’en est pas, et c’est accessible !!

Fisheye, par Chris Esler

Un autre script en cours de développement, et qui n’est donc pas exempt de quelques bugs. Il permet de reproduire le dock de MacOSX. Cela existait déjà sans librairies, Chris l’a MOOifié ' class='wp-smiley' />

Rounded corners

Transcorners, par Yaroslaff Fedin

Un script de 4kb pour donner des angles arrondis à vos divs, uniquement en Javascript. Je trouve cette méthode préférable à celles utilisant du CSS et des images car cela est plus accessible. En effet, si la personne a un vieux navigateur, on ne l’alourdit pas avec des images inutiles.

Rounded Corners, par Phatfusion

La version “Phatfusion” de nifty corners. Très simple à mettre en oeuvre, et a l’air de mieux marcher que Transcorners, qui avait des petits bugs la dernière fois que je l’ai essayé.

Fenêtres

Windoo, par Harald Kirschner

Un plugin permettant d’afficher des fenêtres flottantes, déplacables et redimensionnables, avec du contenu à l’intérieur. Ce script ne semble néanmoins pas être tout à fait finalisé, mais je vous le met quand même pour que vous le voyez.

Mootools Window, par Chris Esler

Un script qui permet de créer une fenetre à la Windows, redimensionnable et déplacable. Si le CSS est plutot joli, et imite bien le système d’exploitation de Microsoft, il n’y a par non plus d’innovation énorme avec ce plugin.

MooPrompt, par CCC

Une sorte de remplacement pour les alerts / confirms javascripts, le tout avec des effets C’est toujours sympa si vous développez une application web, étant donné que cela ne bloque pas le navigateur.

Window.Growl, par IceBeat

Un système de fenêtres d’alerte basé sur Growl pour Mac. C’est simple et joli, avec de beaux “rounded corners” ' class='wp-smiley' />

Onglets

MooTabs, par SilverTab

Un plugin léger (2.8kb) permettant de créer facilement des onglets avec de jolis effets.

Digitarald’s Tabs, par Harald Kirschner

Une conversion d’un script de création d’onglets, à l’origine pour le framework prototype. Il propose des fonctionnalités bien plus avancées que MooTabs, il est un peu plus lourd aussi. Vous avez des methodes pour savoir quel onglet est actif, mettre la barre d’onglet en haut ou en bas, ajouter / retirer un onglet, locker un onglet, mettre à jour le contenu d’un onglet via AJAX ou non. Je m’étais servi de la version originelle pour créer un tchat en PHP/MySQL/Javascript, et j’avais trouvé ce script plutôt bon. A essayer !

Validation de formulaires

Validate, par Phatfusion

Un script permettant de valider les données d’un formulaire. Vous pouvez valider plusieurs formulaires sur la même page indépendamment. Si l’un des champs entré est invalide, une popup apparaîtra avec un message avertissant l’utilisateur.

Si vous le souhaitez, vous pouvez étendre l’objet pour rajouter vos propres validations ' class='wp-smiley' /> Actuellement, les validations suivantes sont disponibles : email, number, date, postcode

Autres

mooRainbow, par w00fz

Un color picker, qui vous permet de choisir visuellement des couleurs via une fenêtre qui ressemble à celle de windows. Pourrait s’avérer utile dans certaines applications Web.

keywatcher, par Stefan Lange-Hegermann

Ce plugin permet de facilement capturer les touches entrées par l’utilisateur, et de leur assigner différentes actions.

Mootools Calculator, par Chris Esler

La calculette de windows dans votre browser !! Trop cool ' class='wp-smiley' />

Split Panes, par Chris Esler

Un plugin permettant de reproduire une sorte de frameset, avec des divs redimensionnables. Intéressant. C’est en cours de développement.

Source: http://feeds.feedburner.com/~r/gueschla/~3/110362244/ Boris

Labs XooFoo :: Article