szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:jquery|< jQuery]]

====== JQuery példák ======

  * **Szerző:** Sallai András
  * Copyright (c) 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:
<code html 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 = $("#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>
</code>


Vizsgáljuk meg az űrlap tartalmát:
<code javascript>
$("#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");
});
</code>

===== Űrlap név alapján =====

<code html 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>
</code>

===== Rádiógombok feldolgozása =====

<code html 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>
</code>

===== Legördülő listadoboz kezelése =====

<code html 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>
</code>
===== Másként =====

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

===== Inputmezők változása =====

<code html>
<input type="text" class="mezo"><br>
<input type="text" class="mezo"><br>
<input type="text" class="mezo"><br>
<div id="egy"></div>
</code>
<code javascript>
$('.mezo').on('change', function(){
    $('#egy').append("a");
});
</code>
===== Menü =====

<code html 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>
</code>


<code css 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;
}
</code>


<code javascript script.js>
$("#menu").click(function(){
  $("#menupont").slideToggle();

});
</code>



Működés:

<html>

<style>
body {
	margin:0;
	padding:0;
}

#menusl {
	position: static;
	background-color: #757580;
	padding: 5px;
	width: 50px;
}

#menupontsl {
	background-color: #6565f5;
	padding: 5px;
	display: none;
	width: 150px;
}

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

#menupontsl ul li a{
	text-decoration: none;
	color: white;
}
</style>




<div id="menusl">Mehet</div>
<div id="menupontsl">
  <ul>
	<li><a href="#">Első</a></li>
	<li><a href="#">Második</a></li>
	<li><a href="#">Harmadik</a></li>
  </ul>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(document).ready(function() {

    $("#menusl").click(function(){
        $("#menupontsl").slideToggle();
    });

});
</script>


</html>

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



===== Menü 2 =====

<code html 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>
</code>


Működés:

<html>

<style>

menulist32 {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.menulist32 li {
	float: left;
	width: 150px;
	position: relative;
}
.menulist32 li a {
	text-decoration: none;
}
.menulist32 li a:hover {
	color: #000;
}
.menulist32 li ul {
	list-style-type: none;
	display: none;
	padding: 0;
}
#menu32 {
        height: 150px;
}
</style>


<div id="menu32">
	<ul class="menulist32" style="list-style-type: none; margin: 0; padding: 0;">
		<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>
$(document).ready(function() {	
	$('.menulist32 li').hover(
		function() {
			$('ul', this).fadeIn();
		},
		function() {
			$('ul', this).fadeOut();
		}
	);
});
</script>

</html>