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

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

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

Step 1

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
		<title>KeyPress Navigation Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="keypress_nav.js"></script>
	</head>
	<body>
		<div id="header">
			<!-- Our navigation will go here -->
		</div>
		<div id="home">
			<h2>Welcome!</h2>
			<p>Some Text</p>
		</div>
		<div id="about">
			<h2>About Me</h2>
			<p>Some Text</p></p>
		</div>
		<div id="contact">
			<h2>No Spam Please</h2>
			<p>Some Text</p>
		</div>
		<div id="awards">
			<h2>Awards, So Many ...</h2>
			<p>Some Text</p>
		</div>
		<div id="links">
			<h2>Cool Sites</h2>
			<p>Some Text</p>
		</div>
	</body>
</html>

Step 2

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>KeyPress Navigation Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="keypress_nav.js"></script>
	</head>
	<body>
		<div id="header">
			<ul id="navigation">
				<li><a href="#home">Home ( a )</a></li>
				<li><a href="#about">About ( s )</a></li>
				<li><a href="#contact">Contact ( d )</a></li>
				<li><a href="#awards">Awards ( f )</a></li>
				<li><a href="#links">Links ( g )</a></li>
			</ul>
		</div>
		<div id="home" class="container">
			<h2>Welcome!</h2>
			<p>Some Text</p>
		</div>
		<div id="about" class="container">
			<h2>About Me</h2>
			<p>Some Text</p></p>
		</div>
		<div id="contact" class="container">
			<h2>No Spam Please</h2>
			<p>Some Text</p>
		</div>
		<div id="awards" class="container">
			<h2>Awards, So Many ...</h2>
			<p>Some Text</p>
		</div>
		<div id="links" class="container">
			<h2>Cool Sites</h2>
			<p>Some Text</p>
		</div>
	</body>
</html>

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

Step 3

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

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

body 
{
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans", sans-serif;
	font-size: 100%;
	background: #333;
}


/* Header
-------------------------------------------------- */

#header
{
	width: 460px;
	margin: 0 auto;
	font-size: .75em;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}

#header ul 
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#header ul li 
{
	float: left;
	text-align: left;
}

#header ul li a
{
	display: block;
	color: #ffff66;
	text-decoration: none;
	text-transform: uppercase;
	margin-right: 20px;
}

#header ul li a:hover
{
	text-decoration: underline;
	color: #ffcc66;
}


/* Containers
-------------------------------------------------- */

.container
{
	width: 400px;
	height: 300px;
	margin: 30px auto;
	padding: 10px 20px;
	border: 10px solid #fff;
	color: #fff;
	font-size: .75em;
	line-height: 2em;
}

.container h2
{
	padding: 5px 10px;
	width: 200px;
}

#home		{ background: #15add1; }
#home h2	{ background: #007aa5; }
#about		{ background: #fdc700; }
#about h2	{ background: #bd9200; }
#contact	{ background: #f80083; }
#contact h2	{ background: #af005e; }
#awards		{ background: #f18300; }
#awards	h2	{ background: #bb5f00; }
#links		{ background: #98c313; }
#links h2	{ background: #6f9a00; }


/* Self-Clearing Rules 
-------------------------------------------------- */

ul#navigation:after 
{
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

* html ul#navigation 	{ height: 1px; }
ul#navigation 			{ min-height: 1px; }

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

Step 5

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

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

Step 6

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

function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

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

function showViaLink(array)
{
	array.each(function(i)
	{	
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

Step 7

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

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

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");
	
	// makes the navigation work after all containers have bee hidden 
	showViaLink($("ul#navigation li a"));
	
	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	
						
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;
						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;
						
			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;
						
			// user presses the "g" key 
			case 103:	showViaKeypress("#links");
		}
	});
});

Step 8

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

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");
	
	// makes the navigation work after all containers have bee hidden 
	showViaLink($("ul#navigation li a"));
	
	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	
						
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;
						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;
						
			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;
						
			// user presses the "g" key 
			case 103:	showViaKeypress("#links");
		}
	});
});

// shows a given element and hides all others
function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

// shows proper DIV depending on link 'href'
function showViaLink(array)
{
	array.each(function(i)
	{	
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

Demo

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

ENDE