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