Utilisation du plugin - nicoss01/jQuery-Plugin-Toolbar-Maker GitHub Wiki
Pour utiliser le plugin, vous devez d’abord charger dans la balise "HEAD" de votre document, le fichier Javascript jQuery et le fichier "toolbar.jquery.js".
<script type="text/Javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/Javascript" src="/blog/toolbar.jquery.js"></script>
Pour utiliser correctement ce plugin il faut créer un conteneur HTML qui contiendra ensuite une répétition de balise contenant chacune un lien.
Exemple :
<div id="test_toolbar"> <div><a href="#">Link</a></div> <div><a href="#">Link</a></div> <div><a href="#">Link</a></div> <div><a href="#">Link</a></div> </div>
Ensuite dans votre code Javascript, utilisez le code suivant :
$("#test_toolbar').toolbar({
width : '120px',
positionH : 'middle',
positionV : 'bottom',
orientation : 'horizontal',
activeLink : false,
elements : 'div'
});
-
elements : Selecteurs des balises contenant les liens
-
cssClass : Classe CSS qiu sera ajoutée à la barre d’outils
-
live (true|false) : Si vous activez cette option, le menu se repositionnera automatiquement lors du redimensionnement de la fenêtre
-
width : Largeur en pixels de la barre d’outils
-
height : Hauteur en pixels de la barre d’outils
-
positionV : Position verticale de la barre d’outil, valeurs possibles : top (haut), bottom (bas), middle (milieu)
-
positionH : Position horizontale de la barre d’outil, valeurs possibles : left (gauche), right (droite), middle (milieu)
-
orientation : Direction du menu, valeurs possibles : horizontal, vertical
-
background : Couleur de fond du menu
-
textColor : Couleur du texte des liens
-
hoverBackground : Couleur de fond des liens survolés
-
hoverTextColor : Couleur du texte des liens survolés
-
activeLink (true|false) : Si cette option est active, le lien correspondant à l’url de page ouverte sera automatiquement mise en page différemment.
-
activeBackground : Couleur de fond du lien correspondant à la page ouverte