Tab dengan jQuery UI
Mar. 31, 2010
Tab dengan jQuery UI
Ini berawal ketika saya berpikir bagaimana sih caranya untuk menghemat content dari halaman pada project yang saya buat. Nah,, bagaimana kalau pakai tab. Akhirnya saya menerapkan tab dengan jQuery.
berikut contohnya :
Ini dia Source Code untuk bikin tab seperti di atas :
<html><head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> ;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs1").tabs();
});
</script></head>
<body>
<div id="tabs1">
<ul>
<li> <a href="#tab-1"><span>Satu</span></a> </li>
<li> <a href="#tab-2"><span>Dua</span></a> </li>
<li> <a href="#tab-3"><span>Tiga</span></a> </li>
</ul>
<div id="tab-1">
isi dari tab 1
</div>
<div id="tab-2">
isi dari tab 2
</div>
<div id="tab-3">
isi dari tab 3
</div>
</div>
</body>
</html>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> ;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs1").tabs();
});
</script></head>
<body>
<div id="tabs1">
<ul>
<li> <a href="#tab-1"><span>Satu</span></a> </li>
<li> <a href="#tab-2"><span>Dua</span></a> </li>
<li> <a href="#tab-3"><span>Tiga</span></a> </li>
</ul>
<div id="tab-1">
isi dari tab 1
</div>
<div id="tab-2">
isi dari tab 2
</div>
<div id="tab-3">
isi dari tab 3
</div>
</div>
</body>
</html>
Pada Source Code di atas terdapat 3 buah file yang harus anda dapatkan apabila anda ingin mencobanya dalam posisi offline. Berikut adalah file-file yang anda perlukan.
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
Simpan ketiga file tersebut
Mudah kan,, Nah..
Selamat Mencoba :)
