javascript és jquery

Egy rövid példában fogunk megvalósítani pár javascript és jquery függvényt.
A példa alkalmazásban egy 4x3-as táblázatot hozunk létre, amiben a kurzormozgató nyilakkal tudunk mozogni a mezők között. Enter nyomására a következő mezőre ugrik. Az új ablakban gomb megnyitja egy új ablakban az alkalmazást, 600x300 pixel felbontásban. Esc nyomására felugrik egy ablak, hogy bezárjuk-e az ablakot. Az induláskor rögtön az inputbox2 mezőre fog kerülni a focus.

html fájl: 
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js" ></script>
	<script type="text/javascript" src="javascript.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
	<form>
		<table>
			<tr>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox1" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox2" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox3" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox4" /></td>
			</tr>
			<tr>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox5" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox6" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox7" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)" id="inputbox8" /></td>
			</tr>
			<tr>
				<td><input type="text" onkeypress="return tabE(this,event)"  id="inputbox9" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)"  id="inputbox10" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)"  id="inputbox11" /></td>
				<td><input type="text" onkeypress="return tabE(this,event)"  id="inputbox12" /></td>
			</tr>
		</table>
	</form>
	<button onclick="ujAblak()">Új ablakban</button><br /><br />
	Aktuális input mező id: <div id="div"></div>
</body>
</html>

javascript.js 
window.onload = function() { // rá fókuszál valamelyik elemre
	var input = document.getElementById("inputbox2").focus();
}

//----------------------------------------------------------------------------------
window.onkeyup = function (event) { // esc-re bezárja az ablakot
	if (event.keyCode == 27) {
		var r=confirm("Biztosan bezárja az ablakot?");
		if (r==true) {
	  		window.close();
        }
	}
}

//----------------------------------------------------------------------------------	
function tabE(obj,e){ // enter nyomására a következo mezore ugrik

	var e=(typeof event!='undefined')?window.event:e;// IE : Moz 
	if(e.keyCode==13){ 
		var ele = document.forms[0].elements; 
		for(var i=0;i<ele.length;i++){ 
			var q=(i==ele.length-1)?0:i+1;// if last element : if any other 
			if(obj==ele[i]){
				ele[q].focus();
				break
			} 
		} 
		return false; 
	} 
} 

//----------------------------------------------------------------------------------
function ujAblak() { // új ablak nyitás
    var myWindow = window.open("teszt.html", "", "width=600, height=300");
}

jquery.js 
$(document).ready(function () { 
 
  $('input').keyup(function (e) { // mozgatást teszi lehetové nyilakkal az elemeken
 
    if (e.which == 39) { // right arrow
      $(this).closest('td').next().find('input').focus();
 
    } else if (e.which == 37) { // left arrow
      $(this).closest('td').prev().find('input').focus();
 
    } else if (e.which == 40) { // down arrow
      $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
 
    } else if (e.which == 38) { // up arrow
      $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
    }

  });
 
  // un-comment to display key code
  // $("input").keydown(function (e) {
  //   alert(e.which);
  // });
  
    $("input").focusin(function() { // az aktuális input mező id-jét kiíratjuk
		var id = $(this).attr('id'); // lekérdezzük az aktuális input mezo id-jét
		$("#focusin").val( id );
		$( "div" ).html( id );
	});
});
2013.12.01.