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

कैसे jQuery का उपयोग कर एक कीप्रेस नेविगेशन बनाने के लिए

by
Difficulty:BeginnerLength:MediumLanguages:

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

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

Step 1

पहली चीज है जो हमें करने की ज़रूरत है हमारे परीक्षण पेज इस मामले में, मैं इसे demo.html के रूप में संदर्भित करेगा और इसमें निम्न शामिल होंगे:

  1. JQuery के ढांचे के लिए एक लिंक
  2. स्क्रिप्ट पर एक लिंक हम बाद में काम करेंगे। चलो इसे keypress_nav.js कहते हैं
  3. Style.css नामक एक सीएसएस फाइल के लिए एक लिंक (हम बाद में भी काम करेंगे)।
  4. एक हेडर डिवि है जिसमें अन्य चीजों के साथ हमारे नेविगेशन शामिल होगा। तथा
  5. पांच अद्वितीय div तत्व जो हमारी साइट के लिए पेज के रूप में काम करेंगे।

तो, यह है कि demo.html इस बिंदु पर दिखता है:

Step 2

अब जब हमारे पास हमारे डीआईवी हैं, तो हम आगे बढ़ सकते हैं और पृष्ठ के लिए नेविगेशन बना सकते हैं। जैसा कि आपने अनुमान लगाया है, हम लिंक और डीआईवी की आईडी को इन लिंकों के लक्ष्य के रूप में रखने के लिए एक अनोर्ड सूची << ul> का इस्तेमाल करेंगे। साथ ही, हम वर्ग कंटेनर को सभी डीआईवी "पेजों" में जोड़ देंगे। जब हम हमारी स्क्रिप्ट बनाते हैं तो यह वर्ग इन डीआईवी को आसानी से संदर्भित करने में हमारी मदद करेगा तो, यहां आपके पास अब क्या होना चाहिए:

नोट: कोष्ठक के अंदर पत्र (कुंजी) कुंजी है जिसे हम बाद में हमारे पृष्ठ के लिए नेविगेशन के रूप में उपयोग करेंगे।

Step 3

हमारे परीक्षण पृष्ठ की संरचना अब पूरी हो चुकी है लेकिन दृश्य अपील की कमी है तो, चलो कुछ सीएसएस और जाज को जोड़ते हैं। स्टाइल शुरू करने से पहले एक बात को ध्यान में रखना है कि जावास्क्रिप्ट बंद होने पर भी हमारा पेज अच्छा दिखना चाहिए। लिपियों, मेरी राय में, उन प्रयोक्ताओं के लिए बोनस के रूप में हमेशा उपयोग किया जाना चाहिए, जिनके पास जावास्क्रिप्ट चालू है, लेकिन उन लोगों को विचलित नहीं करना चाहिए जो नहीं करते हैं। हम सभी के बाद वेब डिजाइनर / डेवलपर्स हैं, और हम प्रयोज्य के बारे में ध्यान रखते हैं, है ना?

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

नोट: मैंने नेविगेशन में कुछ आत्म-समाशोधन के नियम जोड़ दिए हैं ताकि अपने अंदरूनी फ़्लोटिंग तत्वों के कारण ऊंचाई की कमी के आसपास काम कर सकें। दूसरे शब्दों में, ऊपरी सबसे कंटेनर के मार्जिन नियम अब नेविगेशन << ul> पर उचित प्रभाव पड़ता है

Step 5

इस बिंदु पर ट्यूटोरियल में आपको एक ऐसा पृष्ठ दिखना चाहिए, जो कि ऐसा कुछ है:

Test Page Preview

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

Step 6

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

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

Step 7

अब जब हमने हमारे कार्यों को कोडित किया है, तो हमें पृष्ठ को लोड होने पर उन्हें एप्राफीली रूप से कॉल करना होगा। पहली चीज जो हमें करने की ज़रूरत है वह सभी तत्वों को छिपाना है, जिसमें डिवीआई के अपवाद के साथ क्लास कंटेनर है, जिसकी आईडी घर है। इसके बाद, हमें हमारे नेवीगेशन << ul> के पैरामीटर के रूप में लिंक के साथ showViaLink () फ़ंक्शन को कॉल करना होगा अंतिम लेकिन कम से कम नहीं, हमें उपयोगकर्ता की कुंजीप्रेसी के लिए सुनना होगा और एपप्रोएट आईडी के साथ showViaPress () फ़ंक्शन को इसके पैरामीटर के रूप में कॉल करना होगा। दबाए गए कुंजी पर एक स्विच का उपयोग करके इसे पूरा किया जा सकता है।

स्विच में 5 मामले होंगे (प्रत्येक लिंक के लिए) और इसकी संख्या कुंजीपटल के लिए एएससीआईआई संख्या से मेल खाती है। उदाहरण के लिए, यदि "a" कुंजी दबाई जाती है, तो स्विच का उपयोग 97 का होगा। तो, यह कोड ऐसा दिखता है:

Step 8

अब जबकि हमारे पास पहेली के सभी टुकड़े हैं, हम इसे एक साथ रख सकते हैं। हमारी स्क्रिप्ट के अंतिम पुनरावृत्ति की तरह ये दिखना चाहिए:

Demo

इस डेमो पेज पर स्क्रिप्ट की कार्रवाई करें।
इस डेमो में प्रयुक्त पैटर्न टेलर सतला ने बनाया था।

ENDE

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.