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

====== A jQuery UI plugin ======

===== Húzható doboz =====

<code html index.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Húzható doboz</title>

<style type="text/css">
.doboz {
	background-color: #dddddd;
	border: 2px solid #0f67a1;
	width: 150px; 
	height: 50px;	
}
</style>

</head>
<body>
<h1>Tartalom</h1>
<div class="doboz"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function(){
	$(".doboz").draggable({
		opacity: 0.7
	});
});
</script>

</body>
</html>
</code>




<html>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript"> 
$(document).ready(
	function() 
	{
		$(".doboz").draggable({
			opacity: 0.7
		});
	}
);
</script>


<div class="doboz" style="background-color:#dddddd; border: 2px solid #0f67a1; width: 150px; height: 50px;"></div>

</html>


===== Ejtés =====

<code html index.html>
<!doctype html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title>jQuery-UI</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Ejtés</h1>

	<div id="doboz"></div>	
	<div id="kontener"></div>

	<script src="jquery-3.2.1.js"></script>
	<script src="jquery-ui.js"></script>
	<script src="script.js"></script>
</body>
</html>
</code>


<code css style.css>
#doboz {
	width: 150px;
	height: 50px;
	background-color: #F8EF21;
	border-style: solid;
	border-width: 2px;
	border-color: #EBCA1F;
}


#kontener {
	width: 250px;
	height: 150px;
	background-color: #21E0F8;
	border-style: solid;
	border-width: 2px;
	border-color: #219AF8;
}

</code>

<code javascript script.js>
$("#doboz").draggable({
	opacity: 0.7	
});

$("#kontener").droppable({
	drop: function(event, ui) {
		$("#kontener").html("Meg vagy");
	}
});
</code>

===== Húzás és ejtés =====
<code html>
<div id="egy"><p>egy</p></div>
<div id="ketto"><p></p></div>
</code>

<code css>
#egy {
	width: 50px;
	height: 50px;
	background-color: blue;
}

#ketto {
	width: 100px;
	height: 100px;
	background-color: yellow;
}
</code>

<code javascript script.js>
$('#egy').draggable();

$('#ketto').droppable({
	drop: function(event, ui){
		$(this).find("p").text('Siker');
		$(ui.draggable).css('background-color', 'red');
		var currentId = $(ui.draggable).prop('id');
		console.log(currentId);
	},
	out : function(event, ui) {
		console.log('elhagyta');
	}
});
</code>




<html>
<div id="egy_huzasejtes"><p>egy</p></div>
<div id="ketto_huzasejtes"><p></p></div>
<div id="konzol_huzasejtes"></div>


<style>
#egy_huzasejtes {
	width: 50px;
	height: 50px;
	background-color: blue;
}

#ketto_huzasejtes {
	width: 100px;
	height: 100px;
	background-color: yellow;
}
</style>

<script>
$('#egy_huzasejtes').draggable();

$('#ketto_huzasejtes').droppable({
	drop: function(event, ui){
		$(this).find("p").text('Siker');
		$(ui.draggable).css('background-color', 'red');
		var currentId = $(ui.draggable).prop('id');
		$('#konzol_huzasejtes').text('Azonosító: ' + currentId);
	},
	out : function(event, ui) {
		$('#konzol_huzasejtes').text('elhagyta');
	}
});
</script>
</html>


===== Tooltip =====

Kód:
<code html index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tooltip</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
p {
	padding: 10px; 
	background-color: green; 
	display: inline; 
	border-radius:3px;
}
</style>
</head>
<body>

<p title="Egy JavaScript keretrendszer">jQuery nyelv</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$("p").tooltip();
</script>


</body>
</html>
</code>


Minta:
<html>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<p id="jquerynyelv" title="Egy JavaScript keretrendszer" 
style="padding: 10px; background-color: green; display: inline; border-radius:3px;">jQuery nyelv</p>
<script>
$(document).ready(function(){
    $("#jquerynyelv").tooltip();
});
</script>

<style>
  label {
    display: inline-block;
    width: 5em;
  }
</style>
</html>




===== Harmónika =====

A kód:
<code html index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Harmónika</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
#harmonika {
	width: 400px;
	font-size: 10px;
}
 
#harmonika div {
	height: 100px;
}
body {
	background-color: #90EE90;
}
</style>
</head>
<body>


<div id="harmonika">

<h3>Első</h3>
<div>
<p>Első bekezdés tartalma</p>
</div>

<h3>Második</h3>
<div>
<p>Második bekezdés tartalma</p>
</div>

<h3>Harmadik</h3>
<div>
<p>Harmadik bekezdés tartalma</p>
</div>

<h3>Negyedik</h3>
<div>
<p>Negyedik bekezdés tartalma</p>
</div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$('#harmonika').accordion();
</script>

</body>
</html>
</code>




Minta:

<html>
<iframe sandbox="allow-scripts" src="https://szit.hu/download/peldak/jquery/harmonika.html" width="500" height="300"></iframe>
</html>

===== Menü =====

<code html index.html>
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>JQuery</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
.ui-menu {
    width: 120px;
    font-size: 10px;
}
</style>

</head>
<body>

<ul id="menu">
	<li><a href="#">Első 1</a></li>
	<li><a href="#">Második 2</a></li>
	<li><a href="#">Harmadik 3</a>
		<ul>
			<li><a href="#">Almenü 3-1</a></li>
			<li><a href="#">Almenü 3-2</a></li>
			<li><a href="#">Almenü 3-3</a></li>
			<li><a href="#">Almenü 3-4</a></li>
			<li><a href="#">Almenü 3-5</a></li>
		</ul>
	</li>
	<li><a href="#">Negyedik 4</a></li>
	<li><a href="#">Ötödik 5</a></li>
</ul>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">

$("#menu").menu();

</script>

</body>
</html>
</code>




Példa:

<html>
<iframe sandbox="allow-scripts" 
src="https://szit.hu/download/peldak/jquery/menu.html" width="500" height="300"></iframe>
</html>