Kita mudah membuat tab dengan jQuery UI dengan coding seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Tab</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<div id=”tabku”>
<ul>
<li><a href=”#a”>Tab 1</a></li>
<li><a href=”#b”>Tab 2</a></li>
</ul>
<div id=”a”>Ini isi dari tab 1 yang dilink dari Tab 1</div>
<div id=”b”>Ini isi dari tab2 yang akan muncul jika Tab 2 diklik</div>
</div><!–end of tabku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.tabs.js”>
</script>
<script>
(function($){
$(“#tabku”).tabs();
})(jQuery);
</script>
</body>
</html>
Penjelasan coding di atas adalah
- Container memakai id tabku
- Coding untuk tab adalah di dalam <ul></ul>
- Dalam tiap <li></li> akan muncul tab yang melink ke suatu div
- Jika link dalam <li></li> diklik, maka akan muncul sesuai link tersebut
- Library yang dipakai dalam coding ini adalah
– css/smoothness/jquery-ui-1.8.16.custom.css
– development-bundle/jquery-1.6.2.js
– development-bundle/ui/jquery.ui.core.js
– development-bundle/ui/jquery.ui.widget.js
– development-bundle/ui/jquery.ui.tabs.js - Pengaktifan tab dilakukan dengan coding javascript jQuery:
(function($){
$(“#tabku”).tabs();
})(jQuery);
Demonya dapat dilihat di http://aris.proweb.asia/tab.html dengan tampilan seperti di bawah ini
Penjelasan lebih lanjut mengenai tab dengan jQuery UI dapat dilihat di http://jqueryui.com/demos/tabs/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.