Paano ang Pag-gawa ng isang Keypress Navigation Gamit ang jQuery

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Ang susi sa isang matagumpay na website ay ang pagiging madali kung saan hinahanap ng isang gumagamit ang kanilang hinahanap. Kaya ito ay nangangailangan ng oag-gamit ng maraming oras at pagsusumikap na gumawa ng parehong kapaki-pakinabang at biswal na nakakaakit na mga sistema ng paghahanap. Kamakailan lamang, nagsimula akong mag-eksperimento sa mga bagong paraan upang makapaghanap sa isang website. Sa pagtuturo na ito ay ipapakita ko sa iyo kung paano ipaalam sa gumagamit na gamitin ang kanilang keyboard upang magamit ang iyong site.

Hakbang 1

Ang unang bagay na kailangan nating gawin ay gawin ang aming test page. Sa kasong ito, babanggitin ko ito bilang demo.html at naglalaman ito ng mga sumusunod:

Isang link sa balangkas ng jQuery.
Isang link sa script na ating gagamitin mamaya. Taeagin natin ito na keypress_nav.js
Ang isang link sa isang CSS file na tinatawag na style.css (gagawin din namin ito mamaya).
Isang header div na maglalaman ng aming paghahanap kasama ng iba pang mga bagay. At
Limang natatanging elemento ng div na magsisilbing mga pahina para sa aming site.

Kaya, narito ang kung paano ang hitsura ng demo.html sa puntong ito:

<!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">
			<!-- 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>

Hakbang 2

Ngayon na mayroon kaming mga DIV sa lugar, maaari naming ilagay at lumikha ng nabigasyon para sa pahina. Tulad ng iyong nahulaan, gagamitin namin ang isang hindi nakaayos na listahan <ul> upang itigil ang mga link at ang mga ID ng DIV bilang mga target para sa mga link na ito. Gayundin, idaragdag namin ang klase na naglalaman ng lahat ng "mga pahina" ng DIV. Ang klase na ito ay makakatulong sa amin na madaling hanapin sa mga DIV na ito kapag nilikha namin ang aming script. Kaya, narito ang dapat mong magkaroon ngayon:

<!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>

Tandaan: Ang titik (key) sa loob ng panaklong ay ang key na gagamitin namin mamaya bilang nabigasyon para sa aming pahina.

Hakbang 3

Ang istraktura ng aming test page ay kumpleto na ngayon ngunit kulang sa magandang paningin. Kaya, magdagdag ng ilang CSS at jazz ito. Ang isang bagay na dapat tandaan bago namin simulan ang estilo ay ang aming pahina ay dapat magmukhang mabuti kahit na ang JavaScript ay hindi nakasindi. Ang mga script, ayon sa palagay ko, ay dapat palaging gagamitin bilang isang karagdagan sa mga gumagamit na may JavaScript na nakasindi ngunit hindi dapat magpalipat-lipat sa mga hindi. Kami ay mga taga-disenyo ng web/taga-gawa pagkatapos ng lahat, at pinapahalagahan namin ang tungkol sa kakayahang magamit, tama?

Maaari mong makita ang hitsura na gusto nating makuha sa screenshot sa itaas. Ito ay simple at gumagamit ng ilang mga maganda, naka-bold na kulay upang bigyang pansin ang iba't ibang mga seksyon. Kaya narito ang aming CSS:

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; }

Tandaan: Nagdagdag ako ng ilang mga panuntunan sa paglilinaw sa sarili upang mahanap upang magtrabaho sa paligid ng kakulangan ng taas dahil sa mga panloob na mga elemento na lumulutang. Sa ibang salita, ang mga panuntunan sa margin mula sa itaas na lalagyan ng lalagyan ay magkakaroon ng tamang epekto sa nabigasyon <ul>.

Hakbang 5

Sa puntong ito sa pagtuturo, dapat kang magkaroon ng pahina na naghahanap ng ganito:

Ito ay isang umaandar na pahina at ito ay gumagana ng maayos nang hindi nangangailangan ng JavaScript na nasindi. Gayunpaman, tulad ng sinabi ko dati, magbigay ng kaunting karagdagan sa mga gumagamit na may JavaScript na nakasindi sa kanilang mga browser. Gagawin namin ito sa dalawang hakbang. Una, lilikha kami ng dalawang mga kagamitan na itago at ipapakita ang mga pahina nang naaangkop. At pangalawa, magdaragdag kami ng ilang mga koda upang matukoy ang mga key na pinindot ng gumagamit. Lumikha ngayon ng isang datos na tinatawag na keypress_nav.js at makapagtrabaho na sa aming mga pag-andar.

Hakbang 6

Kailangan namin ang dalawang pag-andar para sa aming script upang gumana tulad ng ninanais. Ang isa sa mga kagamitan ay tatawagan kapag pinindot ng gimagamit ang isa sa aming mga paunang natukoy na mga nabogasyong key (Ang mga titik sa panaklong mula sa Hakbang 2) at itatago ang lahat ng iba pang mga lalagyan na nagpapakita lamang ng DIV na nauugnay sa key na ito. Ito ang hitsura ng aming unang pag-andar:

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

Ngayon, ang aming ikalawang kagamitan ay magkakaroon ng isang hanay ng mga link at nakalagay ang mga ito sa pagpindot sa target na kagamitan. Sa ibang salita, ang pag-gamit ay makakakuha ng aming mga link sa nabigasyon, kunin ang katangian ng "href" at ipakita ang nararapat na DIV sa pagpindot dito. Kaya, narito ang hitsura ng ikalawang kagamitan:

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

Hakbang 7

Ngayon na may koda na ang aming mga pag-andar, kailangan naming tawagan ang mga ito nang naaangkop kapag umaandar na ang pahina. Ang unang bagay na kailangan naming gawin ay itago ang lahat ng mga elemento na may klase na lalagyan na may pagbubukod sa DIV na may ID sa bahay. Susunod, kailangan naming tawagan ang kagamitan na showViaLink() sa mga link sa loob ng aming nabigasyon <ul> bilang panukat nito. Huling ngunit importante, kailangan naming makinig para sa gumagamit ng keypress at tawagan ang showViaPress() na kagamitan na may nararapat na ID bilang panukat nito. Ito ay maaaring maganap sa pamamagitan ng paggamit ng isang lumilipat sa key na pinindot.

Ang pihitan ay magkakaroon ng 5 mga kaso (isa para sa bawat link) at ang numero nito ay tumutugma sa numero ng ASCII para sa keypress. Halimbawa, kung pinindot ang pindutan na "a", gagamitin ng switch ang case 97. Narito ang kung ano ang koda:

$(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");
		}
	});
});

Hakbang 8

Ngayon na mayroon kami ng lahat ng mga piraso ng kaalaman, maaari naming ilagay ito magkasama. Narito kung ano ang huling pag-ulit ng aming script ay dapat maging kamukha:

$(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

Tingnan ang script sa aksyon sa demo na pahina.
Ang paterno na ginamit sa pagtuturo na ito ay ginawa ng Taylor Satula.

TAPOS