A jQuery UI plugin

Húzható doboz

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

Ejtés

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>

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

script.js

$("#doboz").draggable({
	opacity: 0.7	
});
 
$("#kontener").droppable({
	drop: function(event, ui) {
		$("#kontener").html("Meg vagy");
	}
});

Húzás és ejtés

<div id="egy"><p>egy</p></div>
<div id="ketto"><p></p></div>

#egy {
	width: 50px;
	height: 50px;
	background-color: blue;
}
 
#ketto {
	width: 100px;
	height: 100px;
	background-color: yellow;
}

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

egy

Kód:

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>

Minta:

jQuery nyelv

Harmónika

A kód:

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>

Minta:

Menü

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>

Példa: