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.

jquery-slick-plugin-onglets-retractables

Un plugin jQuery téléchargeable via ce lien, et à utiliser ainsi :

Élément HTML :

<div id="slick">
<ul>
 	<li><a href="#">Home</a></li>
 	<li><a href="#">About</a></li>
 	<li><a href="#">Terms & Conditions</a></li>
 	<li><a href="#">Contacts</a></li>
</ul>
</div>

Appel de la librairie :

<script type='text/javascript' src='js/jquery.slick.2.1.js'></script>

Intégration du css (il existe un style proposé par l’auteur, mais il est possible de proposer son propre style css) :

<link type="text/css" rel="stylesheet" href="css/dcslick.css" />

Et exploitation du plugin :

jQuery(document).ready(function($) {
$('#slick').dcSlick();
});

Bien entendu, il existe des options, voici celles par défaut :

var defaults = {
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 :

$('#slick').dcSlick({
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 :

Author: Franck Pertegas

Share This Post On

8 Comments

  1. Je recommande même d’aller visiter tout le site.. plein de choses intéressantes, Jquery..Wordpress etc…

    Post a Reply
  2. 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 😉

    Post a Reply
  3. Merci beaucoup pour le plugin et pour l’explication 🙂 Bonne continuation. J’attends vos prochains articles avec impatience.

    Post a Reply
  4. 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.

    Post a Reply
  5. Bonjour Bruno,

    Je ne vois pas le plugin sur ton lien.

    Je ne peux donc pas t’aider…

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax | LudiBlog - [...] jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables [...]
  2. jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables | LudiBlog | Développement Web et sites | Scoop.it - [...] jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables | LudiB...…
  3. jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog - [...] jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables [...]
  4. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici Un plugin jQuery qui va vous permettre de réaliser un effet d’onglet rétractable sur un…
  5. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Growl carouFredSel jNotify Facebox jQuery Slick Plugin DropDown Menu jPages msdropdown SuperFish Image Cube jQuery Approach (mb)Extruder Pajinate jQuery…

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *