10 scripts Mootools pour l’interface utilisateur
Posté par jbj le 7 mai 2008 dans Javascript/Ajax • 11 commentairesVous connaissez certainement déja Mootools, cette librairie Javascript très légère et permettant de se simplifier le développement tout en codant d'une manière très propre. Je vous propose ici de découvrir 10 scripts basés sur Mootools dans le but de mettre en place l'ergonomie et l'esthétisme que l'on est en droit d'attendre d'une appli web d'aujourd'hui.
Mocha UI
Si vous aimez les fenêtres, vous aimerez Mocha UI: En effet, qu'elles soient modales, fixes, flottantes ou redimensionnables, Mocha UI propose toutes sortes de fenêtres pour sublimer l'expérience utilisateur dans votre application web.
Mootable
J'ai découvert Mootable sur le blog d'X-or: Il s'agit d'un script permettant de traiter un tableau html de la même manière qu'un tableau provenant d'une application desktop. Il devient ainsi possible de redimensionner les colonnes, de trier les éléments du tableau, de souligner la ligne sur laquelle passe la souris...
Bref, le must pour les tableaux de votre prochaine appli!
Slimbox
On ne présente plus ces fenêtres modales servant essentiellement à afficher du contenu multimedia. Il existe Lightwindow, Lightbox...Voici Slimbox, qui en plus d'être basé sur Mootools, se révèle est très légère.
MooEditable
MooEditable est un éditeur wysiwyg dans le style de TinyMCE ou FckEditor. Il pèse moins de 10kb et est totalement cross-browser. Sa légèreté ainsi que son extensibilité en font selon moi un bon choix face à des éditeurs beaucoup plus lourds et pas nécessairement plus intuitifs pour l'utilisateur.
Le rendu est correct pour du wysiwyg, mais bien entendu n'espérez pas obtenir un html aussi propre que si il avait été codé à la main.
Mooflow
Les utilisateurs de Leopard, dernier OS d'Apple, apprécient énormément Coverflow, cette fonction permettant d'afficher les fichiers d'une manière esthétique et très intuitive. Alors, pourquoi ne pas en faire profiter les utilisateurs de votre site? A noter, ce script est un peu lourd, donc à utiliser avec parcimonie.
Date Picker Widget
Si vous travaillez avec des dates, ce Date picker vous simplifiera la tâche tout en améliorant le coté user-friendly.
Calendar
Ce script fait un peu double emploi avec le date picker que nous venons de voir, mais c'est pour la bonne cause: Proposé en trois déclinaisons, (Noire, bleue et blanche) Calendar est le genre de script que l'on aimerait trouver sur tous les sites qui utilisent des dates: Très léger, esthétique et faisant également office de validation côté client, (impossible de rentrer une date invalide) que demander de plus?
Mootools UI Menu
Je ne suis pas spécialement fan des menus contextuels apparaissant au clic droit en lieu et place du menu du navigateur, mais je me suis dit que ce script pourrait intéresser certains d'entre vous. A noter, il est également possible d'utiliser ce script pour faire apparaitre un menu lors d'un évènement, comme un clic sur un bouton, par exemple.
Roar Notifications
Une interface utilisateur à très souvent besoin d'avertir l'utilisateur: Champ mal renseigné, opération impossible...Bien sûr, la bonne vieille fonction alert() permet d'afficher des messages à l'attention de l'utilisateur, mais si vous recherchez une manière beaucoup plus esthétique de transmettre ce genre d'information, Roar Notifications est fait pour vous.
Checkboxes and Lists
J'avais déja présenté un script équivalent lors de mon article intitulé 8 scripts Javascript pour sublimer votre site. Bien qu'il ne s'agisse ici que d'esthétisme pur et non d'amélioration des fonctionnalités existantes,
10 scripts Mootools pour l’interface utilisateur…
Vous connaissez certainement déja Mootools, cette librairie Javascript très légère et permettant de se simplifier le développement tout en codant d’une manière très propre. Je vous propose ici de découvrir 10 scripts basés sur Mootools dans …
[...] lien vers la nouvelle | vu sur scoopeo [...]
Superbe Mootable! C’est la première fois que je vois un tableau avec l’en-tête fixe fonctionnait sous Safari. Adopté! je vais m’en servir très bientôt.
Merci pour l’info (transmise par Scoopeo)
Ravi de t’avoir été utile
En effet, Mootable, c’est de la tuerie…Merci x-or de me l’avoir fait découvrir 
J’aime beaucoup le fading sur le background du menu de ton site? C’est du Mootools derrière non?
Mootable et calendar sont mes deux préférés, simple à mettre en œuvre et super efficace, faudra que je jete un oeil sur Mocha UI, ça m’a l’air bien interressant pour créer des interfaces de gestions de sites web (au boulot ça pourrait m’aider
)
Thanks Jb
ouais Mocha UI à l’air vraiment top. Faut absolument que je le teste « grandeur nature » dès que j’en aurais l’occasion!
Très belle liste
Un jour peut-être j’utiliserais cela pour faire une interface 
Merci pour cette liste.
Je voulais ajouter JxLib.org qui est un framework assez complet dans les genre de Mocha UI précité, mais ce n’est pas orienté desktop, mais mis à par de cela ça produit un interface complet et beau.
Vous avez oublié Fancyupload, je trouve que c’est l’un des meilleurs codes jamais fait pour mootools
Merci pour la liste je trouve que cet outil est vital pour tout développeur web.travailler avec java script grâce à ce framework magique redevient un joie et un plaisir
Bonjour,
Sympa cette liste, j’en ai testé quelques unes, et je vous fait par de mon expérience.
J’ai installé Mooflow à un moment sur mon site, baucoup de soucis mais le rendu est très sympa. Un peu penible à configurer et à personnaliser, et quelques bugs. Mais le resultat très accrocheur.
J’ai utilisé Smoothbox pour créer des fenetres, et j’ai eu un soucis lorsque ie8 est arrivé, je l’ai retiré et travaille sur une nouvelle version des fenetres faites avec moowind (http://www.moowind.com), librairie mootools offrant plus de possibilité.
J’ai utilisé sur un site d’un client slimbox, et vraiment sympa et beau
Bonne continuation.