Berikut ini adalah tutorial sederhana untuk membuat sortir content menggunakan jQuery.
Untuk memulai tutorial ini, anda harus mendownload jQuery terlebih dahulu,
script dapat di download di jquery.com
Mari kita mulai membuat sortir content sederhana :
1. Buat file html dasar dan save dengan nama sortir.html :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” content=”” />
<title>Sortir Content</title>
</head>
<body>
</body>
</html>
2. Panggil script jquery, dan taruh diantara <head></head>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” content=”” />
<title>Sortir Content</title>
<script type=”text/javascript” src=”jquery.js”></script>
</head>
3. Buat html seperti dibawah ini :
<div id=”information”>
<h1>Information For</h1>
<p>
<input type=”radio” name=”info” value=”journalist” class=”information” checked /> Jurnalist<br />
<input type=”radio” name=”info” value=”customer” class=”information” /> Customer<br />
<input type=”radio” name=”info” value=”principals” class=”information” /> Principals<br />
<input type=”radio” name=”info” value=”job_seeker” class=”information” /> Job Seeker<br />
</p>
<div>
<p style=”text-align: right;padding-right: 10px;”>
<select class=”journalist”>
<option>+ Journalist</option>
<option>Event News</option>
<option>What’s New</option>
<option>Company In Brief</option>
</select>
<select class=”customer” style=”display: none;”>
<option>+ Customer</option>
<option>Pharmaceutical</option>
<option>Food</option>
<option>Feed</option>
<option>Medical Devices</option>
<option>Cosmetic</option>
<option>Microbiology Media</option>
<option>Valuable Services</option>
<option>Customer & Principals</option>
</select>
<select class=”principals” style=”display: none;”>
<option>+ Principals</option>
<option>Company In Brief</option>
<option>Products</option>
<option>Branch Offices</option>
<option>Event News</option>
</select>
<select class=”job_seeker” style=”display: none;”>
<option>+ Job Seeker</option>
<option>Why Join Us</option>
<option>Job Opening</option>
<option>Application Form</option>
</select>
</p>
</div>
</div><!– end of information –>
4. Berikut ini adalah barisan script untuk menjalankan sortir content, taruh script ini di bagian <head></head> :
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” content=”” />
<title>Sortir Content</title>
<script type=”text/javascript” src=”/jquery.js”></script>
<script type=”text/javascript”>
$(function() {
$(“body”).find(“input.information”).click(function(){
var value = “.” + $(this).attr(“value”);
$(value).show().siblings().hide();
});
});
</script>
</head>
Jika sudah melakukan semuanya, anda sudah dapat melihat hasilnya.
jalankan sortir.html di browser anda.
Selamat mencoba.. 😀
Download Source: sortir.rar
Kunjungi www.proweb.co.id untuk menambah wawasan anda.