Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

एक कस्टम jQuery अकॉर्डियन कैसे बनाएँ

by
Difficulty:IntermediateLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

थोड़ी सी जगह में डेटा के विभिन्न सेक्शंस को दिखाने के लिए अक्सोर्डियंस बहुत उपयोगी हो सकते हैं। jQuery UI में बिल्ट-इन अकॉर्डियन फ़ंक्शन बनाया गया है, लेकिन jQuery UI Build your Download के अनुसार, कोर jQuery UI और अकॉर्डियन स्क्रिप्ट का आकार क्रमश: 25kb और 16.6kb है। आज, मैं आपको एक कस्टम अकॉर्डियन बनाना दिखाऊंगा जो अधिक "बैंडविड्थ एफिशिएंट" है।

एक नज़र डालने के लिए साइडबार से अटैचमेंट को डाउनलोड करें।

यह सिर्फ एक साधारण अकॉर्डियन के लिए बहुत कुछ लगता है। विशेष रूप से जब आप सामान्य jQuery स्क्रिप्ट में जोड़ते हैं, जो 18kb मिनीफ़ाय और Gzipped है। तो अतिरिक्त बिना जरूरत की फंक्शनलिटी के साथ अपने पेज लोड समय को बढ़ाने के बजाय, क्यों न स्क्रैच से कुछ बनाएं?

मुझे यह भी लगता है कि चीजों को स्क्रैच से लिखना वास्तव में आपको बेहतर समझ देता है की jQuery प्रभावी ढंग से कैसे लिखें, हमेशा किसी दूसरे के कोड का प्रयोग किये बिना।

इसलिए इस ट्यूटोरियल की योजना jQuery UI फ़ंक्शन का उपयोग करके एक अकॉर्डियन बनाने के लिए है, फिर कुछ कस्टम कोडिंग का उपयोग करके एक बनाएं। चलिए एक उदाहरण के रूप में एक ब्लॉग साइडबार का उपयोग करते हैं।

मार्कअप

मार्कअप बहुत सरल है, अकॉर्डियन में प्रत्येक सेक्शन के लिए सिर्फ एक लिस्ट आइटम होगा:

CSS

हम कुछ बहुत ही बुनियादी स्टाइल जोड़ने जा रहे हैं ताकि अकॉर्डियन अधिक प्रेसेंटेबल करने योग्य दिखता हो। चूंकि यह ट्यूटोरियल मुख्य रूप से जावास्क्रिप्ट पर केंद्रित है, इसलिए मैं जल्दी से इस पर चलूँगा की हम CSS के साथ क्या कर रहे हैं।

चूंकि मैं हमेशा अपनी खुद की सरल फ्रेमवर्क स्टाइलशीट से शुरू करता हूं, इसलिए मैं इसे यहां भी उपयोग करने जा रहा हूं:

इसके बाद, मैं अकॉर्डियन unordered लिस्ट और डेस्केन्डन्ट (descendant) लिस्ट से मार्जिन और लिस्ट-स्टाइल को हटाने जा रहा हूं और अकॉर्डियन unordered लिस्ट में एक नीचे का बॉर्डर जोड़ता हूं (आप जल्द ही देखेंगे कि यह केवल नीचे का बॉर्डर क्यों है)।

फिर, मैं नीचे के बॉर्डर को छोड़कर, प्रत्येक अकॉर्डियन सेक्शन के चारों ओर एक बॉर्डर जोड़ने जा रहा हूँ। साथ ही, मैं लिस्ट ऑब्जेक्ट्स से बॉर्डर को हटाने जा रहा हूं जो अकॉर्डियन सेक्शन के डेस्केन्डन्ट हैं और केवल एक नीचे के बॉर्डर जोड़ते हैं। यदि यह डेस्केन्डन्ट की unordered लिस्ट का अंतिम चाइल्ड है, तो मैं नीचे बॉर्डर को हटाने जा रहा हूं। हाँ, मुझे पता है कि यह IE में काम नहीं करेगा, लेकिन यह आवश्यक नहीं है।

इसके बाद, मैं मुख्य लिंक को स्टाइल करने जा रहा हूं जो अकॉर्डियन को टॉगल करेगा ताकि वे और अधिक अलग हो जाएं:

अंत में, मैं सिर्फ अकॉर्डियन की सब लिस्ट्स पर कुछ बुनियादी स्टाइल करने जा रहा हूं ताकि वे थोड़ा अच्छा दिख सकें:

आइए देखें कि हम कहां हैं। जब हम jQuery UI अकॉर्डियन का प्रयोग कर रहे हैं और जावास्क्रिप्ट डिसएबल हैं तो यह भी कुछ ऐसा ही दिखाई देगा।

Accordion Markup

ऐसा लगता है कि व्हाइटस्पेस बग के लिए हमें IE6 के लिए कुछ अतिरिक्त CSS जोड़ने की आवश्यकता होगी:

JQuery UI अकॉर्डियन

jQuery UI Home Page

अब जब हम सभी मार्कअप और स्टाइल पूरा कर चुके हैं, तो jQuery UI अकॉर्डियन को लागू करना बहुत आसान है। सबसे पहले, हमें बस jQuery और हमारी jQuery UI स्क्रिप्ट शामिल करने की आवश्यकता है।

फिर, हमें अकॉर्डियन की एक ID के साथ हमारी unordered लिस्ट पर अकॉर्डियन शुरू करने की जरूरत है:

और ये आपके पास एक काम करने वाला अकॉर्डियन है।

Working Accordion

वर्तमान में खुली अकॉर्डियन आइटम को और अधिक स्टैंड आउट करने के लिए, मैंने थोड़ा अतिरिक्त CSS जोड़ा:

ui-accordion-selected की क्लास के नाम आटोमेटिक रूप से वर्तमान अकॉर्डियन सेक्शन में जोड़ा जाता है।

हमारा कस्टम jQuery अकॉर्डियन

अब जब हमने jQuery UI अकॉर्डियन कर लिया है, तो यह समय अपना खुद का बनाने का है। एक चीज जो मुझे जरूरी नहीं लगाती है कि jQuery UI संस्करण के बारे में जावास्क्रिप्ट डिसएबल होने पर कैसा प्रदर्शित होता है। मैं इसे प्राप्त करना पसंद करूंगा ताकि एक समय में केवल एक ही सेक्शन खुला हो।

इसे पूरा करने के लिए, मैं थोड़ा PHP में जोड़ने जा रहा हूं। आप इसे किसी भी प्रोग्रामिंग भाषा के साथ आसानी से पूरा कर सकते हैं।

इसके पीछे विचार यह है कि हम URL में एक वेरिएबल पारित करने जा रहे हैं, और यदि वेरिएबल किसी सेक्शन के साथ मेल खाता है, तो हम उस सेक्शन में current क्लास निर्दिष्ट करते हैं। कोड में इसे देखना बहुत आसान है, इसलिए एक नज़र डालें:

आपको यह भी ध्यान रखना चाहिए कि मैंने सेक्शन के लिए if स्टेटमेंट के साथ मिलान करने के लिए अकॉर्डियन सेक्शंस को टॉगल करने के लिए प्रत्येक लिंक का URL बदल दिया है। तो मूल रूप से, यदि जावास्क्रिप्ट डिसएबल है, तो आपको उस सेक्शन के साथ एक नए पेज पर ले जाया जाएगा।

हमें jQuery UI अकॉर्डियन स्क्रिप्ट को हटाने की भी आवश्यकता है, और अपना स्वयं का शामिल करें:

अतिरिक्त CSS

मार्कअप में इस मामूली परिवर्तन के साथ, हमें थोड़ा अतिरिक्त CSS में जोड़ना होगा। अब हमारे पास लिस्ट आइटम को असाइन की गयी ui-accordion-selected क्लास नहीं है; यह अब current क्लास है। हमे इस क्लास के नाम को बदलने के लिए अकाउंट करना होगा जो की अकॉर्डियन के on स्टेट पर आधारित होगा:

तो हम जो भी करना चाहते हैं वह सभी unordered लिस्ट्स को छुपाता है, जब तक कि वे current क्लास के साथ लिस्ट आइटम के डेस्केन्डन्ट नहीं हैं। मैंने इस डेमो पेज पर एक बॉडी ID भी जोड़ा है ताकि हम दोनों उदाहरणों के लिए एक ही स्टाइलशीट का उपयोग कर सकें।

कस्टम जावास्क्रिप्ट

सबसे पहले, डॉक्यूमेंट लोड होने के बाद हम स्क्रिप्ट एक्सेक्यूट करना चाहते हैं, इसलिए हम इसके साथ शुरू करते हैं:

जब हम हैडिंग लिंक क्लिक करते हैं तो हम अकॉर्डियन को काम कराना चाहते हैं, लेकिन हम पेज को छोड़ना नहीं चाहते हैं इसलिए हमें सुनिश्चित करने और false को रीटर्न करने की आवश्यकता है:

इसके बाद, मुझे वह आउटलाइन पसंद नहीं है जो क्लिक किए जाने पर लिंक के आसपास दिखाई देती है, इसलिए मैंने इसे none पर सेट किया है:

इस स्क्रिप्ट के लिए दो अलग-अलग मामले हैं।

  1. क्लिक किया जा रहा लिंक वह सेक्शन है जो पहले से ही खुला है।
  2. क्लिक किया जा रहा लिंक वह सेक्शन नहीं है जो पहले से ही खुला है।

पहला मामला

यह फंक्शनलिटी नहीं है जो jQuery UI संस्करण में है, लेकिन मुझे लगता है कि यदि यूजर चाहते हैं तो यूजर सभी सेक्शंस को बंद करने में सक्षम होने चाहिए। यदि क्लिक किए गए लिंक में एक पैरेंट है जिसमें corrent क्लास है, तो हम unordered लिस्ट को स्लाइड करना और current क्लास को हटाना चाहते हैं।

एक और चीज जो मुझे jQuery UI संस्करण के बारे में बताती है, यह है कि आप अकॉर्डियन को स्क्रॉल कर सकते हैं, इसलिए यह लगभग देखने से बाहर है, इसे क्लिक करें, और फिर आप जो देख सकते हैं उससे ऊपर इंटरेक्शन होता है। JQuery UI उदाहरण पर नीचे स्क्रॉल करें और इसे आज़माएं।

तो मेरा समाधान jQuery ScrollTo नामक इस अद्भुत छोटी स्क्रिप्ट का उपयोग करनी है। यह एक बहुत छोटी स्क्रिप्ट है जो स्मूद पेज स्क्रॉलिंग जोड़ती है।

आइए इसे हमारे अकॉर्डियन स्क्रिप्ट से पहले डॉक्यूमेंट के हेड में जोड़ें:

जब सेक्शन स्क्रॉल हो जाता है, तो मैं विंडो को अकॉर्डियन के शीर्ष पर स्क्रॉल करना चाहता हूं:

फ़ंक्शन का पहला पैरामीटर स्क्रॉल करने का लक्ष्य है, और दूसरी बात यह है कि इसे कितना समय लेना चाहिए।

दूसरा मामला

यह मामला तब होता है जब क्लिक करने वाला सेक्शन वर्तमान में खुला नहीं है। तो सबसे पहले हम जो करना चाहते हैं वह वर्तमान में खुले सेक्शन को छुपाता है और current क्लास को हटा देता है (कोड का यह टुकड़ा पहले मामले के समान है):

इसके बाद, हम उस सेक्शन को खोलना चाहते हैं जिसे हमने क्लिक किया और current क्लास को जोड़ दिया:

अंत में, आइए अकॉर्डियन के शीर्ष पर विंडो को स्क्रॉल करें, जैसा कि हमने पहले मामले में किया था:

बस। सचमुच। क्या आपको लगता है कि एक अकॉर्डियन बनाना इतना आसान हो सकता है?

निष्कर्ष

अब, Firebug में Net टैब का उपयोग कर जावास्क्रिप्ट फ़ाइल के आकारों की तुलना करें।

Firebug

JQuery UI उदाहरण में, जावास्क्रिप्ट फाइल लगभग 73 kb है। हमारे कस्टम उदाहरण में, विंडो के अतिरिक्त स्क्रॉलिंग के साथ, जावास्क्रिप्ट फाइल लगभग 57 kb है। अब, यह बहुत अधिक प्रतीत नहीं होती है, लेकिन कल्पना करें कि क्या आपके पास बहुत अधिक ट्रैफ़िक साइट है। यहाँ बहुत से बाइट को बचाया जा सकता है। इसके अलावा, अब आप jQuery के बारे में अधिक समझते हैं।

अब बाहर जाओ और अपना खुद का jQuery लिखो।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.