jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables
Vous souhaitez réaliser un effet d’onglet rétractable sur votre site internet ? Vous souhaitez un bloc de contact qui se dévoile lorsque vous cliquez sur un onglet « Contact » calé sur le bord de votre page de site web ? Vous avez vu ça quelque part, mais ne trouvez pas le plugin jQuery adéquat ? jQuery Slick Plugin est là pour vous permettre de réaliser cet effet.
Un plugin jQuery téléchargeable via ce lien, et à utiliser ainsi :
Élément HTML :
[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22slick%22%3E%0A%3Cul%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22%23%22%3EHome%3C%2Fa%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22%23%22%3EAbout%3C%2Fa%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22%23%22%3ETerms%20%26amp%3B%20Conditions%3C%2Fa%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22%23%22%3EContacts%3C%2Fa%3E%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
Appel de la librairie :
[pastacode lang= »markup » manual= »%3Cscript%20type%3D’text%2Fjavascript’%20src%3D’js%2Fjquery.slick.2.1.js’%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
Intégration du css (il existe un style proposé par l’auteur, mais il est possible de proposer son propre style css) :
[pastacode lang= »markup » manual= »%3Clink%20type%3D%22text%2Fcss%22%20rel%3D%22stylesheet%22%20href%3D%22css%2Fdcslick.css%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]
Et exploitation du plugin :
[pastacode lang= »javascript » manual= »jQuery(document).ready(function(%24)%20%7B%0A%24(‘%23slick’).dcSlick()%3B%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
Bien entendu, il existe des options, voici celles par défaut :
[pastacode lang= »javascript » manual= »var%20defaults%20%3D%20%7B%0AclassWrapper%3A%20’dc-slick’%2C%20%2F%2F%20CSS%20class%20of%20slick%20content%20wrapper%0AclassContent%3A%20’dc-slick-content’%2C%20%2F%2F%20CSS%20class%20of%20slick%20content%0Alocation%3A%20’top’%2C%20%2F%2F%20Location%20of%20slide%20out%20content%20-%20options%20are%20top%2C%20bottom%2C%20right%20%26%20left%0Aalign%3A%20’left’%2C%20%2F%2F%20Alignment%20of%20tab%20for%20location%20top%2Fbottom%20-%20options%20are%20right%20%26%20left%0Aoffset%3A%20’100px’%2C%20%2F%2F%20Offset%20in%20pixels%20from%20edge%20of%20browser%20window%0Aspeed%3A%20’slow’%2C%20%2F%2F%20Speed%20of%20slide%20out%20animation%0AtabText%3A%20’Click’%2C%20%2F%2F%20Default%20text%20for%20slick%20tab%0AclassTab%3A%20’tab’%2C%20%2F%2F%20Default%20CSS%20class%20for%20tab%0AclassOpen%3A%20’slick-open’%2C%20%2F%2F%20CSS%20for%20external%20link%20to%20open%20tab%0AclassClose%3A%20’slick-close’%2C%20%2F%2F%20CSS%20for%20external%20link%20to%20close%20tab%0AclassToggle%3A%20’slick-toggle’%2C%20%2F%2F%20CSS%20for%20external%20link%20to%20toggle%20tab%0AautoClose%3A%20true%2C%20%2F%2F%20If%20set%20to%20true%20the%20slick%20content%20will%20auto-close%20when%20elsewhere%20in%20browser%20window%20is%20clicked%0AloadOpen%3A%20false%20%2F%2F%20Set%20to%20true%20to%20have%20the%20tab%20open%20by%20default%20on%20page%20load%0AonLoad%20%3A%20function()%20%7B%7D%2C%20%2F%2F%20callback%20function%20on%20loading%20slick%20tab%20content%0AbeforeOpen%20%3A%20function()%20%7B%7D%2C%20%2F%2F%20callback%20function%20before%20opening%20slick%20tab%0AbeforeClose%3A%20function()%20%7B%7D%20%2F%2F%20callback%20function%20before%20closing%20slick%20tab%0A%7D%3B » message= » » highlight= » » provider= »manual »/]
Puis la manière de les utiliser :
[pastacode lang= »javascript » manual= »%24(‘%23slick’).dcSlick(%7B%0Alocation%3A%20’bottom’%2C%0Aalign%3A%20’right’%2C%0Aoffset%3A%20’250px’%2C%0Aspeed%3A%20’slow’%2C%0AtabText%3A%20’Slick%20Tab’%2C%0AautoClose%3A%20true%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
Un plugin jQuery qui peut s’avérer pratique dans de nombreux cas. Plusieurs autres versions spécifiques existent : WordPress Slick Menu Plugin, WordPress Slick Contact Form Plugin et Slick Social Share Buttons.
Et vous qu’en pensez vous ?
Articles qui peuvent vous intéresser :
- jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery
- jQuery – Validation – Plugin de validation de formulaire
- jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
- Facebox – Plugin jQuery – Des lightbox style Facebook
- jQuery – QRCode – Générez vos propres QRCodes
28 septembre 2011
Hi,
Thanks for the review 🙂
28 septembre 2011
Thanks for the plugin 😉
28 septembre 2011
Je recommande même d’aller visiter tout le site.. plein de choses intéressantes, Jquery..Wordpress etc…
28 septembre 2011
Merci syndrael,
d’ailleurs, tu fais bien de le préciser, car en plus de proposer pleins de choses intéressantes, le développeur est fort sympathique. Pour peu qu’on ai des notions d’anglais, on peut facilement échanger avec lui 😉
30 septembre 2011
Merci beaucoup pour le plugin et pour l’explication 🙂 Bonne continuation. J’attends vos prochains articles avec impatience.
30 septembre 2011
Merci pour le retour et les encouragements Mama83 🙂
27 juillet 2012
Bonjour,
j’ai des problèmes pour l’affichage sur internet explorer, est-ce que quelqu’un pourrait tester mon site (www.myziggi.fr) et me dire si les onglet sont mal affichés.
D’apres ce que j’ai constaté chez un ami (car je suis sur Mac), les onglets même cachés prennent la moitié de l’écran? Merci d’avance.
3 août 2012
Bonjour Bruno,
Je ne vois pas le plugin sur ton lien.
Je ne peux donc pas t’aider…