Minggu, 11 Maret 2012

cara membuat tab view dengan java script

cara membuat tab view dengan java script

- kali ini saya mau share cara membuat tabview keren dengan java script. tab view ini adalah suatu menu yang terdiri dari 3 atau empat slot yang berisi widget-widget yang telah di tentukan isinya oleh author blog itu sendiri. Sebenarnya banyak sekali di luar sana cara membuat tab view baik menggunakan css html javascript dan yang paling keren menggunakan jquery. namun sekarang saya tidak akan membahas semuanya saya hanya akan memberikan tab view dengan javasrcipt yang saya yakin cukup keren walaupun tidak sekeren jquery sendiri. Tapi java script tabview ini bisa kita kembangkan secara luas dan mengeditnya sesuka hati.

apa sih Tab view itu ?


Tab view adalah suatu widget yang berisis beberapa widget yang terdiri dari beberapa slot yang dapat di isi sesuai keinginan sang author blog misalnya Daftar isi blog

apa keuntungan memasang tab view ini di blog?


menurut saya sendiri keuntungan kalau kita memasang tabview di blog adalah blog semakin rapi dan space sidebar kita semakin banyak dan gak berantakan karena sudah terhemat oleh tab view yang dapat di isi dengan beberapa widget sesuai keinginan author blognya sendiri

apa kekurangan tab view dengan java script ini?


mungkin kekurangannya loading page blog kita akan sedikit bertambah sehingga menjadi agak berat dan walaupun masih bisa di edit sesuka hati namun tampilannya masih sangat simple tidak seperti tab view dengan jquery

gimana sih cara memasang tab view dengan java script ini?


baiklah ikuti langkah berikut ini ;
- Login dulu dong ke blogger
- masuk tata letak
- tambah gadget
-pilih html/javascript
- paste code dibawah ini
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #555555; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#fff; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Jika sudah di paste klik simpan, kemudian preview blog teman-teman
*diatas sudah ada keterangan untuk mengedit sebebas-bebasnya dan kembangkan tabviewnya secara bebas :)
semoga tutorial membuat tabview ini bermanfaat
Source : http://4-demo.blogspot.com/2011/11/cara-membuat-tab-view-ala-4jie-blog.html
Anda sedang membaca artikel tentang cara membuat tab view dengan java script dan anda bisa menemukan artikel cara membuat tab view dengan java script ini dengan URL http://carabuatsesuatu.blogspot.com/2012/03/cara-membuat-tab-view-dengan-java.html. Anda boleh menyebarluaskannya atau meng-copy paste-nya jika artikel cara membuat tab view dengan java script ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan LINK cara membuat tab view dengan java script sebagai sumbernya.

2 komentar:

  1. tipsnya sangat membantu gan, salam semangat dan sukses selalu..!

    BalasHapus
  2. ntr tes di blog yang satu lagi bang ,,, heheh

    terima kasih sharingnya

    salam dan suport dari DS

    BalasHapus

Back To Top