🍢 ⛄️ 🥃 एक उदाहरण स्लाइडर का उपयोग करके एक jQuery प्लगइन बनाना 🕎 👐 🥠

अक्सर आपको काम के लिए पेज में स्क्रॉलिंग इमेज, ब्लॉक आदि के लिए स्लाइडर्स को एम्बेड करना पड़ता है। "एलियन" घटनाक्रम के साथ खेलने के बाद, जिसमें अक्सर अतिरिक्त और अनावश्यक कार्यक्षमता होती है, मैंने अपनी बाइक बनाने और इसे एक jQuery प्लग-इन के रूप में डिजाइन करने का फैसला किया, जो एक क्षैतिज स्लाइडर के रूप में अपने कार्य को पूरा करेगा, और मैं इसे और से समझूंगा।

यह कार्यान्वयन आदर्श होने का दावा नहीं करता है, क्योंकि यह मेरा पहला प्लगइन है, और कोड थोड़ी देर में मेरे लिए डरावना हो सकता है, लेकिन अब सब कुछ मुझे ठीक लगता है और मुझे बहुत अच्छा लगता है और किसी के लिए उपयोगी हो सकता है।

सबसे पहले आपको jQuery के लिए प्लगइन डिजाइन नियम सीखने की जरूरत है। मैंने इस लिंक पर जानकारी का उपयोग किया। मुझे कैसे पता चला कि jQuery प्लगइन्स वाली फ़ाइलों के लिए उनके नाम के बारे में एक समझौता है - यह jquery.pluginName.js प्रारूप का अनुपालन करना चाहिए। इस प्रकार, हमारे प्लगइन के साथ फाइल को jquery.lbslider.js कहा जाना चाहिए - यही कारण है कि मैंने अपने स्लाइडर का नाम कैसे तय किया, क्यों एलबी मेरी प्यारी दुल्हन को छोड़कर किसी के लिए भी स्पष्ट नहीं है (आपको कम से कम किसी तरह की पहेली की आवश्यकता है)। प्लगइन कोड में यह डिज़ाइन होना चाहिए (अधिक जानकारी के लिए, ऊपर दिए गए लिंक को देखें):

(function($){ jQuery.fn.pluginName = function(options){ //          . //        //    ,     //     options = $.extend({ param1: 'param1Value', //1 param2: 'param2Value' //2 }, options}; var make = function(){ //        }; return this.each(make); //  ,  pluginName    jQuery  }; })(jQuery);

शुरू करने के लिए, मैंने अपने कार्यान्वयन में ऐसे मापदंडों का उपयोग करने का निर्णय लिया:
leftBtn - स्लाइडर को बाईं ओर स्क्रॉल करने के लिए बटन
दाईं ओर - बटन स्लाइडर को बाईं ओर स्क्रॉल करने के लिए
मात्रा - पृष्ठ पर दृश्य तत्वों की संख्या (कभी-कभी उन्हें केवल 1 की आवश्यकता होती है, और कभी-कभी 3, 4 या अधिक)
ऑटोप्ले - एक बूलियन मान जो यह दर्शाता है कि स्लाइडर को ऑटोस्कोपिंग की आवश्यकता है या नहीं
ऑटोप्लेडेल - ऑटोस्कोपिंग में देरी

तो यहाँ मेरे डिफ़ॉल्ट विकल्प हैं:

 var options = $.extend({ leftBtn: 'leftBtn', rightBtn: 'rightBtn', quantity: 4, autoPlay: false, // true or false autoPlayDelay: 10 // delay in seconds }, options);

अब हम सीधे कार्यान्वयन के लिए आगे बढ़ते हैं। मैंने तय किया कि स्लाइडर का html कोड एक आवरण ब्लॉक से युक्त होगा, जिसके अंदर स्क्रॉल करने के लिए बटन होंगे और <ul> सूची के साथ एक और ब्लॉक होगा, जिसके तत्वों को पुन: प्राप्त किया जाएगा। सबसे पहले, कुछ शैलियों को जोड़ें।

 var make = function() { $(this).css('overflow', 'hidden'); var el = $(this).children('ul'); el.css({ position: 'relative', left: '0' }); };

स्क्रॉल को अंतहीन बनाने का निर्णय लिया गया था, इसके लिए हम शुरुआत में अंत से कई तत्वों की नकल करते हैं और अंत में पहले कुछ तत्व। कई - यह पृष्ठ पर हमारे दृश्य तत्वों की संख्या है - मात्रा पैरामीटर।

 var sliderFirst = el.children('li').slice(0, options.quantity); var tmp = ''; sliderFirst.each(function(){ tmp = tmp + '<li>' + $(this).html() + '</li>'; }); sliderFirst = tmp; var sliderLast = el.children('li').slice(-options.quantity); tmp = ''; sliderLast.each(function(){ tmp = tmp + '<li>' + $(this).html() + '</li>'; }); sliderLast = tmp; var elRealQuant = el.children('li').length; el.append(sliderFirst); el.prepend(sliderLast);

यदि आप ध्यान दें, तो हमने चर elRealQuant में तत्वों की मूल संख्या को भी सहेजा है - यह अभी भी हमारे लिए उपयोगी होगा। अगला, एक तत्व की चौड़ाई सेट करें, यह पूरे ब्लॉक की चौड़ाई और दृश्य तत्वों की संख्या पर निर्भर करता है, सीएसएस संपत्ति फ्लोट भी सेट करें: बाएं। हम सभी तत्वों की नई संख्या का पता लगाएंगे, क्योंकि हमने उनमें से कुछ की नकल की थी और संपूर्ण सूची की चौड़ाई को एक तत्व की चौड़ाई के तत्वों की संख्या के बराबर निर्धारित किया था।

 var elWidth = el.width()/options.quantity; el.children('li').css({ float: 'left', width: elWidth }); var elQuant = el.children('li').length; el.width(elWidth * elQuant); el.css('left', '-' + elWidth * options.quantity + 'px');

हमने पूरी सूची को बाईं ओर स्थानांतरित कर दिया ताकि पृष्ठ में लोड होने पर शुरुआत में जोड़े गए डुप्लिकेट तत्व दिखाई न दें।

अब हम स्क्रॉल एनिमेशन की अवधि और उनके बाद के समावेश के लिए स्क्रॉल बटन को अक्षम करने का कार्य जोड़ते हैं। यह बटन को निष्क्रिय कक्षा को हटाने का केवल एक प्राथमिक जोड़ / हटाने होगा, और बटन पर क्लिक करके हम जांचेंगे कि क्या यह वर्ग है - कुछ भी नहीं करें। बेशक, आप इन बटनों के लिए एक अलग शैली भी सेट कर सकते हैं।

 function disableButtons() { $('.' + options.leftBtn + ', .' + options.rightBtn).addClass('inactive'); } function enableButtons() { $('.' + options.leftBtn + ', .' + options.rightBtn).removeClass('inactive'); }

अब हम उन वास्तविक कार्यों को लिखेंगे जो स्लाइडर के स्क्रॉल बटन को दबाकर काम करेंगे:

 $('.' + options.leftBtn).click(function(event){ event.preventDefault(); if (!$(this).hasClass('inactive')) { disableButtons(); el.animate({left: '+=' + elWidth + 'px'}, 300, function(){ if ($(this).css('left') == '0px') {$(this).css('left', '-' + elWidth * elRealQuant + 'px');} enableButtons(); } ); } return false; });

यह बाएं बटन के लिए एक फ़ंक्शन है। सबसे पहले, हम बटन बंद करते हैं, फिर क्रमशः स्क्रॉल एनीमेशन का संचालन करते हैं और फिर बटन को सक्रिय करते हैं। एनीमेशन के अंत में, हम जांचते हैं कि क्या स्लाइडर बाएं किनारे पर पहुंच गया है - हम पूरे ब्लॉक को फिर से सही राशि पर दाईं ओर ले जाते हैं - उपयोगकर्ता इसे स्क्रीन पर नहीं देखेगा और फिर से बाईं ओर स्क्रॉल करना संभव होगा - और इसी तरह अनन्तता पर। दाएं बटन का कार्य समान होगा, केवल हम दूसरी तरफ स्क्रॉल करेंगे और जांचेंगे कि क्या हम दाएं किनारे पर स्क्रॉल करते हैं - बाईं ओर शिफ्ट।

यह केवल ऑटो-स्क्रॉल करने के लिए रहता है, यदि कोई हो। सामान्य तौर पर, यह एक बटन पर क्लिक करने का सिर्फ एक आवधिक अनुकरण होगा। इसके अलावा, जब आप स्लाइडर पर मंडराते हैं, तो स्क्रॉल बंद हो जाएगा, और जब आप कर्सर को स्थानांतरित करेंगे, तो यह फिर से शुरू होगा।

 if (options.autoPlay) { function aPlay() { $('.' + options.rightBtn).click(); delId = setTimeout(aPlay, options.autoPlayDelay * 1000); } var delId = setTimeout(aPlay, options.autoPlayDelay * 1000); el.hover( function() { clearTimeout(delId); }, function() { delId = setTimeout(aPlay, options.autoPlayDelay * 1000); } ); }

खैर, बस इतना ही। अब आप सभी प्लगइन कोड देख सकते हैं।

पूरा कोड

 (function($){ $.fn.lbSlider = function(options) { var options = $.extend({ leftBtn: 'leftBtn', rightBtn: 'rightBtn', quantity: 3, autoPlay: false, // true or false autoPlayDelay: 10 // delay in seconds }, options); var make = function() { $(this).css('overflow', 'hidden'); var el = $(this).children('ul'); el.css({ position: 'relative', left: '0' }); var sliderFirst = el.children('li').slice(0, options.quantity); var tmp = ''; sliderFirst.each(function(){ tmp = tmp + '<li>' + $(this).html() + '</li>'; }); sliderFirst = tmp; var sliderLast = el.children('li').slice(-options.quantity); tmp = ''; sliderLast.each(function(){ tmp = tmp + '<li>' + $(this).html() + '</li>'; }); sliderLast = tmp; var elRealQuant = el.children('li').length; el.append(sliderFirst); el.prepend(sliderLast); var elWidth = el.width()/options.quantity; el.children('li').css({ float: 'left', width: elWidth }); var elQuant = el.children('li').length; el.width(elWidth * elQuant); el.css('left', '-' + elWidth * options.quantity + 'px'); function disableButtons() {$('.' + options.leftBtn + ', .' + options.rightBtn).addClass('inactive');} function enableButtons() {$('.' + options.leftBtn + ', .' + options.rightBtn).removeClass('inactive');} $('.' + options.leftBtn).click(function(event){ event.preventDefault(); if (!$(this).hasClass('inactive')) { disableButtons(); el.animate({left: '+=' + elWidth + 'px'}, 300, function(){ if ($(this).css('left') == '0px') {$(this).css('left', '-' + elWidth * elRealQuant + 'px');} enableButtons(); } ); } return false; }); $('.' + options.rightBtn).click(function(event){ event.preventDefault(); if (!$(this).hasClass('inactive')) { disableButtons(); el.animate({left: '-=' + elWidth + 'px'}, 300, function(){ if ($(this).css('left') == '-' + (elWidth * (options.quantity + elRealQuant)) + 'px') {$(this).css('left', '-' + elWidth * options.quantity + 'px');} enableButtons(); } ); } return false; }); if (options.autoPlay) { function aPlay() { $('.' + options.rightBtn).click(); delId = setTimeout(aPlay, options.autoPlayDelay * 1000); } var delId = setTimeout(aPlay, options.autoPlayDelay * 1000); el.hover( function() { clearTimeout(delId); }, function() { delId = setTimeout(aPlay, options.autoPlayDelay * 1000); } ); } }; return this.each(make); }; })(jQuery);

और इसे काफी सरलता से कहा जाता है। कुछ इस तरह:

 $('.slider').lbSlider({leftBtn: 'sa-left', rightBtn: 'sa-right', quantity: 3, autoPlay: true});

और निश्चित रूप से डेमो

दोषों के बिना नहीं। उदाहरण के लिए, रैपिंग ब्लॉक की चौड़ाई को मैन्युअल रूप से सेट करना बेहतर है और ताकि यह पूरी तरह से दृश्य तत्वों की संख्या से विभाजित हो, अन्यथा कीड़े भिन्नात्मक मूल्यों के साथ, किनारों तक पहुंचेंगे।
बेशक, आप अभी भी कार्यक्षमता का विस्तार कर सकते हैं - उदाहरण के लिए, स्क्रॉल करते समय कुछ प्रभाव जोड़ें, खड़ी स्क्रॉल करने की क्षमता जोड़ें, और निश्चित रूप से खामियों को दूर करें, लेकिन आज के लिए यह पर्याप्त है।

UPD: बग के साथ चौड़ाई तय, मामूली बदलाव कोड GitHub पर पोस्ट किया गया है ।

एक उदाहरण स्लाइडर का उपयोग करके एक jQuery प्लगइन बनाना

More articles: