Advertisement
  1. Code
  2. PHP

जावास्क्रिप्ट के साथ एक प्रोग्रेस बार बनाएँ

by
Read Time:14 minsLanguages:

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

प्रोग्रेस बार UI विगेट्स (widgets) की उत्कृष्ट लाइब्रेरी और jQuery के ऊपर बनाए गए इंटरैक्शन हेल्पर्स में जोड़े जाने वाले नवीनतम कंपोनेंट्स में से एक है। यह लाइब्रेरी के नवीनतम संस्करण में पेश किया गया था, जो इस लेखन के समय 1.7 है।




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

शुरू करना

हमें jQuery UI के वर्तमान संस्करण की एक प्रति की आवश्यकता होगी, जिसे डाउनलोड बिल्डर से http://jqueryui.com/download पर प्राप्त किया जा सकता है। एक बार इसे डाउनलोड करने के बाद, हमें इसे अनपैक करने की आवश्यकता होगी ताकि मौजूदा डायरेक्टरी स्ट्रक्चर संरक्षित (preserved) हो। हमें jQuery UI नामक हमारे कंप्यूटर पर एक नई डायरेक्टरी को बनाना चाहिए और फिर इसके अंदर jqueryui1.7 नामक एक और नया फ़ोल्डर बनाना चाहिए। आर्काइव को jqueryui1.7 फ़ोल्डर में अनपैक किया जाना चाहिए।

आर्काइव में सब कुछ शामिल होगा जो हमें शुरू करने के लिए आवश्यक है; सभी लाइब्रेरी फ़ाइलों के मिनीफाइड और अनकंप्रेस संस्करण, कुछ थीम फाइलें (डिफ़ॉल्ट थीम aptly-named स्मूथनेस है), और यहां तक कि बुनियादी jQuery लाइब्रेरी का नवीनतम संस्करण भी है।

प्रोग्रेस बार कार्य करने के लिए कई फाइलों पर निर्भर करता है; ये नीचे दिए गए क्रम में सूचीबद्ध हैं जिसमें उन्हें हमारे पेज में जोड़ा जाना चाहिए:

  • ui.core.css
  • ui.theme.css
  • ui.progressbar.css
  • jQuery[CurrentVersion].js
  • ui.core.js
  • ui.progressbar.js

पहली तीन फाइलें व्यापक CSS फ्रेमवर्क का हिस्सा हैं और प्रोग्रेस बार को अपनी विशिष्ट दिखावट देने के लिए उपयोग की जाती हैं। हमें वास्तविक दुनिया के इम्प्लीमेंटेशन में इस थीम के साथ नहीं रहना है; हमारे पास कस्टमाईज़ेशन के लिए कई ऑप्शन हैं जिनमें Themeroller से सीधे उपलब्ध पहले से कॉन्फ़िगर किए गए थीम्स की एक बड़ी संख्या शामिल है, एक कस्टम थीम जिसे हम Themerolle का उपयोग करके स्वयं डिज़ाइन कर सकते हैं, या यहां तक कि एक कस्टम थीम जिसे हम डिफ़ॉल्ट स्टाइलशीट में परिभाषित रूल्स को ओवरराइड करके मैन्युअल रूप से बनाते हैं। हालांकि हम इस ट्यूटोरियल में उन चीजों में से कोई भी नहीं कर पाएंगे, लेकिन हम फ्रेमवर्क द्वारा प्रदान की गई कुछ क्लासेज का उपयोग कर सकते हैं।

अंडरलाइंग पेज

इस विजेट द्वारा बहुत कम अंडरलाइंग मार्क-अप की आवश्यकता है; ऊपर लिस्टेड लाइब्रेरी रिसोर्सेज के अलावा, हमारे पास बस एक साधारण कंटेनर एलिमेंट है। अपने टेक्स्ट एडिटर में, आवश्यक रिसोर्सेज और कंटेनर एलिमेंट के साथ निम्न पेज शैल बनाएं:

रूट jQuery UI डायरेक्टरी में progressBar.html के रूप में इसे सेव करें। हमने स्टाइलशीट को फ़ाइल की शुरुआत में और स्क्रिप्ट को अंत में दाईं ओर रखा है; यह परफॉरमेंस के कारणों के लिए है क्योंकि पेज एक ही समय में जावास्क्रिप्ट को लोड करने का प्रयास नहीं करते हैं, तब कंटेंट को यह तेज़ी से लोड करता है। यह एक अच्छी तरह से डॉक्युमेंटेड परफॉरमेंस का अभ्यास है जिसका सबसे अच्छा पालन किया जाता है। हमने पेज के नीचे एक खाली स्क्रिप्ट टैग छोड़ा है; आइए इसके बाद कुछ कोड जोड़ें:

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

प्रोग्रेस बार की वैल्यू निर्धारित करना

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

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

प्रोग्रेस बार की वैल्यू को प्राप्त करना

विजेट का वर्तमान वैल्यू प्राप्त करना उतना ही आसान है जितना इसे सेट करना था; हम वर्तमान वैल्यू प्रॉपर्टी को वापस करने के लिए अपने तरीकों में से एक का उपयोग कर सकते हैं। प्रारंभिक कन्स्ट्रक्टर के बाद, निम्न कोड जोड़ें:
// set mouseover for progress bar

हमने दो सरल एनोनिमस फ़ंक्शंस जोड़े हैं जो प्रोग्रेस बार द्वारा निकाले गए माउसओवर और माउसआउट ईवेंट पर ट्रिगर किए गए हैं (ध्यान दें कि ये स्टैण्डर्ड DOM ईवेंट कस्टम प्रोग्रेस बार ईवेंट नहीं हैं)। हम पहले फंक्शन में जो करते हैं, प्रोग्रेस बार की वर्तमान वैल्यू के साथ इसके innerText के रूप में एक नया पैराग्राफ बनाते हैं और इसे पेज पर जोड़ते हैं।

ऑप्शन मेथड का उपयोग कर वैल्यू पुनर्प्राप्त की जाती है। मेथड में पास किये गए आर्गुमेंट उस प्रॉपर्टी का नाम है जिसे हम पुनर्प्राप्त करना चाहते हैं। दूसरा फ़ंक्शन बस मैसेज को फिर से हटा देता है। मैसेज निम्न स्क्रीनशॉट में दिखाया गया है:

प्रॉपर्टी, इवेंट और मेथड

वैल्यू प्रॉपर्टी, या ऑप्शन, वर्तमान में प्रोग्रेस बार की एकमात्र कॉन्फ़िगर करने योग्य प्रॉपर्टी है; इस उदाहरण में हम इसे सेट करते हैं जब विजेट को कॉन्फ़िगरेशन ऑब्जेक्ट की प्रॉपर्टी के रूप में पास करके प्रारंभ किया जाता है। विजेट को प्रारंभ करने के बाद इस प्रॉपर्टी को सेट करने के लिए हम ऑप्शन मेथड का उपयोग करेंगे। इस मेथड का उपयोग सेटर मोड में करने के लिए, हमें नयी वैल्यू को निर्दिष्ट करने वाले दूसरे पैरामीटर में पास करने की आवश्यकता है, जैसे:

आप सोच रहे होंगे कि मैंने कोड का उपरोक्त लाइन में स्पष्ट रूप से तीन आर्गुमेंट दिए जाने पर 'दूसरा पैरामीटर' क्यों कहा। भले ही हम ऑप्शन मेथड का उपयोग कर रहे हैं, हम वास्तव में इसे सीधे कॉल नहीं कर रहे हैं। इसके बजाए हम कन्स्ट्रक्टर मेथड को फिर से कॉल कर रहे हैं, लेकिन यह कह रहे हैं कि हम ऑप्शन मेथड को कॉल करना चाहते हैं। विजेट दो पैरामीटर ("वैल्यू" और 75) में गुजरने के लिए आंतरिक रूप से मेथड को कॉल करेगा, जिसे हम मेथड नाम के बाद कन्स्ट्रक्टर को पास करते हैं।

प्रोग्रेस बार एक सिंगल इवेंट, चेंज इवेंट को एक्सपोज़ करता है, जो हमारे लिए एक मैकेनिज्म प्रदान करता है ताकि हम इसकी वैल्यू में परिवर्तनों का जवाब दे सकें। यह एक कस्टम इवेंट है ताकि हम इसे दो अलग-अलग तरीकों से पहचान सकें और रियेक्ट कर सकें। हम किसी एनोनिमस फ़ंक्शन को कॉन्फ़िगरेशन ऑब्जेक्ट में चेंज प्रॉपर्टी की वैल्यू के रूप में परिभाषित कर सकते हैं, जैसे हमने वैल्यू प्रॉपर्टी के साथ किया था, या हम एक्सेक्यूट करने के लिए एनोनिमस फ़ंक्शन डिफाइन करने के लिए jQuery के बाइंड मेथड का उपयोग कर सकते हैं। दोनों के बीच एक सूक्ष्म अंतर यह है कि बाइंड मेथड का उपयोग करके स्पेसीफाई किये गए कोड पहले एक्सेक्यूट किया जाएगा।
प्रोग्रेस बार API पांच मेथड्स को एक्सपोज़ करता है, जो नीचे सूचीबद्ध हैं:

  • destroy
  • disable
  • enable
  • option
  • value

इन सभी मेथड्स का उपयोग उसी मेथड से किया जाता है जैसे हमने ऑप्शन मेथड को देखा है; मेथड के नाम और किसी भी पैरामीटर को निर्दिष्ट करने वाले कन्स्ट्रक्टर मेथड को कॉल करके जिसे हम पास करना चाहते हैं। इनमें से अधिकांश काफी सेल्फ-एक्सप्लनेटोरी होना चाहिए।

प्रोग्रेस बार का उपयोग करना

यह उदाहरण अब तक बहुत बुनियादी रहा है, आप में से उन लोगों के लिए जो पहले से ही jQuery UI का उपयोग नहीं कर सकते थे। आइए चीजों को थोड़ा ऊपर उठाएं और उस चीज़ के साथ कुछ इकट्ठा करें जो हम उचित कार्यान्वयन में करना चाहते हैं। यह उदाहरण भी बुनियादी होगा, लेकिन इसे हमारे लिए काम करने के लिए विजेट को कैसे बनाया जा सकता है, इस बारे में एक बेहतर विचार देना चाहिए। हमारा पूरा पेज इस तरह कुछ दिखाई देगा:

अपने टेक्स्ट एडिटर में एक नई फाइल में निम्नलिखित अंडरलाइंग पेज से शुरुआत करें:

इसे jQuery UI फ़ोल्डर में regForm.html के रूप में सेव करें। पेज के शीर्ष पर हम CSS फ्रेमवर्क से लिंक करते हैं; यह मुख्य रूप से प्रोग्रेस बार के लिए आवश्यक स्टाइल जोड़ने के लिए है, लेकिन हम अपने स्वयं के एलिमेंट्स पर प्रदान की जाने वाली कुछ क्लासेज का भी उपयोग कर सकते हैं। हम एक कस्टम स्टाइलशीट भी जोड़ते हैं जिसे हम जल्द ही तैयार करेंगे।

पेज के बॉडी में कुछ लेआउट एलिमेंट और कुछ टेक्स्ट नोड्स हैं, लेकिन मुख्य एलिमेंट प्रोग्रेस बार और फॉर्म के लिए कंटेनर हैं। फॉर्म div और फ़ील्ड एलिमेंट्स का उपयोग करके कई अलग-अलग खंडों में विभाजित किया गया है। इसका कारण यह है कि हम इसे प्रकट करने के लिए फ़ॉर्म का हिस्सा छिपा सकते हैं जैसे कि यह कई पेजेज को फैलाता है।

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

बाहरी कंटेनर को कई क्लास नाम दिए जाते हैं; पहला यह है कि हम एलिमेंट के लिए कुछ कस्टम स्टाइल लागू कर सकते हैं, लेकिन दूसरे दो CSS फ्रेमवर्क की विभिन्न फीचर्स को लक्षित करना है। ui-helper-clearfix क्लास को आटोमेटिक रूप से फ़्लोट किए गए एलिमेंट्स को साफ़ करने के लिए उपयोग किया जाता है और अतिरिक्त और अनावश्यक div एलिमेंट्स के अव्यवस्था को कम करने का एक शानदार तरीका है।

ui-corner-all क्लास का उपयोग कंटेनर एलिमेंट (साथ ही प्रोग्रेस बार स्वयं जो आटोमेटिक रूप से होता है, और हमारे फ़ील्ड एलिमेंट) को कई स्वामित्व (proprietary) स्टाइल रूल्स का उपयोग करके राउंडेड कॉर्नर्स को देने के लिए किया जाता है। ये केवल gecko और webkit पर आधारित ब्राउज़र द्वारा समर्थित हैं, लेकिन प्रोग्रेसिव एनहांसमेंट की प्रकृति में यह उनका उपयोग करने के लिए पूरी तरह से स्वीकार्य है। प्रोग्रेसिव एनहांसमेंट से यह निर्देश मिलता है कि हम अपने वेब पेजेज पर उन ब्राउज़रों के लिए एनहांस्ड स्टाइल प्रदान कर सकते हैं जो इसे प्रदर्शित करने में सक्षम हैं। अन्य ब्राउज़रों में सिर्फ एक स्क्वायर-कोने वाला कंटेनर होगा।

हम फार्म के भीतर CSS फ्रेमवर्क से एक और क्लास का उपयोग करते हैं; पेज को पहली बार लोड होने पर कई पैनलों को छिपाने की आवश्यकता होती है, इसलिए हम यह सुनिश्चित करने के लिए ui-helper-hidden क्लास का उपयोग कर सकते हैं जिससे यह पक्का हो सके की यह display: none पर सेट हैं, तब हम इसे दिखाना चाहते हैं, तो हमें बस इतना करना है इस क्लास का नाम हटा दें।

बॉडी के निचले हिस्से में (परफॉरमेंस के कारणों से; यह वास्तव में काम करता है!) हम लाइब्रेरी से आवश्यक जावास्क्रिप्ट रिसोर्सेज से लिंक करते हैं। आखिरी स्क्रिप्ट एलिमेंट खाली है और कोड के लिए इंतजार कर रहा है जो फॉर्म और प्रोग्रेस बार को जीवंत करेगा। आइए इसे जोड़ दें:

बाहरी document.ready शार्ट-कट के भीतर हमारे पास प्रोग्रेस बार के लिए कन्स्ट्रक्टर फ़ंक्शन है; हम कन्स्ट्रक्टर को एक लिट्रल कॉन्फ़िगरेशन ऑब्जेक्ट पास करते हैं जिसमें एक ही प्रॉपर्टी होती है। यह चेंज प्रॉपर्टी है और कस्टम चेंज इवेंट का पता लगाने के हर बार एक्सेक्यूट करने के लिए हमें एक एनोनिमस फ़ंक्शन प्रदान करने की अनुमति देता है। हम इस इवेंट का उपयोग उस लेबल को अपडेट करने के लिए कर सकते हैं जिसे हम प्रोग्रेस बार के अंदर स्थित करने जा रहे हैं।

प्रत्येक बार ईवेंट निकाल दिया जाता है, हम ऑप्शन मेथड का उपयोग करके प्रोग्रेस बार की वर्तमान वैल्यू को पकड़ लेंगे और लेबल को लेबल के टेक्स्ट के रूप में सेट करेंगे। परिवर्तन होने के बाद इवेंट को निकाल दिया जाता है, इसलिए हमारे द्वारा प्राप्त वैल्यू हमेशा नयी वैल्यू होगी।

इसके बाद हमारे पास next> बटन के लिए एक क्लिक हैंडलर है; जब इस बटन पर क्लिक किया जाता है तो इसका परिणाम स्वरूप के वर्तमान 'page' में होगा, एनिमेशन की सीरीज के माध्यम से, और प्रोग्रेस बार अपडेट की वैल्यू के माध्यम से। हमें कुछ और चीजें करने की भी आवश्यकता है। किसी फॉर्म के अंदर बटन का डिफ़ॉल्ट व्यवहार फ़ॉर्म सबमिट करना है, जिसे हम इस स्टेज में नहीं करना चाहते हैं, इसलिए हमारे क्लिक हैंडलर की पहली चीज़ preventDefault() जावास्क्रिप्ट फ़ंक्शन का उपयोग करके फ़ॉर्म को सबमिट करने से रोकती है। इसे ईवेंट ऑब्जेक्ट पर कहा जाता है, जिसे आटोमेटिक रूप से एनोनिमस फ़ंक्शन पर भेज दिया जाता है।

फिर हम वर्तमान पैनल को निर्धारित करने के लिए फॉर्म में प्रत्येक अलग पैनल को देखते हैं; पहली बात यह है कि हम जांचते हैं कि वर्तमान पैनल पहला पैनल नहीं है और यदि ऐसा नहीं है, तो हम डिफ़ॉल्ट बटन को डिसएबल करते हुए बैक बटन इनेबल करते हैं। एक बार में केवल एक पैनल प्रदर्शित किया जाएगा, इसलिए हमें वह पैनल मिलता है जिसमें ui-helper-hidden क्लास नहीं है और इसे fade कर दिया गया है। fade फिनिश होने के बाद हम एक्सेक्यूट करने के लिए एक एनोनिमस कॉलबैक फ़ंक्शन को निर्दिष्ट करते हैं।

इस दूसरे फंक्शन के भीतर हम अगले एलिमेंट का सिलेक्शन करते हैं और इसे दिखाते हैं; यदि अगला एलिमेंट अंतिम पैनल है, जिसमें thanks की id है, तो हम next> बटन डिसएबल कर देते हैं। हालांकि हम इस उदाहरण में फॉर्म की वास्तविक जमा करने की चिंता नहीं करते हैं, यह वह जगह है जहां हम फ़ॉर्म से एकत्र किए गए डेटा को सर्वर पर भेज सकते हैं। हम ui-helper-hidden क्लास को हटाते हैं क्योंकि पैनल अब विज़िबल है।

अंत में हम ऑप्शन मेथड का प्रयोग एक बार फिर से करते हैं, इस बार सेटर मोड मैं, ताकि यह प्रोग्रेस बार में एक नयी वैल्यू को सेट कर सकें। नयी वैल्यू, जिसे हम दूसरे पैरामीटर के रूप में मेथड में पास करते हैं, केवल वर्तमान वैल्यू प्लस 50 है, क्योंकि फॉर्म के केवल 2 भाग हैं। यह अंतिम भाग उस फ़ंक्शन को ट्रिगर करेगा जो लेबल को अपडेट करता है।

इसके बाद हमें इसके लिए एक बहुत ही समान क्लिक हैंडलर जोड़ने की आवश्यकता है

यह वह सभी कोड हैं जिसकी हमे आवश्यकता होगी, हमें बस इतना करना है कि उदाहरण के लिए कुछ बुनियादी CSS जोड़ें; अपने टेक्स्ट एडिटर में एक नई फाइल में निम्न कोड जोड़ें:

इसे HTML फ़ाइल के समान फ़ोल्डर में regForm.css के रूप में सेव करें। अब हमारे पास एक वायर्ड अप प्रोग्रेस बार वाला एक वर्किंग पेज होना चाहिए। जब हम पेज चलाते हैं तो हमें यह पता होना चाहिए कि हम फॉर्म के प्रत्येक पैनल के माध्यम से नेविगेट कर सकते हैं, और प्रोग्रेस बार तदनुसार अपडेट हो जाएगा:

सारांश

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

हमने अपनी API द्वारा उजागर की गई प्रॉपर्टी और इवेंट को देखा और हमने उन मेथड्स में से एक को देखा जिन्हें हम प्रोग्रेस बार को कुछ करने के लिए कॉल कर सकते हैं। उदाहरण जिसके साथ हमने समाप्त किया, सभी प्रमुख ब्राउज़रों में पूरी तरह से चलना चाहिए, हालांकि यह अच्छा ol' IE में थोड़ा गन्दा दिखता है (जो ठीक करने के लिए बहुत आसान था, हम ऐसा करने के इच्छुक थे)।

  • अधिक दैनिक वेब डेवेलपमेंट टुट्स और लेखों के लिए NETTUTS RSS Feed की सदस्यता लें।


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.