Membuat Select Menu Dengan JQuery UI


Select menu atau yang biasa kita buat adalah dengan HTMI adalah form select option, kali ini kita membuat Select menu dengan JQuery UI.

Caranya sangat mudah , kita hanya membuat kerangka form option seperti biasa dan hanya memberikan fungsi selectmenu() jquery UI, perhatikan contoh berikut ini:

selectmenu.html

<!DOCTYPE html>
<html>
<head>
	<title>JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI</title>	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Membuat Select Menu Dengan JQuery UI | www.malasngoding.com</h1>	
	
	<div class="demo">		
		<form action="#">
			<fieldset>
				<label for="tutorial">Pilih tutorial</label>
				<select name="tutorial" id="tutorial">
					<option>AngularJS</option>
					<option>NodeJS</option>
					<option selected="selected">JQuery UI</option>
					<option>JQuery Mobile</option>
					<option>JQuery</option>
				</select>
			</fieldset>
		</form>
	</div>
 
</body>
<script type="text/javascript">
	$(document).ready(function(){
		
		$( "#tutorial" ).selectmenu();		
		
	});
</script>
</html>
style.css

body{
	font-family: sans-serif;
}
 
h1{
	text-align: center;
}
 
fieldset{
	border: 0;
}
label{
	display: block;
	margin: 30px 0 0 0;
}
select{
	width: 200px;
}
dan hasilnya
jquery UI

bisa teman-teman perhatikan , pertama buat kerangka select option html nya, ohya pada element kita harus memberikan class atau id, disini saya memberikan id ,.

<div class="demo">		
	<form action="#">
		<fieldset>
			<label for="tutorial">Pilih tutorial</label>
			<select name="tutorial" id="tutorial">
				<option>AngularJS</option>
				<option>NodeJS</option>
				<option selected="selected">JQuery UI</option>
				<option>JQuery Mobile</option>
				<option>JQuery</option>
			</select>
		</fieldset>
	</form>
</div>
dan langsung kita berikan function selectmenu() yang telah di sediakan oleh jquery UI

<script type="text/javascript">
	$(document).ready(function(){
		
		$( "#tutorial" ).selectmenu();		
		
	});
</script>
jika teman-teman ingin melakukan custom pada select menunya teman-teman bisa langsung membaca panduan resmi jquery ui untuk membuat selectmenu dengan jquery ui


See the Pen Membuat Select Menu Dengan JQuery UI by Budiatu (@budiatu1) on CodePen.

Tags

Post a Comment

Post a Comment

Previous Post Next Post