Une bibliothèque javascript/Ajax légère et efficace : Simple JS

logoSJSmn

Mise à jour:  SimpleJS n'est plus maintenu

J'ai découvert il y a peu Simple.JS, une petite bibliothèque Javascript qui permet quelques effets très web 2.0 et d'effectuer des requêtes Ajax (rechargement de DIV). Pour voir ce qu'elle permet de faire, je l'ai utilisé sur le site de la communauté de communes du Val de Nièvre que nous sommes entrain de réaliser (vous ne verrez pas encore le résultat en ligne, c'est en cours de dev.).

J'ai été surpris de sa simplicité d'exécution et la puissance des fonctionnalités proposées. De plus, elle est compatible sur tous les navigateurs, même IE6...

Les fonctionnalités sont peu nombreuses mais le poids de la bibliothèque fait 14 ko tout rond. A comparer avec les "mastodontes" que sont Prototype/Scriptaculous, YUI and co (où on utilise jamais plus de 10% de leurs possibilités), c'est un poids plume et les fonctionnalités proposées sont suffisantes pour un petit projet dans lequel on a juste besoin de quelques effets pour afficher/cacher un div, effectuer une requête AJAX, appliquer un effet sur un texte, ...

Simple JS permet donc quelques effets intéressants : clignotement, effet "toggle", effet accordéon, opacité d'un texte ou image, petit diaporama, rechargement AJAX d'un DIV, etc. Le mieux est de vous rendre sur le site web (site web fermé, simpleJS n'est plus) de cette librairie javascript où vous pourrez voir des exemples et la télécharger.

Petits exemples :

Tout d'abord, il faut mettre ce code dans le header de votre page :

<script language="javascript" type="text/javascript"src="simple.js"></script>
<script language="javascript" type="text/javascript" src="simpleajax.js"></script>

Si vous souhaitez afficher/cacher un élément dans votre page avec l'effet toggle avec un état de départ caché :

<a href="#" onclick="$toggle('suite');return false;">Lire la suite</a>
<div id="suite" style="display:none;">Voici la suite de mon texte</div>

De la même manière, si vous souhaitez effectuer une requête ajax, c'est à dire inclure sans rechargement de la page une page externe dans un bloc div :

<a href="#" onclick="$ajaxload('suite_ajax','ajax.php', 'Chargement en cours', 'appear', false);return false;">Lire la suite</a>
<div id="suite_ajax"></div>

Je vous recommande donc cette bibliothèque si vous ne souhaitez pas vous prendre la tête avec des bibliothèques plus imposantes sachant que les fonctionnalités proposées sont suffisantes pour votre projet.