JQuery UI स्लाइडर के साथ वॉल्यूम नियंत्रक बनाना

यदि आप एक मुफ्त शिकारी हैं, तो संभावना है कि आपने बहुत सारे PSD उपयोगकर्ता इंटरफेस (यूआई) डाउनलोड किए हैं। उनमें से कुछ वास्तव में अद्भुत हैं और जिस डिजाइन पर हम काम कर रहे थे उसे प्रोटोटाइप करके अपना समय बचा सकते हैं.

इस पोस्ट में हम एक PSD UI कोड करेंगे और इसे कुछ और कार्यात्मक में बदलेंगे। हम jQuery UI स्लाइडर विषय के रूप में लागू होने के लिए निम्न PSD UI स्लाइडर को कोड करने जा रहे हैं.

हालाँकि, कृपया पूंजी ले इस ट्यूटोरियल के लिए इरादा है मध्यवर्ती स्तर अनुभव का। यह कहते हुए कि, यह अभी भी अपेक्षाकृत आसान है, इसलिए जब तक आप CSS और jQuery से काफी परिचित हैं.

सब ठीक है, अब शुरू करते हैं.

चरण 1: jQuery यूआई

हमें स्पष्ट रूप से jQuery और jQuery UI लाइब्रेरी की आवश्यकता है, और उनके उपयोग के लिए हमारे पास दो विकल्प हैं। सबसे पहले, हम निम्नलिखित सीडीएन से सीधे jQuery और jQuery यूआई को लिंक कर सकते हैं: Google अजाक्स एपीआई सीडीएन, माइक्रोसॉफ्ट सीडीएन, और जेवाईके सीडीएन, होस्टेड सीडीएन फ़ाइल का उपयोग करने के बहुत सारे फायदे हैं जब हम अपनी साइट को ऑनलाइन रखते हैं।.

लेकिन जब से हम केवल इस पर ऑफ़लाइन काम करेंगे, हम इसका उपयोग करेंगे दूसरा इसके बजाय रास्ता.

हम आधिकारिक डाउनलोड पृष्ठ से jQuery यूआई लाइब्रेरी को डाउनलोड और अनुकूलित करेंगे। जैसा कि हमें केवल स्लाइडर प्लगइन की आवश्यकता है, हम केवल निर्भरता के साथ स्लाइडर लाइब्रेरी का चयन करेंगे और दूसरों को छोड़ देंगे। इस तरह से हमारे द्वारा उपयोग की जाने वाली फाइलें ज्यादा स्लिमर होंगी और तेजी से लोड हो सकती हैं। उसके बाद, उन सभी पुस्तकालयों को HTML दस्तावेज़ से लिंक करें, अधिमानतः पृष्ठ के नीचे या बंद होने से पहले टैग सटीक होना.

चरण 2: HTML मार्कअप

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

चरण 3: स्लाइडर यूआई स्थापित करें

नीचे दिया गया स्निपेट पेज पर स्लाइडर को स्थापित करेगा, लेकिन यह केवल डिफ़ॉल्ट कॉन्फ़िगरेशन पर लागू होता है.

 $ (फ़ंक्शन () $ ("# साइडर")। साइडर ();); 

तो यहाँ हम अन्य विन्यास जोड़कर स्लाइडर को थोड़ा बढ़ा देंगे.

सबसे पहले, हम स्लाइडर तत्व को एक चर के रूप में संग्रहीत करते हैं.

 var स्लाइडर = $ ('# स्लाइडर'), 

फिर हम स्लाइडर के न्यूनतम डिफ़ॉल्ट मान को सेट करते हैं 35, जब यह पहली बार भरी हुई है.

 स्लाइडर.स्लाइडर (रेंज: "मिनट", मूल्य: 35,); 

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

चरण 4: शैलियाँ

आगे बढ़ने से पहले, हमें PSD स्रोत फ़ाइल जैसे पृष्ठभूमि बनावट और आइकन से कुछ संपत्तियों की आवश्यकता होती है.

हम बात नहीं करेंगे कैसे टुकड़ा करने के लिए इस लेख में, हम केवल कोड पर ध्यान केंद्रित करेंगे। यदि आप सुनिश्चित नहीं हैं कि कैसे टुकड़ा करना है, तो आगे बढ़ने से पहले निम्नलिखित स्क्रैंकास्ट देखें.

• PSD से HTML में एक डिजाइन परिवर्तित - Nettuts+

सब ठीक है, अब शैलियों को जोड़ना शुरू करते हैं.

हम ब्राउज़र की विंडो के केंद्र में स्लाइडर को स्थिति से शुरू करेंगे और उस पृष्ठभूमि को संलग्न करेंगे जो हमने PSD से कटा हुआ था तन.

 शरीर पृष्ठभूमि: url ('... /images/bg.jpg') शीर्ष बाईं ओर दोहराएं;  खंड चौड़ाई: 150 पीएक्स; ऊंचाई: ऑटो; मार्जिन: 100px ऑटो 0; स्थिति: रिश्तेदार;  

अगला, हम शैलियों को लागू करेंगे टूलटिप, आयतन, हत्था, स्लाइडर रेंज और यह स्लाइडर अपने आप.

हम इस भाग को…

स्लाइडर

चूंकि हमने खुद स्लाइडर के लिए अधिकतम मूल्य निर्धारित नहीं किया था, इसलिए jQuery यूआई डिफ़ॉल्ट रूप से लागू होगा; अर्थात् 100. इसलिए, हम भी आवेदन कर सकते हैं 100 (px) स्लाइडर के लिए चौड़ाई.

 # स्लाइडर बॉर्डर-चौड़ाई: 1 पीएक्स; सीमा-शैली: ठोस; सीमा-रंग: # 333 # 333 # 777 # 333; सीमा-त्रिज्या: 25 पीएक्स; चौड़ाई: 100px; स्थिति: निरपेक्ष; ऊंचाई: 13 पीएक्स; पृष्ठभूमि-रंग: # 8e8d8d; पृष्ठभूमि: url ('... /images/bg-track.png') शीर्ष बाईं ओर दोहराएं; बॉक्स-छाया: इनसेट 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); बाएं: 20 पीएक्स;  

टूलटिप

टूलटिप को निर्दिष्ट करके स्लाइडर के ऊपर स्थित किया जाएगा स्थिति बिल्कुल साथ में -25px इसके लिए शीर्ष स्थिति.

 .टूलटिप स्थिति: निरपेक्ष; प्रदर्शन क्षेत्र; शीर्ष: -25 पीएक्स; चौड़ाई: 35 पीएक्स; ऊंचाई: 20 पीएक्स; रंग: #fff; पाठ-संरेखण: केंद्र; फ़ॉन्ट: 10pt तहोमा, एरियल, संस-सेरिफ़; सीमा-त्रिज्या: 3 पीएक्स; बॉर्डर: 1px ठोस # 333; बॉक्स-छाया: 1px 1px 2px 0px rgba (0, 0, 0, .3); box-sizing: बॉर्डर-बॉक्स; पृष्ठभूमि: रैखिक-ढाल (शीर्ष, आरजीबीए (69,72,77,0.5) 0%, आरजीबीए (0,0,0,0.5) 100%);  

आयतन

हमने अपने विचार को पूरा करने के लिए वॉल्यूम आइकन को थोड़ा संशोधित किया है। विचार यह है कि हम एक प्रभाव पैदा करने जा रहे हैं धीरे-धीरे वॉल्यूम बार बढ़ाएं स्लाइडर के मूल्य के अनुसार। मुझे यकीन है कि आपने अक्सर मीडिया प्लेयर यूजर इंटरफेस में ऐसा प्रभाव देखा है.

 .वॉल्यूम प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 25 पीएक्स; ऊंचाई: 25 पीएक्स; सही: -5 पीएक्स; पृष्ठभूमि: url ('... /images/volume.png') 0 -50px दोहराएं; स्थिति: निरपेक्ष; मार्जिन-टॉप: -5 पीएक्स;  

यूआई हैंडल

हैंडल की शैली काफी सरल है; इसमें एक आइकन होगा जो एक मेटैलिक सर्कल की तरह दिखता है, जो PSD से कटा हुआ है, और पृष्ठभूमि के रूप में जुड़ा हुआ है.

हम कर्सर मोड को भी बदल देंगे सूचक, इसलिए उपयोगकर्ता ध्यान देगा कि यह तत्व ड्रैग-सक्षम है.

 .ui- स्लाइडर-संभाल स्थिति: निरपेक्ष; z- इंडेक्स: 2; चौड़ाई: 25 पीएक्स; ऊंचाई: 25 पीएक्स; कर्सर: सूचक; पृष्ठभूमि: url ('... /images/handle.png') 50% 50% कोई दोहराएं; फोंट की मोटाई: बोल्ड; रंग: # 1C94C4; रूपरेखा: कोई नहीं; शीर्ष: -7 पीएक्स; मार्जिन-लेफ्ट: -12px;  

स्लाइडर रेंज

स्लाइडर रेंज में थोड़ा सफेद रंग होगा.

 .ui- स्लाइडर-रेंज पृष्ठभूमि: रैखिक-ढाल (शीर्ष, #ffffff 0%, # eaeaea 100%); स्थिति: निरपेक्ष; सीमा: 0; शीर्ष: 0; ऊंचाई: 100%; सीमा-त्रिज्या: 25 पीएक्स;  

चरण 5: प्रभाव

इस चरण में हम स्लाइडर के विशेष प्रभाव पर काम करना शुरू करने जा रहे हैं.

टूलटिप

इस बिंदु पर, टूलटिप में अभी तक कोई सामग्री नहीं है, इसलिए हम इसे स्लाइडर के मूल्य के साथ भरने जा रहे हैं। इसके अलावा, टूलटिप की क्षैतिज स्थिति हैंडल की स्थिति के अनुरूप होगी.

सबसे पहले, हम टूलटिप तत्व को एक चर के रूप में संग्रहीत करते हैं.

 var टूलटिप = $ ('टूलटिप'); 

तब हम टूलटिप के प्रभाव को परिभाषित करते हैं जिसका हमने ऊपर स्लाइड इवेंट के अंदर उल्लेख किया है.

 स्लाइड: फ़ंक्शन (ईवेंट, यूआई) var value = स्लाइडर.slider (, value ’), tooltip.css (s left’, value) .text (ui.value); 

लेकिन, हम यह भी चाहते हैं कि टूलटिप को शुरू में छिपाया जाए.

 tooltip.hide (); 

उसके बाद जब संभालना स्लाइडिंग शुरू करने वाला है, इसे फीका प्रभाव के साथ दिखाया जाएगा.

 प्रारंभ: फ़ंक्शन (घटना, यूआई) टूलटिप.फेडइन (fast फास्ट ’); , 

और, जब उपयोगकर्ता हैंडल को स्लाइड करना बंद कर देता है, तो टूलटिप फीका हो जाएगा और छिप जाएगा.

 stop: function (event, ui) tooltip.fadeOut () fast ’); , 

आयतन

जैसा कि हमने ऊपर बताया है शैलियाँ अनुभाग, हम वॉल्यूम आइकन को योजना की स्थिति के अनुरूप बदलने या सटीक होने की योजना बनाते हैं, स्लाइडर का मूल्य. इसलिए, हम इस आशय को बनाने के लिए निम्नलिखित सशर्त विवरण लागू करेंगे.

लेकिन, सबसे पहले, हम वॉल्यूम तत्व के साथ-साथ स्लाइडर के मूल्य को एक चर के रूप में संग्रहीत करते हैं.

 मात्रा = $ ('मात्रा'); 

फिर हम सशर्त बयान शुरू करते हैं.

जब स्लाइडर का मान कम या बराबर हो 5 वॉल्यूम आइकन में कोई बार नहीं होगा, यह दर्शाता है कि वॉल्यूम बहुत कम है, लेकिन जब स्लाइडर का मूल्य बढ़ रहा है, तो वॉल्यूम बार भी बढ़ने लगेगा।.

 अगर (मूल्य <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; 

उन सभी को एक साथ रखें

ठीक है, यदि आप उपरोक्त सभी सामानों के साथ भ्रमित हैं, तो मत बनो। यहाँ शॉर्टकट है। अपने दस्तावेज़ में सभी निम्नलिखित कोड डालें.

 $ (फ़ंक्शन () var स्लाइडर = $ ('# स्लाइडर'), टूलटिप = $ ('टूलटिप'); टूलटिप.हाइड (); स्लाइडर.slider (रेंज: "मि", मि: 1, मान: 35, प्रारंभ: फ़ंक्शन (ईवेंट, यूआई) टूलटिप.फेडइन ('तेज');, स्लाइड: फ़ंक्शन (इवेंट, यूआई) var value = स्लाइडर.slider ('मूल्य'), वॉल्यूम = $ (')। '); टूलटिप.स्क (' लेफ्ट ', वैल्यू) .टेक्स्ट (ui.value), अगर (मान) <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); ); 

सब ठीक है, चलो अब ब्राउज़र में परिणाम देखें.

• डेमो
• स्रोत डाउनलोड करें

निष्कर्ष

आज हमने सफलतापूर्वक एक और अधिक सुंदर jQuery यूआई विषय बनाया है, लेकिन साथ ही हमने सफलतापूर्वक एक PSD उपयोगकर्ता इंटरफ़ेस का एक कार्यात्मक वॉल्यूम नियंत्रक में अनुवाद किया है।.

हमें उम्मीद है कि यह ट्यूटोरियल आपको प्रेरित करता है और आपको यह समझने में मदद कर सकता है कि PSD को अधिक उपयोगी उत्पाद में कैसे बदलना है.

अंत में, यदि आपके पास इस ट्यूटोरियल के बारे में कोई सवाल है, तो नीचे टिप्पणी अनुभाग में इसे जोड़ने के लिए स्वतंत्र महसूस करें.