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 :
Appel de la librairie :
Intégration du css (il existe un style proposé par l’auteur, mais il est possible de proposer son propre style css) :
Et exploitation du plugin :
$('#slick').dcSlick();
});
Bien entendu, il existe des options, voici celles par défaut :
classWrapper: 'dc-slick', // CSS class of slick content wrapper
classContent: 'dc-slick-content', // CSS class of slick content
location: 'top', // Location of slide out content - options are top, bottom, right & left
align: 'left', // Alignment of tab for location top/bottom - options are right & left
offset: '100px', // Offset in pixels from edge of browser window
speed: 'slow', // Speed of slide out animation
tabText: 'Click', // Default text for slick tab
classTab: 'tab', // Default CSS class for tab
classOpen: 'slick-open', // CSS for external link to open tab
classClose: 'slick-close', // CSS for external link to close tab
classToggle: 'slick-toggle', // CSS for external link to toggle tab
autoClose: true, // If set to true the slick content will auto-close when elsewhere in browser window is clicked
loadOpen: false // Set to true to have the tab open by default on page load
onLoad : function() {}, // callback function on loading slick tab content
beforeOpen : function() {}, // callback function before opening slick tab
beforeClose: function() {} // callback function before closing slick tab
};
Puis la manière de les utiliser :
location: 'bottom',
align: 'right',
offset: '250px',
speed: 'slow',
tabText: 'Slick Tab',
autoClose: true
});
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
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Hi,
Thanks for the review
Thanks for the plugin
Je recommande même d’aller visiter tout le site.. plein de choses intéressantes, Jquery..Wordpress etc…
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
Merci beaucoup pour le plugin et pour l’explication
Bonne continuation. J’attends vos prochains articles avec impatience.
Merci pour le retour et les encouragements Mama83
[...] jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables [...]
[...] jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables | LudiB… 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 su… Source: blog.ludikreation.com [...]
[...] jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables [...]