Membuat Tab Widget dengan JQuery

Selamat malam sodara-sodara sekalian para pengunjung nightwalker team di manapun anda berada ! huehuehue😀 ~~ . Jika anda sering mengunjungi website2 portal seperti yahoo.com , facebook.com atau website2 portal lokal seperti metrotvnews.com , detik.com , indowebster.com anda tentu melihat tab2 menu menarik pada halaman yg ada di website2 tersebut .

Menu2 yang penulis maksud kan disini adalah menu2 yang ketika tab tersebut di klik dia tidak berpindah halaman ataupun meload seluruh halaman , melainkan hanya berpindah dari bagian content satu ke content yang lain nya pada halaman yang sama . (bingung ? minum dong obat anti bingung ! :-q~~)
Untuk lebih jelasnya , anda dapat melihat contoh2 tabs nya di bawah ini :

Tabs ini salah satu fungsi nya adalah menghemat ruang pada sebuah halaman website , sehingga membuat sebuah halaman website terkesan lebih rapih , dan scrollny tidak memanjang kebawah . Anda tentu melihat bagaimana website2 raksasa seperti yahoo , detik , indowebster , Nightwalker team(<-++ raksasa ga ya ?😛 ) dll pada halaman home nya menyediakan banyak sekali cuplikan2 berita , video , ataupun gambar .

Bayangkan jika kesemuanya itu di tampilkan tanpa menggunakan tab2 seperti yang kita bahas ini , scroll ny di jamin puanjang buaaaanget dahh , huehuehe ..😀 ~~ . Dan tentunya membuat pengunjung merasa malas , letih , resah , gundah , dan enggan untuk melihat konten yang disajikan xixixixi😀 ~~ .

Ok , kita langsung saja pada bagian intinya . Untuk dapat membuat tab menu ini , kita memerlukan library jquery yang dapat anda download langsung dari website resminya yang ada di http://jqueryui.com/download .

Jika sudah barulah kita dapat mencoba mempraktekan nya . Untuk cara pembuatan nya , anda dapat memasukan script jquery yg telah anda download tadi kedalam sebuah halaman web yang anda ingin berikan tab jquery ini . Kemudian ketik value id yang anda inginkan bserta fungsi tabs jquery nya . Setelah itu anda tinggal membuat tag div pada bagian body dengan value id yang sama .
Berikut ini contoh tab sederhana yg penulis buat :

$(function(){
$(‘#bufferdie’).tabs();
});

body { font: 11px Geneva, Verdana, sans-serif;
line-height: 16px; }
#rapihin {
width: 600px;
margin: auto;
}

Konten 1 ny disini …………
Konten 2 ny disini …………
Konten 3 ny disini …………
Konten 4 ny disini …………

Contoh diatas merupakan contoh sederhana tentang penggunaan jquery tabs , silahkan anda kembangkan lagi .
Untuk anda yang ingin mempelajari nya lebih dalam , anda dapat menuju ke website resmi jquery nya di http://www.jquery.com .
Untuk melihat demo dari contoh sederhana di atas anda dapat menuju ke link berikut ini : DEMO
Download script lengkapnya pada link berikut ini : DOWNLOAD

Sebagai tambahan , JQuery tabs plugin ini menggunakan JQuery UI CSS framework untuk pengaturan layout dan tampilan nya . Sesuai dengan dokumentasi JQuery tabs plugin dari website resmi nya , penulis me-rekomendasikan penggunaan ThemeRoller tool untuk memudahkan anda dalam membuat tampilan dan pengaturan layout nya yang cocok dan sesuai dengan selera anda .

Namun , bagi anda yang ingin mengkostumisasi CSS nya secara manual anda dapat mengedit file stylesheet yang terdapat pada file download diatas . Untuk dasar class2 CSS yang dapat anda kostumisasi disana diantara nya adalah : .ui-widget-header , .ui-tabs , .ui-tabs .ui-tabs-nav , .ui-tabs .ui-tabs-panel , dll (silahkan anda lihat baris di bawah komentar /* Overlays */)

gimana gimana gimana ? tertarik untuk memasang nya di blog / website anda ? huehuehue ..😆
mungkin sgitu dulu aja artikel yang penulis berikan pada kesempatan kali ini , akhir kata :

~Sampai jumpa pada artikel2 berikutnya ! xixixixixi ..😀 ~~

About heni
I ♡ movie, traveling, fruits Worry less smile more fell happy anyway :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: