Seorang pengembang perangkat lunak aplikasi berbasis Windows sudah tidak asing lagi dengan tipe tab view karena memang tampilan tab sangat membantu user untuk dapat mengakses banyak sub window dalam satu window utama. Biasanya tab view digunakan pada window kotak dialog seperti setting, preferences atau options.
Tetapi hal ini berbeda dalam dunia web, penggunaan tampilan tab view baru-baru ini saja mulai banyak digunakan, terutama dengan munculnya Ajax dan semakin cepatnya koneksi internet sehingga memungkinkan interaktifitas yang lebih baik.
Penggunaan tab view pada era sebelum munculnya banyak library Ajax memang jarang dikarenakan tidaklah mudah membuat tampilan tab view yang mampu menampilkan tab-tab secara langsung (bukan berganti halaman web). Amazon.com juga menggunakan tampilan tab view tapi tidak mengimplementasikan fungsi / mekanisme tab view secara interaktif / dynamic loading untuk content dalam tab tetapi hanya mensimulasikan tampilan tab untuk navigasi yang memudahkan pengunjung dalam berganti halaman.
Dengan adanya YUI, kita tidak perlu bersusah-susah lagi membuat tampilan tab view yang mampu merespon cepat karena pemrosesan terjadi di browser klien karena YUI sudah menyediakan librarynya.
Berikut ini adalah contoh tampilan tab view yang akan kita hasilkan menggunakan YUI:
Langkah-langkah membuat tab view dengan YUI:
1. Definisikan tag div yang akan menjadi container
2. Definsikan area judul tab dengan tag <ul> serta masing-masing judul tab dengan tag <li>
3. Definisikan bagian content tab dengan tag <div> sebagai penampung dan isi masing-masing tab juga dengan tag <div>
Berikut ini adalah kode dari ketiga langkah tersebut:
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li> <a href="#tab1"><em>Tab One Label</em></a> </li>
<li class="selected"> <a href="#tab2"><em>Tab Two Label</em></a> </li>
<li> <a href="#tab3"><em>Tab Three Label</em></a> </li> </ul>
<div class="yui-content"><div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
4. Menyisipkan kode HTML untuk referensi ke CSS dan Javascript dari YUI
Tampilan tab dapat terjadi karena style CSS yang sudah didefinisikan oleh YUI oleh karena itu kita perlu mereferensikan CSS yang disertakan.
Letakkan kode ini di dalam tag <head>, berikut ini adalah kodenya:
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="./build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./build/element/element-beta.js"></script>
<script type="text/javascript" src="./build/tabview/tabview.js"></script>
5. Menambahkan kode Javascript untuk menginisialisasi TabView dari tag-tag yang sudah kita definisikan untuk tab view, tanpa kode ini, tidak akan terjadi mekanisme perpindahan tab apabila user melakukan klik pada judul tab. Letakkan kode berikut setelah tag
<script type="text/javascript">
var tabView = new YAHOO.widget.TabView('demo');
</script>
Simpan kode HTML ini dalam file tabview.html (letakkan file ini satu level dengan folder build yang didapat dari download YUI), kemudian tampilkan di browser.
Berikut ini adalah kode HTML dan Javascript lengkapnya:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Benpinter Tab View</title>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="./build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./build/element/element-beta.js"></script>
<script type="text/javascript" src="./build/tabview/tabview.js"></script>
</head>
<body class="yui-skin-sam">
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script type="text/javascript">
var tabView = new YAHOO.widget.TabView('demo');
</script>
</body>
</html>
