工具 | 多标签小工具

好奇怪的标题。

就是这个↓


这个教程很复杂下。所以我一直很懒惰发 ><

1. 去设计》修改HTML，记得在 扩展窗口小部件模板 空格打勾。

2. 按 Ctrl+f 寻找：

</head>

在它前面添加这些代码：

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

3. 保存代码即可。

4. 去设计》页面元素》添加小工具》HTML/Java Script,把这些代码paste进去

    <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: 200px; height: 300px;" class="Halamans">

        <div class="Halaman">

        <div class="Alas">

        <br/>

  

   第一格要写的字写在这 :)

  

    </div> </div> <div class="Halaman">  <div class="Alas">   <br/>

    第二格要写的字写在这 :)

    </div>   </div>   <div class="Halaman">   <div class="Alas">   <br/>

    第三格要写的字写在这 :)

    </div>

    </div>

    </div>

    </div>

    </div>

  

    </form>

    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

5. 保存起来即可。

*红字的tab 1，tab 2, tab 3 改成你要放的名字。 
*深蓝的是小工具高度。
*天空蓝的是小工具宽度。 
*其他的可以自己改哦~