mass Framework tabs插件

经心思熟虑，发明一种更好的HTML结构，在实现上比原来好太多了。下面是其思路。

首先是结构层，HTML部分：

        <ul id="first_tabs" class="mass_tabs">
            <li class="section active">
                <a href="javascript:void(0)" class="trigger">按钮1</a>
                <div class="panel">
                    面板1
                </div>
            </li>
            <li class="section">
                <a href="javascript:void(0)" class="trigger">按钮2</a>
                <div class="panel">
                    面板2
                </div>
            </li>
            <li class="section">
                <a href="javascript:void(0)" class="trigger">按钮3</a>
                <div class="panel">
                    面板3
                </div>
            </li>
            <li class="section">
                <a href="javascript:void(0)" class="trigger">按钮4</a>
                <div class="panel">
                    面板4
                </div>
            </li>
        </ul>

当然现在看不出它是个tabs，我们使用CSS修整一下：

            .mass_tabs {
                position:relative;
                height:200px;
                width:400px;
                list-style:none;
                padding-left:20px;
                padding-top:5px;
                background:green;
                overflow:hidden;
            }
            .mass_tabs .section {
                float:left;
            }
            .mass_tabs .trigger {
                display:inline-block;
                height:20px;
                line-height:20px;
                padding:1px 10px;
                margin-left:5px;
                color:#000;
                background:#00FF7F;
                text-align:center;
                text-decoration:none;
            }
            .mass_tabs .active .trigger{
                padding-bottom:8px;/* panel.top - parent.padding-top - tigger.height */
                color:#fff;
                background:#a9ea00;
            }
            .mass_tabs .panel{
                display: none;
                position:absolute;
                width:420px;/* parent.width+ parent.padding-left*/
                height:175px;/* parent.height +  padding-top - tabs.top */
                top: 30px;
                left:0px;
                color:#000;
                background:#a9ea00;
            }
            .mass_tabs .active .panel{
                display:block;
            }

最后是用JS绑定事件就行了，通常是点击事件或mouseover事件。

// by 司徒正美
         $.require("ready,event,attr",function(){
                $("body").delegate("#first_tabs .trigger", "click", function(e){
                    var sec = $(e.target).parent();
                    if(!sec.hasClass("active")){
                        $("#first_tabs .active").removeClass("active");
                        sec.addClass("active");
                    }
                });
            });

• 按钮1
  面板1
• 按钮2
  面板2
• 按钮3
  面板3
• 按钮4
  面板4

这个结构的好处在于，利用CSS的继承关系，实现用一个class来切换面板，在JS方面也不用使用index， eq等API了。另外，我们可以在上例中的“按钮1”外面再包一层标签，方便让用更多CSS来装饰它。

不过上面的代码确实很难在JS文件中看到它是什么，因此我们把它封装一下，改成如下调用：

// by 司徒正美
            $.require("ready,more/tabs",function(){
                $("#second_tabs").tabs({
                    active_event: "mouseover"
                }).tabs("active",2)
            })

• 按钮1
  面板1
• 按钮2
  面板2
• 按钮3
  面板3
• 按钮4
  面板4