JQuery példák

Szerző: Sallai András
Copyright © Sallai András, 2012, 2013
Licenc: GNU Free Documentation License 1.3
Web: http://szit.hu

Űrlapkezelés

Az űrlapkezelést a hexadecagon területének számításával mutatom be:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
 
 
</head>
<body>
 
<form>
<fieldset>
<legend>Hexaéder</legend>
<input type="text" id="mezo" name="mezo"><br>
<input type="button" id="szamit" value="Számít">
</fieldset>
</form>
 
 
<script>
$("#szamit").click(function () {
	var a = $("#mezo").val();
	var t = 4 * Math.pow(a, 2) * Math.cos(Math.PI/16) / Math.sin(Math.PI/16);
	$("#mezo").val(t.toFixed(2));
})
</script>
 
 
</body>
</html>

Vizsgáljuk meg az űrlap tartalmát:

$("#szamitGomb").click(function(){	
	if (  $("#tomeg").val().trim().length > 0 ) {
		var tomeg = $.trim($("#tomeg").val());	
		var magassag = $("#magassag").val();	
		var tti = tomeg /Math.pow(magassag, 2);
		$("#eredmeny").text("Eredmény: " + tti);		
	}else {		
		$("#eredmeny").html("Üres");
	}
	$("#eredmeny").slideToggle("slow");
});

Űrlap név alapján

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
 
 
</head>
<body>
 
<form>
<fieldset>
<legend>Hexaéder</legend>
<input type="text" id="mezo" name="mezo"><br>
<input type="button" id="szamit" value="Számít">
</fieldset>
</form>
 
 
<script>
$("#szamit").click(function () {
	var a = $("[name=mezo]").val();
	var t = 4 * Math.pow(a, 2) * Math.cos(Math.PI/16) / Math.sin(Math.PI/16);
	$("[name=mezo]").val(t.toFixed(2));
})
</script>
 
 
</body>
</html>

Rádiógombok feldolgozása

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
 
 
</head>
<body>
 
<form>
<fieldset>
<legend>Mitől dinamikus egy weboldal?</legend>
<input type="radio" name="dinamikus" value="egy"> Izlésesen elhelyezett animációkat tartalmaz.<br>
<input type="radio" name="dinamikus" value="ketto"> Animációkat tartalmaz.<br>
<input type="radio" name="dinamikus" value="harom">A felhasználó adatokat közöl a webszerverrel<br>
<input type="button" id="mehet" value="Mehet"><br>
<input type="text" name="eredmeny">
</fieldset>
</form>
 
 
<script>
$(document).ready(function () {
	$("[name=eredmeny]").hide();	
})
 
$("#mehet").click(function () {
	var valasztott = $("input[name=dinamikus]:checked").val();
	$("[name=eredmeny]").show();
	var valasz = "";
	if (valasztott == "harom") {
		valasz = "Helyes válasz"	
	}
	else {
		valasz = "ROSSZ válasz!";
	}
	$("[name=eredmeny]").val(valasz);
})
</script>
 
 
</body>
</html>

Legördülő listadoboz kezelése

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
 
 
</head>
<body>
 
<form>
<fieldset>
<legend>Válasszon járművet</legend>
 
<select name="jarmu" id="jarmu">
    <option value="opel">Opel</option>
    <option value="bmw">BMW</option>
    <option value="ford">Ford</option>
    <option value="citroen">Citroen</option>
</select>
 
<input type="button" id="mehet" value="Mehet"><br>
<input type="text" name="eredmeny">
</fieldset>
</form>
 
 
<script>
$(document).ready(function () {
	$("input[name=eredmeny]").hide();	
})
 
$("#mehet").click(function () {
	var valasztott = $("[name=jarmu]").val();
	$("input[name=eredmeny]").show();
	$("input[name=eredmeny]").val("A választott: " + valasztott);
})
</script>
 
 
</body>
</html>

Másként

$('select.foo option:selected').val();
$('select.foo').val();
$('input:checkbox:checked').val();
$('input:radio[name=bar]:checked').val();

Inputmezők változása

<input type="text" class="mezo"><br>
<input type="text" class="mezo"><br>
<input type="text" class="mezo"><br>
<div id="egy"></div>

$('.mezo').on('change', function(){
    $('#egy').append("a");
});

Menü

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebSandbox</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
 
</head>
<body>
 
<div id="menu">Mehet</div>
<div id="menupont">
<ul>
	<li><a href="#">Első</a></li>
	<li><a href="#">Második</a></li>
	<li><a href="#">Harmadik</a></li>
</ul>
 
</div>
 
 
</body>
</html>

style.css

body {
	margin:0;
	padding:0;
}
#menupont {
	position:absolute;
	top: 30px;
	background-color: #6565f5;
	padding: 5px;
	display: none;
}
 
#menu {
	position: absolute;
	top: 0;
	background-color: #757580;
	padding: 5px;
}
#menupont ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
 
#menupont ul a{
	text-decoration: none;
	color: white;
}

script.js

$("#menu").click(function(){
  $("#menupont").slideToggle();
 
});

Működés:

Mehet

Ha ez a példa nem működik, újra kell tölteni ezt a weboldalt.

Menü 2

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Menü</title>
<style>
 
.menulist {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
.menulist li ul {
	list-style-type: none;
}
 
.menulist li {
	float: left;
	width: 100px;
	position: relative;
}
 
.menulist li a {
	text-decoration: none;
}
 
.menulist li a:hover {
	color: #000;
}
 
.menulist li ul {
	display: none;
	padding: 0;
}
 
</style>
</head>
<body>
 
<div id="menu">
	<ul class="menulist">
		<li><a href="#">Főoldal</a></li>
		<li><a href="#">Szolgáltatások</a>  				
			<ul>	
				<li><a href="#">Kapcsolat</a></li>
				<li><a href="#">Termékek</a></li>
  				<li><a href="#">Támogatás</a></li>
			</ul>
		</li>
  		<li>
  			<a href="#">Magunkról</a>
  			<ul>
  				<li><a href="#">Cég</a></li>
  				<li><a href="#">Küldetés</a></li>
  				<li><a href="#">Elérhetőség</a></li>
  			</ul>
  		</li>
	</ul>
</div>
 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {	
	$('.menulist li').hover(
		function() {
			$('ul', this).fadeIn();
		},
		function() {
			$('ul', this).fadeOut();
		}
	);
});
</script>
 
</body>
</html>

Működés: