Membuat Area Tab Konten yang Rapi Menggunakan CSS & jQuery

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Salah satu tantangan terbesar bagi para desainer web adalah menemukan cara untuk menempatkan banyak informasi pada halaman tanpa kehilangan kegunaan. Konten tab adalah cara terbaik untuk menangani masalah ini dan telah banyak digunakan di blog baru-baru ini. Hari ini kita akan membangun kotak informasi tab kecil sederhana di HTML, kemudian membuatnya berfungsi dengan menggunakan beberapa Javascript sederhana, dan akhirnya kita akan mencapai hal yang sama dengan menggunakan pustaka jQuery.

Langkah 1

Hal yang pertama, kita butuh sesuatu yang terlihat mengagumkan. Juga perjalanan singkat ke Photoshop dan voila kita memiliki mockup yang bagus dari komponen tab kita. Ini cukup sederhana dengan beberapa gradien tambahan agar membuatnya mengagumkan seperti nettuts. Anda bisa mengambil file Photoshop PSD untuk gambar ini jika Anda ingin melihatnya lebih dekat, tapi ini cukup sederhana dan sebenarnya kita bisa membangunnya dari JPG flat.

Langkah 2

Hal pertama yang harus dilakukan saat membangun tentu saja adalah untuk mendapatkan gambaran kasar bagaimana Anda akan melakukannya. Hal ini semakin memudahkan saat semakin banyak hal yang telah Anda kembangkan. Melihat gambar ini saya akan mengatakan hal terbaik untuk dilakukan adalah:

Memiliki kontainer <div> yang akan kita tempatkan segala sesuatu di dalamnya. Dengan begitu jika kita perlu memposisikan kotak kita atau memasukkannya ke sidebar, kita bisa mengambil semuanya yang dibungkus di dalam div dan copy+paste di suatu tempat.
Kemudian kita akan memiliki area judul, mungkin dengan sebuah tag <h>
Kemudian di bawahnya kita akan memiliki tag div kedua yang akan menampung tab dan konten. Ini adalah kotak abu-abu gelap pada gambar.
Kemudian di dalam sana kita akan menggunakan unordered list ul dimana setiap elemen adalah link untuk tab. Ini akan membiarkan kita menggunakan sedikit <li> dari daftar untuk memposisikan tab dan sedikit <a> untuk menata mereka dan memberi mereka rollover dan status on/off.
Kemudian di bawah ini kita akan membuat area <div> terakhir yang memiliki konten untuk setiap tab. Kita memerlukan satu untuk setiap tab ini, dan kita akan menampilkan atau menyembunyikannya tergantung pada tab mana yang telah diklik.

JADI untuk meringkasnya, akan menjadi seperti ini:

1
2	<div>
3	<h4>Heading</h4>
4	<div>
5
6	<ul>
7	<li><a>Tab</a></li>
8	<li><a>Tab</a></li>
9	<li><a>Tab</a></li>
10	</ul>
11
12	<div>Content for Tab 1</div>
13	<div>Content for Tab 2</div>
14	<div>Content for Tab 3</div>
15
16	</div>
17
18	</div>

Jangan khawatir jika melihat gambar tersebut tidak segera membuat Anda memikirkan strukturnya. Terkadang Anda hanya perlu melakukan sesuatu dengan trial and error. Dalam kasus saya, saya telah membuat tab kecil ini beberapa kali dan saya tahu ini adalah cara sederhana yang bagus dalam membuatnya.

Juga bagus untuk memikirkan struktur seperti ini sebelum Anda memiliki banyak nama kelas dan id dan konten karena bisa sulit melihat hutan dari pepohonan di kemudian hari. Apalagi saat Anda menambahkan konten untuk semua tab yang berbeda.

Jadi sekarang kita punya gambaran bagaimana membangun struktur kita, mari kita melakukannya!

Langkah 3

Sekarang jika Anda mengikuti tutorial saya di PSDTUTS, Anda akan tahu bahwa saya menyukai latar belakang gradien yang bagus. Jadi sebelum kita mulai dengan struktur tab, mari kita mendapatkan latar belakang yang bagus!

Buka Photoshop, buat dokumen 1000px x 1000px dan tarik gradien radial (halus) yang bagus seperti yang ditunjukkan di bawah ini. Perhatikan bahwa saya menarik dari tengah/atas dan memastikan bahwa gradien selesai pada saat saya sampai ke tepi dokumen. Itu berarti saya dapat mengatur warna latar belakang dalam HTML agar menjadi warna yang lebih gelap dan jika seseorang membentangkan jendela browser mereka akan mulus.

Langkah 4

Buat sebuah direktori baru untuk proyek, kemudian buat sebuah direktori yang kedua di dalamnya yang disebut images dan simpan gambar tersebut di dalamnya sebagai background.jpg. Ketika menyimpan gunakan File > Save for Web and Devices dan pilih JPG dengan pengaturan kualitas sekitar 70. Yang menghasilkan ukuran file 16kb yang tidak terlalu buruk. Dulu ada suatu waktu di mana Anda benar-benar harus berhemat dan menyimpan, tetapi sekarang Anda hanya ingin memastikan bahwa Anda tidak dengan bodohnya boros dengan ukuran file Anda.

Sekarang kita membuat dokumen HTML dan menulis beberapa kode:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
</body>
</html>

Yang akan menjadi dasar HTML kita. Sekarang kita akan membuat dokumen style.css dan menulis berikut:


body {
	background-image:url(images/background.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:40px;
}

Beberapa hal yang perlu diperhatikan di sini:

Ini memungkinkan untuk menulis CSS yang sama menggunakan singkatan dan mengurangi jumlah baris yang digunakan, tapi jauh lebih jelas dengan cara ini dan lebih baik untuk menulis tutorial!
Kita memiliki gambar latar belakang (gradien) dan kita sudah menetapkan ke no-repeat, karena kita hanya ingin ia muncul sekali, berada ditengah dan akhirnya warna latar belakang (#657077) adalah warna lebih gelap.
Saya menambahkan margin 40px. Ini hanyalah untuk memposisikan barang-barang saya kemudian sehingga tampak bagus.

Anda dapat melihat dokumen HTML yang dihasilkan di sini. Perhatikan bahwa jika Anda mengubah ukuran jendela Anda, itu adalah latar belakang yang mulus. Wunderbar!

Langkah 5

Selanjutnya kita tambahkan struktur kita ke halaman sehingga kita bisa mulai menatanya.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Tabbed Structure - Regular</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Archives</a></li>
            <li><a href="" id="tab_2">Topics</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>
        
        <div id="content_1" class="content">Content for Tab 1</div>
        <div id="content_2" class="content">Content for Tab 2</div>
        <div id="content_3" class="content">Content for Tab 3</div>
    
    </div>

</div>


</body>
</html>

Jadi seperti yang Anda lihat saya pada dasarnya menggunakan struktur yang sama yang saya sebutkan di Langkah 2. Saya telah menambahkan beberapa id dan kelas dan beberapa konten yang sebenarnya. Berikut adalah alasan di balik apa yang telah saya lakukan:

Untuk judul, saya sudah menempatkan subteks "Select a Tab" di elemen <small>. Ini memungkinkan saya menggunakan elemen <h4> untuk menempatkan keseluruhan dan elemen <small> untuk menata ulang dan menempatkan subteks.
Kontainer <div> memiliki id="tabbed_box_1" dan class="tabbed_box". Saya melakukan ini karena kita mungkin menggunakan kembali kode ini beberapa kali pada halaman yang sama. Jika kita melakukannya, kita bisa menggunakan id untuk menempatkan masing-masing di tempat yang berbeda. Tetapi kita masih akan punya kelas untuk melakukan penataan. Sedangkan jika kita menggunakan id untuk penataan, akhirnya kita harus mendefinisikan gaya yang sama lagi dan lagi untuk id yang berbeda.
Saya telah memberikan id kepada link dan area konten karena kita perlu menggunakan Javascript untuk memanipulasinya nanti.
Akhirnya saya sudah memberi elemen <ul> sebuah nama kelas. Sebenarnya kita bisa menatanya tanpa kelas hanya dengan menata .tabbed_area ul {} tapi ini bisa jadi membingungkan dengan ul di masa depan yang kita masukkan ke dalam area konten. Jadi lebih baik untuk memiliki nama kelas yang bisa kita rujuknya.

OK jadi tanpa penataan itu tidak benar-benar banyak yang bisa dilihat.... belum!

Langkah 6

Sekarang dengan penataan elemen, saya pikir yang terbaik adalah bekerja dari elemen luar ke dalam. Jadi, kita akan mulai dengan elemen ini - <div id="tabbed_box" class="container"> - yang akan kita gunakan untuk memposisikan kotak di tengah dokumen kita dengan baik menggunakan kode ini:



#tabbed_box {
	margin: 0px auto 0px auto;
	width:300px;
}

Langkah 7

Sekarang kita akan melakukan area judul. Kita bisa menata judulnya seperti ini:



.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

Beberapa hal yang perlu diperhatikan disini:

Daripada hanya mendefinisikan gaya untuk h4, saya sudah menentukan untuk .tabbed_box h4. Ini penting dalam dokumen HTML yang lebih besar karena Anda mungkin memiliki gaya h4 lainnya di tempat lain. Jadi Anda ingin memastikan Anda tidak tumpang tindih atau menyebabkan masalah tumpang tindih di masa depan.
Anda akan memperhatikan bahwa saya juga telah menyesuaikan margin bawah pada h4 menjadi 10px. Ini agar jaraknya terlihat benar. Penting untuk diketahui bahwa banyak elemen memiliki nilai default. Misalnya sebuah h4 sudah memiliki margin bawah, dan itu lebih besar dari yang kita inginkan. Jadi jika kita tidak mengatur ini sendiri maka akan muncul dengan margin yang lebih besar. Beberapa orang menggunakan stylesheet khusus yang mengatur ulang semua nilai default ini, tapi saya sudah terbiasa mengatur ulangnya secara terpisah saat saya membutuhkannya.
Anda akan melihat bahwa saya juga menggunakan atribut text-transform untuk membuat teks small semuanya menjadi kapital. Tentu saja kita bisa saja menuliskannya dalam bentuk kapital, tapi saya suka melakukannya dengan cara ini!
Anda juga akan melihat dalam definisi small, saya telah memberikannya sebuah definisi position:relative, ini agar saya dapat menyesuaikan dari mana tampilnya, memindahkannya ke atas 4px dan 6px ke kanan.
Akhirnya ketika menata elemen h4 saya memberikannya sebuah spasi huruf negatif, meskipun demikian itu berarti elemen small juga memiliki spasi huruf negatif yang sama yang tidak kita inginkan. Jadi saya harus mendefinisikannya lagi sebagai 0px disana. Ini berkat kenyataan bahwa gaya mengalir turun - maka namanya Cascading Style Sheets. Sering kali Anda akan melihat ada yang aneh di halaman Anda dan itu karena elemen tersebut mewarisi beberapa gaya yang benar-benar Anda lupakan. Ketika saya pertama kali melakukan sedikit penataan ini, saya menatap sedikit untuk beberapa lama mencoba untuk mencari tahu mengapa itu tampak begitu berkumpul, sampai saya teringat!

Langkah 8

Selanjutnya kita akan memberikan <div> bagian dalam kita sedikit gaya dengan kode ini:



.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;	
}

Ini hanya memberikan sedikit definisi dan ruang elemen interior jauh dari sisi-sisinya. Anda dapat melihat di mana kita berada pada gambar di bawah ini.

Dengan bekerja dari luar ke dalam, kita telah memberi elemen kita sedikit bentuk dan jauh lebih mudah untuk melihat bagaimana hal itu pada akhirnya. Juga sering Anda akan memiliki kendala yang datang dari luar ke dalam, misalnya kotaknya mungkin perlu masuk ke kolom dengan lebar tertentu. Akhirnya juga ide bagus untuk dari dalam ke luar, karena dengan demikian pewarisan gaya apapun sudah jelas. Misalnya jika Anda pergi ke arah lain dan melakukan elemen interior terlebih dahulu, gaya selanjutnya mungkin mempengaruhi elemen interior tersebut dan Anda harus kembali dan menyesuaikannya kembali.

Langkah 9

Sekarang kita mendapatkan barang bagus - tabnya! Jika kita menambahkan potongan CSS kecil ini, kita akan berusaha membuat tab terlihat lebih mirip tab:



ul.tabs {
	margin:0px; padding:0px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}

Kode ini mengatakan bahwa elemen <ul> dengan kelas 'tab' seharusnya tidak memiliki margin dan tidak ada padding. Ini juga mengatakan bahwa semua elemen <li> di dalam seharusnya tidak memiliki titik peluru yang menyertainya. Akhirnya kita ubah tampilannya dari 'block' default menjadi 'inline'. Mari saya jelaskan sedikit yang terakhir itu sedikit lebih detail.

Elemen pada sebuah halaman umumnya memiliki tiga nilai umum untuk 'display'. Mereka adalah block, inline, atau none.
Menetapkan elemen ke none membuatnya tak terlihat. Kita akan menggunakan kenyataan itu nanti.
Menetapkan elemen ke inline membuatnya mengalir bersama dengan elemen lain seperti yang dilakukan oleh teks. Jadi di sini, bukannya muncul di bawah satu sama lain, elemen li mengalir secara horizontal.
Menetapkan elemen ke block membuatnya menjadi area persegi panjang yang biasanya muncul di bawah elemen terakhir.
Itu adalah penjelasan yang benar-benar disederhanakan, Anda bisa mendapatkan yang lebih lengkap di Web Design From Scratch

Sebenarnya ada nilai display lain yang bisa Anda baca di Quirksmode.

Langkah 10

Tentu saja 'tab' kita masih terlihat sangat jelek, jadi mari kita beri beberapa gaya. Kita telah menggunakan elemen <li> untuk memposisikannya, namun kita akan menggunakan elemen <a> untuk menata mereka, seperti ini:



ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54; 
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54; 
	border-bottom: 1px solid #ffffff;
}

Jadi apa yang telah kita lakukan di sini adalah:

Menata tag <a> sehingga memiliki padding dan memiliki warna latar belakang dan teks yang tepat, dan memiliki pengaturan font yang tepat.
Dibuat gaya kedua untuk a:hover dan menggelapkan warna latar belakang dan border. Perhatikan bahwa kita tidak perlu menetapkan semua pengaturan <a> lainnya karena mereka terwariskan. Kita hanya perlu mengubah yang ingin kita ubah saat pengguna memindahkan mouse mereka ke atas tab.
Akhirnya kita memiliki gaya ketiga ketika <a> memiliki class="active". Dengan kata lain untuk tab yang terpilih. Disini lagi kita tetapkan warna latar belakang menjadi putih dan mengubah warna teksnya. Satu hal yang perlu diperhatikan adalah kita juga mengubah border bawah menjadi putih. Ini agar tab terlihat seperti melekat pada area konten (saat kita menambahkannya nanti!)

Langkah 11

Ada dua hal yang perlu kita lakukan untuk membuat area konten bekerja. Yang pertama adalah kita harus membuat dua area kedua lenyap dan yang kedua adalah membuat tampilan mereka terlihat sesuai.


.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54; 	
}
#content_2, #content_3 { display:none; }

Anda akan melihat bahwa bagian pertama dari CSS memberitahu browser bahwa semua elemen dengan class="content" harus berwarna putih dengan padding dan border (warna yang sama dengan tab). Bagian kedua mengatakan bahwa elemen dengan id="content_2" dan id="content_3" harus memiliki display:none, atau dengan kata lain tidak terlihat.

Kemudian ketika kita menambahkan beberapa Javascript kita bisa menggunakan skrip untuk bergantian antara display:none dan display:block untuk membuat mereka tampil dan bersembunyi.

Jadi, inilah cara tab yang kita cari, Anda juga dapat melihat versi HTML dari tempat kita berada. Seperti yang bisa Anda lihat, ini terlihat cukup dekat sekarang, namun kita perlu memperbaiki jaraknya dan menambahkan beberapa konten sebenarnya.

Langkah 12

Memperbaiki masalah spasi sebenarnya adalah masalah menambahkan margin kembali ke elemen <ul> seperti ini:



ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}

Sejujurnya saya tidak yakin mengapa masalah jarak itu terjadi. Terkadang HTML membingungkan saya, tapi saya hanya menyesuaikan pengaturan sampai hal-hal membenarkan mereka sendiri. Terkadang dalam prosesnya saya menemukan apa penyebabnya, terkadang tidak. Saya kira apa yang saya katakan adalah, kecuali jika Anda benar-benar akan masuk ke dalam detail seluk beluk spesifikasi w3, cepat atau lambat Anda akan mengalami beberapa masalah yang tidak dapat Anda jelaskan. Jangan biarkan hal itu menjatuhkan Anda, sesuaikan saja sampai Anda menemukan sebuah solusi atau penyelesaian.

Langkah 13

Sekarang kita akan menambahkan beberapa konten ke dalam area konten. Saya menghindari ini sebelumnya karena saya ingin agar HTML terlihat sederhana. Berikut beberapa hal:


<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Topics</a></li>
            <li><a href="" id="tab_2">Archives</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>
        
        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>
            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_2" class="content">
        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>
            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>
            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>
            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>
            	<li><a href="">Contact</a></li>
			</ul>
        </div>
    
    </div>

</div>

Jadi di sini saya hanya menambahkan unordered list ke tiga area konten. Kebetulan saya mengejek ini seolah-olah itu akan digunakan di blog WordPress. Tapi sebenarnya Anda bisa menggunakan ini untuk segala macam hal. Situs FlashDen baru yang saya kerjakan beberapa hari yang lalu menggunakan area tab untuk menampilkan berbagai jenis file terbaru.

Sekarang kita akan menambahkan beberapa penataan untuk membuat tampilannya sedikit lebih bagus:



.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}

Sekali lagi kita menata daftar kita. Kali ini daripada memberi elemen <ul> sebuah nama kelas, saya cukup menambahkan gaya ke semua elemen <ul> di dalam elemen dengan class="content". Ini berarti saya tidak perlu menulis sebanyak mungkin nama kelas ke dalam HTML saya yang membuatnya lebih rapi dan bersih.

Hal lain yang perlu diperhatikan:

Sekali lagi kita telah menghapus poin peluru dari elemen li dengan list-style:none.
Kali ini kita menata elemen-elemen daftar yang bertentangan dengan <a>. Ini penting karena jika kita memiliki item menu yang bukan merupakan link, dan cara ini masih bisa cocok dengan rapi.
Sekali lagi saya telah menggunakan sebuah pembungkus <small> di dalam <a> untuk membuat jumlah posting. Saya telah menggunakan text-transform untuk membuat semuanya kapital dan beberapa posisi relatif untuk menggesernya sedikit ke kanan.

Langkah 14

Jadi, inilah tampilan halaman kita:

Secara keseluruhan cukup bagus kecuali kita memiliki satu border terlalu banyak. Tapi tidak apa-apa, kita bisa memperbaikinya dengan pseudo-selector ajaib yang disebut 'last-child' seperti ini:

1
2	.content ul li:last-child {
3	border-bottom:none;
4	}

Gaya ini hanya berlaku untuk elemen terakhir dari jenisnya sendiri - yaitu elemen <li> terakhir. Sekarang saya harus menunjukkan bahwa last-child tidak bekerja di semua browser. Khususnya IE6 tidak menyukainya. Tapi tidak apa-apa karena itu bukanlah akhir dunia jika border-nya berada di sana, dan ini adalah cara saya yang halus untuk menghukum siapa pun yang tidak memiliki browser yang diperbarui :-).

Langkah 15

Sekarang hanya ada satu langkah lagi untuk menyelesaikan HTML kita, dan itu adalah beberapa gambar latar belakang yang bagus untuk elemen kita. Seperti yang akan Anda ingat beberapa elemen dalam file PSD asli memiliki gradien yang halus. Jadi sekarang saatnya menambahkannya. Ada tiga tahapan: (a) pada tab aktif (b) pada tab yang tidak aktif dan (c) di bagian bawah area konten. Berikut adalah tiga gambar yang akan kita butuhkan:

Mereka agak sulit dilihat, tapi pada dasarnya mereka masing-masing irisan gradien kecil yang akan kita atur sebagai gambar latar belakang yang berulang-ulang. Berikut adalah tampilan dekat untuk tab (perhatikan bahwa saya telah menambahkan border tipis di sekelilingnya sehingga sedikit lebih jelas. Perhatikan bahwa ada garis putih 1px di bagian atas. Itu akan membuat tab terlihat sangat tajam.

Jadi kita perlu melakukan beberapa penyesuaian pada kode CSS untuk ditambahkan pada gambar latar belakang, seperti ini:


ul.tabs li a {
	background-image:url(images/tab_off.jpg);
	background-repeat:repeat-x;	 
	background-position:bottom;
}
ul.tabs li a.active {
	background-image:url(images/tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top; 
}
.content {
	background-image:url(images/content_bottom.jpg);
	background-repeat:repeat-x;	 
	background-position:bottom;	
}

Perhatikan bahwa saya benar-benar memasukkan sedikit tambahan ini sesuai dengan definisi kelas mereka lainnya, namun untuk singkatnya hanya disalin dalam ekstrak. Seperti yang bisa Anda lihat di ketiga kasus tersebut, kita mengulangi gambar latar belakang sepanjang sumbu x saja. Dalam kasus dua (tab yang tidak aktif dan area konten), kita melakukannya di bagian bawah, dan lainnya adalah di bagian atas.

Bergaya!

Dan dengan itu kita sudah resmi menyelesaikan bagian HTML/CSS dari tutorial ini. Anda bisa melihat halaman yang selesai ditata di sini.

Menambahkan Skrip Sederhana

Hal berikutnya yang perlu kita lakukan adalah menambahkan beberapa Javascript agar tab kita benar-benar melakukan sesuatu. Pertama, kita akan melakukan ini dengan tangan dan kemudian saya akan menunjukkan cara menggunakan pustaka Javascript untuk mencapai hal yang sama. Sekarang saya harus menunjukkan bahwa saya bukan pakar JS, dan saya berharap bisa membawa beberapa master programatik untuk menulis tutorial di sini, jadi jika Anda melihat saya melakukan sesuatu yang agak meragukan, silakan memberikan komentar dan saya akan memperbaiki tutorialnya dan membuatnya menjadi lebih sebagai praktik terbaik!

Jadi pertama mari kita menguraikan apa yang ingin kita lakukan saat seseorang mengklik tab. Kita ingin mematikan tab kita saat ini, mengaktifkan yang baru, menyembunyikan area konten saat ini dan menampilkan yang baru.

Sekarang kita bisa memiliki sesuatu yang pintar yang bekerja di mana yang saat ini aktif dan mematikannya, tapi lebih mudah hanya untuk melewatinya dan mematikan semuanya, kemudian mengaktifkan yang kita inginkan. Demikian pula untuk area konten, kita bisa menyembunyikan ketiganya dan kemudian menunjukkan yang kita inginkan. Ini menyelamatkan kita dari harus bekerja keras menyelesaikan keadaan saat ini.

Menemukan Elemen menggunakan DOM

Elemen-elemen yang kita kerjakan terlihat seperti ini:

<a href="" id="tab_1" class="active">
<div id="content_1" class="content">

Sekarang di Javascript kita bisa menemukan elemen hanya dengan menggunakan id-nya dan metode document.getElementById(). Jadi document.getElementById('content_1') akan memberi kita area konten pertama. Kita kemudian dapat mengatur gaya display ke none menggunakan baris ini:

document.getElementById('content_1').style.display = 'none';

Demikian pula untuk melihat kelas kita menggunakan:

document.getElementById('tab_1').className = 'active';

Jadi, pendekatan yang benar-benar sederhana adalah menulis:


function tabSwitch(new_tab, new_content) {
	
	document.getElementById('content_1').style.display = 'none';
	document.getElementById('content_2').style.display = 'none';
	document.getElementById('content_3').style.display = 'none';		
	document.getElementById(new_content).style.display = 'block';	
	

	document.getElementById('tab_1').className = '';
	document.getElementById('tab_2').className = '';
	document.getElementById('tab_3').className = '';		
	document.getElementById(new_tab).className = 'active';		

}

Ini akan ditempatkan di dalam sebuah file, sebut saja functions.js. Kita kemudian memanggil skrip ini dengan mengubah tautan tab kita menjadi:



<script src="functions.js" type="text/javascript"></script>	
<ul class="tabs">
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Pages</a></li>
</ul>

Dan tentu saja, inilah contoh dari javascript super sederhana kita. Ia bekerja!

Skrip yang Lebih Kompleks

Sekarang ada beberapa masalah yang sangat jelas dengan skrip ini. Paling tidak di antaranya adalah jika Anda menambahkan tab lain, Anda harus mengubah fungsi Anda. Dan jika Anda memiliki lebih dari satu set tab pada halaman, Anda memerlukan dua fungsi! Jadi mari kita memperkuatnya sedikit:



function tabSwitch_2(active, number, tab_prefix, content_prefix) {
	
	for (var i=1; i < number+1; i++) {
	  document.getElementById(content_prefix+i).style.display = 'none';
	  document.getElementById(tab_prefix+i).className = '';
	}
	document.getElementById(content_prefix+active).style.display = 'block';
	document.getElementById(tab_prefix+active).className = 'active';	
	
}

Versi kedua dari fungsi pengalihan tab membutuhkan beberapa argumen lagi namun sedikit lebih pandai. Mengasumsikan bahwa kita memiliki satu set tab dan satu set area konten dan mereka memiliki id yang memiliki awalan dan satu set nomor yang meningkat. Yaitu tab_1, tab_2 ... dan content_1, content_2 ...

Argumen pertama yang dibutuhkan fungsi kita, 'active', adalah angka tab/konten yang ingin kita aktifkan. Argumen kedua, 'number', adalah jumlah tab yang digunakan. Argumen ketiga dan keempat adalah prefiks yang digunakan dalam id elemen kita.

Fungsinya kemudian memiliki loop yang berulang melalui 1 sampai jumlah tab dan mematikan semuanya, kemudian mengalihkan kedua yang ingin kita kembali pada akhirnya. Dengan kata lain itu adalah skrip yang sama seperti sebelumnya, tapi kita baru saja membuatnya sedikit lebih pintar.

Jadi dalam contoh kita untuk memanggil fungsinya kita akan memiliki kode ini:



<script src="functions.js" type="text/javascript"></script>	
<ul class="tabs">
    <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Pages</a></li>
</ul>

Ini berarti bahwa nanti jika kita memiliki set tab kedua, kita bisa memberi mereka awalan id yang berbeda dan menggunakan fungsi yang sama berulang-ulang.

Lihat contoh javascript yang kedua.

Menggunakan jQuery

Akhir-akhir ini ada banyak pustaka Javascript yang muncul, dan sebenarnya ada (setidaknya) dua yang dibuat khusus untuk mencapai efek tab ini: MooTabs dan DomTab. Saya belum pernah menggunakan keduanya, tapi dari sekilas pandang mereka terlihat cukup berguna.

Namun karena saya telah mendengar banyak tentang pustaka jQuery, saya memutuskan untuk mencoba pengalihan tab yang sama dengan menggunakan jQuery. Saya merasa solusi saya bisa menggunakan beberapa pekerjaan, tapi masih menarik untuk dilihat.

Jadi pertama, pergi ke situs jQuery dan unduh versi terbaru dari pustaka skrip mereka.

Memahami jQuery

jQuery menyediakan banyak fungsi yang memungkinkan Anda untuk memilih kelompok dari beberapa hal. Misalnya jika Anda ingin memilih setiap elemen pada halaman yang merupakan link (yaitu elemen <a>) dan kemudian membuat mereka lenyap, Anda akan menempatkan ini di area <head> Anda:


<script src="scripts/jquery-1.2.3.min.js"></script>
<script>
	
	// When the document loads do everything inside here ...
	$(document).ready(function(){
		
		$("a").slideUp();
		  
	});
</script>

Baris pertama menambahkan pustaka skrip jQuery. Area skrip utama ada di dalam potongan kode yang terlihat seperti ini: $(document).ready(function(){}); Ini pada dasarnya memberitahu browser Anda untuk mengeksekusi segala sesuatu di dalamnya ketika menyentuh halaman. Jadi, dalam kasus kita, kita memberikan perintah:

1
2
3	$("a").slideUp();

Ini mengatakan temukan segala sesuatu yang merupakan <a> dan jalankan slideUp() padanya. Atau dengan kata lain: temukan semua tautan dan buat semuanya lenyap dengan efek bergeser ke atas. Coba tambahkan skrip itu ke halaman dan muat dan Anda akan melihat semua tautan Anda lenyap. Cukup rapi ya?

Bagaimanapun, ada banyak cara untuk memilih sesuatu, dan Anda dapat membacanya di API dan dokumentasinya. Anda bisa melakukan hal-hal seperti menemukan setiap elemen dengan kelas tertentu, id tertentu dan sebagainya. Pada titik tertentu saya akan menulis tutorial pengantar jQuery yang tepat di sini, tapi untuk saat ini, intro kecil itu akan melakukannya - selain hanya memiliki satu jam pengalaman dengan jQuery, saya menduga itu akan menjadi sesuatu yang menyedihkan bagi saya untuk menulis intro untuknya!

Meluncurkan dengan Penyeleksi

Jadi setelah sedikit eksperimen, saya menemukan cara menggunakan jQuery untuk membuat tab saya meluncur masuk dan keluar. Untuk melakukannya, terlebih dahulu saya memodifikasi link saya agar tidak memiliki javascript, melainkan memiliki atribut title dan tambahan class="tab". Perhatikan bahwa Anda bisa memberikan sebuah elemen dua buah kelas dengan melakukan ini: class="tab active".



<ul class="tabs">
    <li><a href="#" title="content_1" class="tab active">Topics</a></li>
    <li><a href="#" title="content_2" class="tab">Archives</a></li>
    <li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>

Sekarang menggunakan dua elemen ini, pada dasarnya saya bisa mendapatkan semua link dengan kelas 'tab' dan saya juga bisa menemukan elemen yang id-nya sama dengan atribut title dari link yang baru saja diklik. Inilah skripnya (ditempatkan di <head>) yang menjelaskan ini sedikit lebih baik:



 <script src="scripts/jquery-1.2.3.min.js"></script>
    <script>
	
	  // When the document loads do everything inside here ...
	  $(document).ready(function(){
		
		// When a link is clicked
		$("a.tab").click(function () {
			
			// switch all tabs off
			$(".active").removeClass("active");
			
			// switch this tab on
			$(this).addClass("active");
			
			// slide all elements with the class 'content' up
			$(".content").slideUp();
			
			// Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.
			var content_show = $(this).attr("title");
			$("#"+content_show).slideDown();
		  
		});
	
	  });
  </script>

Juga saya telah menambahkan komentar untuk membantu menjelaskan. Pada dasarnya ketika ada link dengan kelas 'tab' yang diklik, kita melakukan semuanya di dalam fungsi tersebut.

Dan untuk melihat contoh kerja terakhir dengan jQuery, klik di sini!

Akhir Kata

OK, jadi beberapa menit setelah membuat contoh jQuery saya, saya menemukan bahwa sebenarnya ada kontrol visual 'tabs' khusus di jQuery. Saya harus bermain dengannya di hari esok karena tidak diragukan lagi akan membuat hidup ini jauh lebih sederhana!

Sementara itu saya harap Anda menikmati tutorialnya dan mendapatkan sesuatu darinya.