SlideBox

À quoi sert-il ?

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.

Voir la 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 (0,88 Ko) et peut même encore être réduit grâce à la compression Gzip à environ 0,48 ko.

  1. Chargez le fichier des styles du plugin. Ce code d'appel au fichier CSS doit être placé avant la balise </head> :
    <link href="css/juizSlideBox.css" rel="stylesheet"
    type="text/css" media="screen, projection" />
    Ces styles sont personnalisables, bien entendu.
  2. 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>
  3. Chargez le fichier du plugin de la même manière en le plaçant après la ligne d'appel de la bibliothèque.
    Ici nous imaginons 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/juizSlideBox.min.js"></script>
  4. Appelez la fonction en ciblant précisément l'élément à placer dans la slidebox.
    Placez ce code à la suite des deux précédentes lignes :
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("#aside").juizSlideBox();
    	});
    </script>

Il est important de noter que cet appel n'est à faire qu'une seule fois et sur un unique élément. Si vous ressentez le besoin d'avoir plus boîtes coulissantes, posez-vous des questions sur l'ergonomie de votre site.

Personnalisation

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

Nom Description Valeur / "Défaut"
boxPositionX La position horizontale de la SlideBox "left" ou "right"
Défaut : "left"
boxOpacity L'opacité de la SlideBox Un nombre entre 0 et 1 (ex: 0.75)
Défaut : "1"
boxSpeed Durée de l'animation de la slidebox Un nombre (millisecondes), le mot "fast" ou "slow"
Défaut : "500"
thanks Lien discret de retour vers mon site "yes" ou "no"
Défaut : "yes"

Si vous le souhaitez nous en parlons sur le blog, alors n'hésitez pas à poser vos questions !

Lorsque vous souhaitez modifier un style, il vous suffit de compléter la fonction ainsi :

$("#aside").juizSlideBox({
	'boxOpacity'	:	"0.9",
	'boxSpeed'	:	"400"
});

Amusez-vous bien !

* jQ.CreativeJuiz.fr *