Juiz SlideBox

Testé et fonctionnel sur
Firefox 3.6+, Chrome 4.5+, Safari 4+, Opera 10.5+, Internet Explorer 7+

Explications

Voici un plugin tout simple d'utilisation, pratique pour cacher un élément de fonction secondaire sur un site Internet ou un forum (chatbox, commandes secondaires, etc).
Il vous suffira de cibler un élément grâce à la fonction principale du plugin pour le faire entrer dans une boîte latérale coulissante.

Démonstration

Nous allons utiliser le paragraphe qui suit pour notre démonstration.

Utilisation

Ce type d'outil est très simple à mettre en place puisqu'il s'agit d'un plugin de la bibliothèque jQuery.
Il est aussi très léger (3,11 Ko) et peut même encore être réduit grâce à la compression Gzip (1,1 Ko)

1. Pour commencer téléchargez la bibliothèque jQuery, ou faites un lien depuis l'api Google.
   Placez cet appel du fichier javascript juste avant la balise </body>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
2. Chargez ensuite le plugin de la même manière (n'oubliez pas de le télécharger). Surtout placez-le après la ligne d'appel de la bibliothèque.
   Ici nous imaginons donc que vos scripts se trouvent à la racine de votre site, dans un dossier nommé "scripts".
   A vous de modifier ce chemin si besoin. <script type="text/javascript" src="/scripts/jquery-juizSB.min.js"></script>
   
3. Maintenant il vous faut simplement appeler la fonction en ciblant précisément l'élément de votre page qui sera placé dans la SlideBox. Placez ce code à la suite des deux précédentes lignes (ici on cible l'élément porteur de l'identificateur aside).
   <script type="text/javascript"> $(document).ready(function() { $("#aside").juizSlideBox(); }); </script>

Personnalisation

Ce plugin vous offre pas mal personnalisations qui seront peut-être encore étendues par la suite. Pour le moment voici celles proposées et leurs paramètres par défaut.

Ces styles se mettent en place automatiquement, dès l'appel de la fonction (étape 3).

Si cela vous fait un peu peur au premier abord, nous en parlons sur le blog, alors n'hésitez pas à aller à la pêche aux info !

Lorsque vous souhaitez modifier un style, il vous suffit de compléter la fonction en précisant le style à modifier, puis sa valeur, ainsi :

Ici je rajoute des angles arrondis et une ombre à la boîte. C'est comme en CSS !
Comme vous pouvez le voir, il suffit de compléter uniquement les styles que vous souhaitez modifier, inutile de reprendre toute la liste précédente.

Enjoy !

Téléchargements

Dernière mise à jour le 8 octobre 2010 (merci à SckyzO)