Choco Tutorial. ♀♂
♪ Post 帖子 ♪ Me 博主 ♪ Tutorial 教程 ♪ Item 素材 ♪ Links 链接
Choco Tutorial. ♪♪
风那么大,把我吹醒了。风那么大,把梦中的你也吹散了。风那么大,也把我的心吹凉了。


注意注意 :

初次来到的朋友
不知道我的教程方法在哪里?

请别抄袭我部落格里任何东西
转载教程素材请贴上本博客链接









11.08.2011 | 2 comment



这个工具的好处就能把不同的工具联合起来变成一个呈现方式 :)





no.1代码:
<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
  var Tabtampil = document.getElementById(TPID);
  var TTs = Tabtampil.firstChild;
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
  var TT = TTs.firstChild;
  var i   = 0;
  do
  {
    if (TT.tagName == "A")
    {
      i++;
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
      TT.className = (i == id) ? "Active" : "";
      TT.blur();
    }
  }
  while (TT = TT.nextSibling);
  var Halamans = Tabtampil.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
document.write('');}
//]]>
</script>
no.2代码:
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color:#ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid#eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1 标题</a> <a>Tab 2 标题</a> <a>Tab 3 标题</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 内容
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 内容
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 内容
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
蓝色代码是tab按钮背景颜色 .

橙色代码是tab工具边框颜色 .

 青色代码是tab工具背景颜色 .

紫粉色代码是tab按钮边框颜色 .

灰色代码是tab标题字颜色 .

红色字是tab标题 .

黄色字是tab内容 .

tab里面要放什么工具都可以哦 :D

help me click nuffnang , thx ♥

Older Post | Newer Post