membuat tab view 2

masuk ke edit html, "centang Expand Widget Templates" Sekarang kita cari kode ]]></b:skin>, untuk memudahkan gunakan fungsi search browser (Ctrl+F). Setelah ketemu masukan script pertama dibawah ini di atas kode ]]></b:skin>

/* tabview css start */<br /><br />div.TabView div.Tabs<br />{<br />height: 24px;<br />overflow: hidden;<br />}<br />div.TabView div.Tabs a<br />{<br />float: left;<br />display: block;<br />width: 100px; /* Lebar menu utama */<br />text-align: center;<br />height: 24px; /* Tinggi menu utama */<br />padding-top: 3px;<br />vertical-align: middle;<br />border: 1px solid #000; /* Warna border menu utama */<br />border-bottom-width: 0;<br />text-decoration: none;<br />font-family: "Verdana", Serif; /* Font menu utama */<br />font-weight: 900;<br />color: #000; /* Warna font menu utama */<br />}<br />div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br />{<br />background-color: #F3F53A; /* Warna background menu utama */<br />}<br />div.TabView div.Pages<br />{<br />clear: both;<br />border: 1px solid #6E6E6E; /* Warna border isi konten */<br />overflow: hidden;<br />background-color: #9BA9FE; /* Warna background isi konten */<br />}<br />div.TabView div.Pages div.Page<br />{<br />height: 100%;<br />padding: 0px;<br />overflow: hidden;<br />}<br />div.TabView div.Pages div.Page div.Pad<br />{<br />padding: 3px 5px;<br />}<br /><br />/* tabview css end */<br />

kemudian kopi lagi kode ini diatas </head>

<script type='text/javascript'><br />function tabview_aux(TabViewId, id)<br />{<br />var TabView = document.getElementById(TabViewId);<br /><br />// ----- Tabs -----<br /><br />var Tabs = TabView.firstChild;<br />while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;<br /><br />var Tab = Tabs.firstChild;<br />var i = 0;<br /><br />do<br />{<br />if (Tab.tagName == "A")<br />{<br />i++;<br />Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";<br />Tab.className = (i == id) ? "Active" : "";<br />Tab.blur();<br />}<br />}<br />while (Tab = Tab.nextSibling);<br /><br />// ----- Pages -----<br /><br />var Pages = TabView.firstChild;<br />while (Pages.className != 'Pages') Pages = Pages.nextSibling;<br /><br />var Page = Pages.firstChild;<br />var i = 0;<br /><br />do<br />{<br />if (Page.className == 'Page')<br />{<br />i++;<br />if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";<br />Page.style.overflow = "auto";<br />Page.style.display = (i == id) ? 'block' : 'none';<br />}<br />}<br />while (Page = Page.nextSibling);<br />}<br /><br />// ----- Functions -------------------------------------------------------------<br /><br />function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }<br /><br />function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }<br /></script><br />

tambahkan elemen widget baru , kopi kode berikut

<form action="tabview.html" method="get"><br /> <div class="TabView" id="TabView"><br /><br /> <div class="Tabs" style="width: 350px;"><br /> <a>Tab 1</a><br /> <a>Tab 2</a><br /> <a>Tab 3</a><br /> </div><br /><br /> <div class="Pages" style="width: 350px; height: 250px;"><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab1.1<br/><br /> Tab1.2<br/><br /> Tab1.3<br/><br /><br /> </div><br /> </div><br /><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab2.1<br/><br /> Tab2.2<br/><br /> Tab2.3<br/><br /><br /> </div><br /> </div><br /><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab3.1<br/><br /> Tab3.2<br/><br /> Tab3.3<br/><br /><br /> </div><br /> </div><br /><br /> </div><br /> </div><br /> </form><br /><br /> <script type="text/javascript"><br /> tabview_initialize('TabView');<br /> </script><br />

Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan