टाइप्टर के लिए jQuery (भाग 2): स्वादिष्ट मेनू

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

कार्य क्रमांक 2: ऊर्ध्वाधर मेनू

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



कार्यक्षेत्र मेनू नियमित लिंक सूचियाँ हैं:

 <Ul>
	 <li> <a href="/menu.html"> होम </a> </ li>
	 <li> <a href="/articles.html"> लेख </a> </ li>
	 <li> <a href="/forum.html"> फ़ोरम </a> </ li>
	 <li> <a href="/links.html"> लिंक </a> </ li>
	 <li> <a href="/about.html"> हमारे बारे में </a> </ li>
 </ Ul>

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

 $ ("a [@ href $ =" + document.location.pathname + "]")। css ({fontWeight: "bold"})

वैकल्पिक रूप से, आप पॉलकोलिमीट्स द्वारा सुझाए गए कुछ अलग दृष्टिकोण का उपयोग कर सकते हैं:

 var a = $ ("a [@ @ href $ =" + document.location.pathname + "]");
 a.parent ()। text (a.text ())। addClass ('चयनित');

पॉलकोलोमेट्स ने ठीक ही नोट किया है कि न केवल एक टैग चुनना बेहतर है, बल्कि आपको इसके लिए एक अधिक पूर्ण पथ भी निर्दिष्ट करना होगा।



ayavryk

यह कैसे काम करता है

लिंक के प्रारूप को बदलते समय (मैंने रिश्तेदार पथों का उपयोग किया था), स्क्रिप्ट को बदलना आवश्यक होगा। सभी कार्य करने वाली एक पंक्ति के लिए, यह परिचित $ (...) फ़ंक्शन का उपयोग करता है, जो इस मामले में दस्तावेज़ में समाप्त होने वाली href विशेषता के मान के साथ सभी लिंक का चयन करता है। यह चर, बदले में, वर्तमान पृष्ठ पर पथ संग्रहीत करता है। हम कैस्केडिंग फ़ॉन्ट-वेट स्टाइल शीट पैरामीटर के मान को सेट करने के लिए सीएसएस विधि का भी उपयोग करते हैं। अगर आपने गौर किया हो, तो फॉन्ट-वेट पैरामीटर का नाम fontWeight में थोड़ा अलग तरह से लिखा जाता है, यानी जावास्क्रिप्ट में "ऊंट" शैली में। एक परिष्करण स्पर्श के रूप में, मैं प्रस्ताव करता हूं कि वर्तमान अनुभाग के मेनू आइटम पर क्लिक रद्द कर दिया जाए। यह एक बहुत ही उचित निर्णय है, क्योंकि आप उस पृष्ठ पर नहीं जा सकते हैं जिस पर आप पहले से ही हैं। और मैं उन कॉल की एक श्रृंखला को प्रदर्शित करने में सक्षम होऊंगा जो लगातार jQuery स्क्रिप्ट में उपयोग की जाती हैं:

 $ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({
	 $ ("[[@ href $ =" + document.location.pathname + "]"
		 .css ({fontWeight: "bold"})
		 .click (फ़ंक्शन () {असत्य लौटा;});
 });

निष्कर्ष

हम अतिरिक्त चर के बिना करने में कामयाब रहे, जो स्पष्टता से समझौता किए बिना सरल मामलों में कोड को कम करता है। इस स्रोत में आप डिज़ाइन शैली भी देख सकते हैं, जो इस मामले में आपके अनुरूप होगी: एक पंक्ति के बजाय, मैं कॉल की श्रृंखला को तोड़ने के लिए कई में दिखाता हूँ कि कॉल कहाँ हैं। मुझे लगता है कि अब "तीर" को संलग्न करने के लिए स्क्रिप्ट को बदलना मुश्किल नहीं होगा, केवल बाहरी लिंक के लिए। मैं अत्यधिक सादगी की तलाश में सलाह देता हूं कि "$ =" के अलावा कौन से समकक्ष ऑपरेटर हैं, और वे वास्तव में क्या करते हैं।

<p />

लेखों का चक्र

• लेआउट डिजाइनर के लिए jQuery (भाग 1): लिंक के लिए तीर
  
  टाइप्टर के लिए jQuery (भाग 2): स्वादिष्ट मेनू