jQuery के: (खोज)
jQuery के एक महान जावास्क्रिप्ट रूपरेखा है. यदि आप उसके साथ काम करने का अवसर नहीं किया है, मुझे उम्मीद है कि अगले प्रकाशन, आप इस विशेष समाधान का लाभ लेने के लिए प्रोत्साहित करेंगे. क्योंकि यह गति की विशेषता है, कोड का अनुकूलन करने के लिए उसे कई ब्राउज़रों के रूप में अच्छी तरह से है, जो शायद सबसे दिलचस्प में कई के रूप में समायोजित आसान जटिल समाधान का निर्माण करने के लिए.
आज के लेख में एक बहुत ही उपयोगी विधि पर ध्यान केंद्रित (खोज).
यदि आप इस रूपरेखा के साथ काम कर रहे हैं, मैं तुम अपने आप को चयनकर्ताओं के मूल के साथ परिचित करने के लिए, का उपयोग करते हुए आग्रह करता हूं selectorów पर सरकारी एपीआई , या बार्तोज़ Medonia द्वारा तैयार के साथ jQuery के मूल बातें पाठ्यक्रम . यह ज्ञान बहुत यहाँ प्रस्तुत समाधान की समझ की सुविधा होगी.
सबसे अच्छा चलो इस विधि के कुछ ठोस उदाहरण मिल. सबसे अधिक पृष्ठों पर, मेनू नेविगेशन के लिए बुनियादी तत्वों में से एक. हम अपने खुद के एनिमेटेड मेनू किसी भी ब्राउज़र जावास्क्रिप्ट का समर्थन करता है के तहत उपकरणों और संचालन के न्यूनतम संख्या का उपयोग कर बनाने की कोशिश करेंगे.
पहले तत्वों की तैयारी
चलो एक खाली HTML दस्तावेज़ बनाने के द्वारा शुरू:
<DOCTYPE HTML सार्वजनिक "- डब्ल्यू .3 सी. / / / / DTD XHTML 1.0 संक्रमणकालीन / / EN"! "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> मेनू </ शीर्षक> <सिर /> <body> </ Body> </ Html>
फिर से jQuery के का नवीनतम संस्करण हड़पने परियोजना की आधिकारिक साइट (उत्पादन) और यह हमारे HTML फ़ाइलों का एक फ़ोल्डर को कॉपी.
इस दस्तावेज़ के भीतर कुछ नमूना सामग्री है, और हमारे मेनू का उपयोग कर सकता है. इस div टैग और अवधि के लिए इस्तेमाल किया. बेशक, हमारे मेनू पर आइटम, लिंक हो, इस प्रकार उन्हें एक ब्लॉक में रखने चाहिए. आईडी = मेनू के साथ पूरे ब्लॉक div के अंदर डाल दिया. JQuery के स्क्रिप्ट टैग का उपयोग कर फ़ाइल जोड़ा गया. एक पूरे कुछ इस तरह दिखना चाहिए:
<div id="menu"> <div> href # 1 मेनू </ a> <span> href 1.1 मेनू </ a> href 1.2 मेनू </ a> href 1.3 मेनू </ a> </ Span> </ Div> <div> href # 2 मेनू </ a> <span> href 2.1 मेनू </ a> href 2.2 मेनू </ a> href 2.3 मेनू </ a> href 2.4 मेनू </ a> href 2.5 मेनू </ a> </ Span> </ Div> <div> href # 3 मेनू </ a> <span> href 3.1 मेनू </ a> href 3.2 मेनू </ a> href 3.3 मेनू </ a> href 3.4 मेनू </ a> </ Span> </ Div> <div> href # 4 मेनू </ a> <span> href 4.1 मेनू </ a> href 4.2 मेनू </ a> </ Span> </ Div> <! - अंत मेनू # -> </ div> कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. कुछ नमूना सामग्री है. <script type="text/javascript" src="jquery.js"> </ script>
विशेष मेनू पर कई मदों डाल को दिखाने के लिए आसान कैसे jQuery के ब्लॉक जो हम माउस ले जाएँ पर निर्भर करता है, उनमें से कई के लिए अपील करेंगे.
दूसरा मेनू की उपस्थिति (सीएसएस) को परिभाषित करें
इस खंड में, हम परिभाषित HTML फ़ाइल, कोड ब्लॉकों में इस्तेमाल किया देखो. मैं अपने आप को तैयार, शैली, सिर अनुभाग में स्थित करने के लिए निम्न कोड:
<style type="text/css"> <-! * मार्जिन: 0px गद्दी: 0px;} {पाठ - सजावट: कोई नहीं; फ़ॉन्ट: 20px जॉर्जिया "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़;} HTML, शरीर {मार्जिन: 10px;} # मेनू {शीर्ष: 0px; फ्लोट: छोड़ा; चौड़ाई: 100%;} # मेनू div {:; नाव रिश्तेदार: स्थिति छोड़ा;} Div # मेनू: सक्रिय, div मेनू एक: लिंक, div मेनू: दौरा {प्रदर्शन: ब्लॉक; स्थिति: रिश्तेदार, ऊर्ध्वाधर पंक्ति: मध्यम; पृष्ठभूमि: ccc #; रंग: # fff; padding: 10px 5px; चौड़ाई: 150px;} Div # मेनू एक: मंडराना {पृष्ठभूमि: # 999;} # मेनू अवधि div {:, पूर्ण, शीर्ष: 100%; बाएँ: 0; फ्लोट: स्थिति कोई भी प्रदर्शन कोई नहीं;} Div div मेनू #: सक्रिय, मेनू div div एक: लिंक, मेनू # div अवधि: दौरा {स्थिति: रिश्तेदार, प्रदर्शन: ब्लॉक; फ्लोट: छोड़ा; शीर्ष: 0px; पृष्ठभूमि: DDD, रंग: # fff; गद्दी: 5px 10px, चौड़ाई: 150px;} डिव div मेनू #: मंडराना {पृष्ठभूमि: # 999;} -> </ शैली>
हमारे उदाहरण में, हम केवल सरल दो - स्तरीय मेनू बनाने के लिए, लेकिन वहाँ के रास्ते में कुछ भी नहीं करने के लिए उन्हें संशोधित करने के लिए और स्तर के किसी भी संख्या के लिए अनुकूल है.
अगर हम इस बिंदु पर कर रहे हैं, आप भी उल्लेख करना चाहिए रूपरेखा css'owego मेनू बनाने .
तीसरा कार्यक्रम के नाखून लगता है.
इस तरह के उपायों के द्वारा, हम एक पूरे पृष्ठ जावास्क्रिप्ट कोड को लागू करने के लिए तैयार कर रहे हैं. हम यह भी जानते हैं, के रूप में उल्लेख किया है, चयनकर्ता कह रही है. हमारे मामले में, उदाहरण काफी सरल है, के बाद से वहाँ केवल चार मुख्य मेनू है, लेकिन यह कल्पना करना कठिन नहीं है कि वहाँ और अधिक हो सकता है, हो सकता है और प्रत्येक एकाधिक शाखाएँ हैं कर सकते हैं. यह पाश विधि में disqualifies, यह भी एक जानवर बल शामिल नहीं है, सभी अलग - अलग मामलों की जांच की. लेकिन विधि को खोजने के लिए धन्यवाद, समस्या फोड़े नीचे कोड का एक बहुत स्पष्ट लाइन है कि हमारे लिए सारा काम को अंजाम. यह अच्छा है कि हमारे जावास्क्रिप्ट कोड $ (दस्तावेज़) में था तैयार, यह सुनिश्चित करना हम यह उल्लेख है जब पृष्ठ लोड होता है, सभी बाहरी लिपियों, शैलियों और अन्य फ़ाइलों.
<script type="text/javascript"> <-! / / <! [CDATA [ $ (दस्तावेज़) तैयार (समारोह () { $ ("# डिव मेनू) हॉवर ( function () { $ (यह) ("अवधि") सीएसएस ({अस्पष्टता: 0.98}) SlideToggle ("तेजी");. } function () { $ (यह) ("अवधि") का पता लगाएं SlideToggle ("तेजी"). } ); }); / /]]> -> </ Script>
मैं उपरोक्त कोड स्क्रिप्ट टैग डाल करने की सलाह देते हैं, जो हम jQuery का उल्लेख तल पर.
मुख्य चयनकर्ता में, आईडी = "मेनू", जो वहाँ के अंदर एक div टैग देखें. विधि. (हॉवर) का अर्थ है, एक घटना है माउस, चयनित आइटम पर आक्रमण और पैरामीटर्स के रूप में, एक या दो कार्य करता है कि इस घटना की दीक्षा के दौरान प्रदर्शन कर रहे हैं लेता है. दूसरी सुविधा वैकल्पिक है और जब माउस हमारे तत्व के क्षेत्र छोड़ने के प्रदर्शन है. ताकि दोनों कार्य पाठक को पारदर्शी हैं, लेकिन मैं मौजूदा परियोजनाओं में कोड कम से कम की सिफारिश करने के लिए कोड लागू करने की कोशिश की.
हमें अब समारोह के अंदर कोड का विश्लेषण. फिर से, यहाँ हम चयनकर्ता, इस समय हम विषय है जिसमें हम रहते हैं उल्लेख का उपयोग प्रत्येक एक jQuery के चयनकर्ता, जो इस खंड के द्वारा संबोधित किया जा सकता है देता है. लेकिन अगर आप चाहते तत्व के अंदर, एक आइटम के अंदर आइटम को संदर्भित, विधि का पता लगाएं, जो पाता है और देता है सब मिलान तत्वों का उपयोग करें. इसे ध्यान में रखें, क्योंकि अगर आप किसी विशेष आइटम के लिए उल्लेख करना चाहता हूँ, आप इस तरह के एक वर्ग का उपयोग होता है और अपील के बाद पता लगाएं. (ClassNazwa. "). बेशक, खोजने के अंदर, हम भी एक और अधिक जटिल संरचना तत्वों को देखें, हो सकता है के रूप में अच्छी तरह से jQuery के चयनकर्ताओं.
पहली फीचर के रूप में आप देख सकते हैं, पाते हैं विधि एक वस्तु देता है और अपनी पारदर्शिता बदल संशोधित, तो विधि (slideToggle) का उपयोग, एनीमेशन शुरू किया जाएगा, इस मामले में, यह एनीमेशन है, नीचे है, जो प्रदर्शित करने के लिए सेट पैरामीटर निर्धारित करता है "उतरते" एक तत्व की सेटिंग में कोई नहीं (एक तत्व अदृश्य है, तो स्लाइड ही बात कर सकते हैं यह दिखाने के लिए है).
दूसरी फीचर में, सब कुछ बहुत इसी तरह लग रहा है कि हम अब कोई अस्पष्टता को संशोधित करने की आवश्यकता है, क्योंकि यह पहले से ही बदल दिया गया है को छोड़कर,. हम यह jQuery के पर किया है, सहित क्योंकि सीएसएस में, संभव नहीं हो सकता है, इस तरह के एक तरीके के रूप में W3C Validator के साथ पूर्ण अनुपालन को प्राप्त करने के लिए में होगा, और है कि पारदर्शिता सही ढंग से सभी आधुनिक ब्राउज़रों कि समर्थन जावास्क्रिप्ट पर प्रदर्शित किया गया था.
4 सारांश
इस लेख का उद्देश्य, यह सीख रहा था कैसे एनिमेटेड मेनू बनाने के लिए, लेकिन करने के लिए कई दिलचस्प विषय (विधि खोजने के मुद्दों को पता हो), के रूप में अच्छी तरह से jQuery के रूप में. अवसर भारी रहे हैं, और मुझे आशा है कि इस लेख को पढ़ने के बाद, यह कुछ के प्रति उत्साही लाभ होगा.
हमारे काम का प्रभाव हालांकि, हम देख सकते हैं प्रदर्शन .
बहुत अच्छा लेख बहुत उपयोगी तरीका jQuery के वर्णित है, और काफी व्यावहारिक उदाहरण. सब स्पष्ट और सुखद, मैं अगले कलाकारों के लिए इंतज़ार कर रहा हूँ