cara membuat tab view sederhana

berbagi ilmu 

cara membuat tab view 

mungkin para sobat blog udah pada tau tentang cara membuat tab view mungkin saya posting buat sobat bloger yang baru exis okelah ini contoh dgambarnya

oke deh tanpa basa basi kita mulai bekerja  langkah pertama adalah sebagai berikut

cari kode </head>

gunakan ctrl+c untuk mengkopi

Letakan kode berikut sebelum kode </head>

<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>

Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs

{

height: 30px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 98px; /* Lebar Menu Utama Atas */

text-align: center;

height: 30px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #BDBDBD; /* Warna border Menu Atas */

border-bottom-width: 0;


text-decoration: none;

font-family: "Verdana", Serif; /* Font Menu Utama Atas */

font-weight: bold;

color: #ffffff; /* 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: #E6E6E6  url(http://i953.photobucket.com/albums/ae20/hendrytha/nav-bg.png) repeat  ; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #BDBDBD; /* Warna border Kotak Utama */

overflow: hidden;

background: #E6E6E6 url(http://i953.photobucket.com/albums/ae20/hendrytha/touto.gif) repeat  ; /* Warna background Kotak Utama */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 20px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

sekarang anda tinggal masuk ke edit laman pilih tambah gadget lalu pilih java/html

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 300px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">

<div class="Pad">

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

selesai dech selamat mencoba moga sukses yua jangan lupa komentar andan butuh saya juga butuh partisipasi anda terimakasih
anda boleh kopas artikel disini tapi diharap jangan mengubah sumber penerbit

cara membuat ta view sederhana