Sources :
- devheart.org – Tutorial: Creating a jQuery plugin
- lostechies.com – Extending Objects in jQuery
Attention : en l’état, ce code requiert l’utilisation des plugins bxSlider et enquire.js et n’est pas tout-à-fait opérationnel. Le but de ce billet est de mettre en avant le principe de créer un mini plugin qui stocke des valeurs spécifiques de paramètres issus d’un plugin tiers (en l’occurence bxslider) afin de pouvoir les redistribuer à la volée sans avoir à les ressaisir à chaque fois.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
jQuery(document).ready(function() { jQuery.fn.setSlider = function(settings){ var config = { 'minSlides': '1', 'maxSlides': '3', 'slideWidth': '200', 'slideMargin': '20', 'moveSlides': '1', 'controls': false }; if (settings){jQuery.extend(config, settings);} return this.each(function(){ jQuery(this).bxSlider4({ minSlides: config.minSlides, maxSlides: config.maxSlides, slideWidth: config.slideWidth, slideMargin: config.slideMargin, moveSlides: config.moveSlides, controls: config.controls }); }); }; var pushOffreSlider = jQuery('.push-offre-slider'); // enquire JS enquire.register(bpSmartphone, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 1, slideMargin: 20 }); // console.log('bpSmartphone'); }, unmatch : function() {} }); enquire.register(bpTablet, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 2, slideMargin: 20 }); // console.log('bpTablet'); }, unmatch : function() {} }); enquire.register(bpDesktop, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 3, slideMargin: 20 }); // console.log('bpDesktop'); }, unmatch : function() {} }); }); |