mass Framework tabsプラグイン

7050 ワード
framework
熟慮して、より良い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");
                    }
                });
            });


.mass_tabs {
position:relative;
height:200px;
width:400px;
list-style:none!important;
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;
}
ボタン1
パネル1

ボタン2
パネル2

ボタン3
パネル3

ボタン4
パネル4


$1.require("ready,event,attr",function(){
$1("body").delegate("#first_tabs .trigger", "click", function(e){
var sec = $1(e.target).parent();
if(!sec.hasClass("active")){
$1("#first_tabs .active").removeClass("active");
sec.addClass("active");
}
});
});
この構成の利点は,CSSの継承関係を利用して1つのclassでパネルを切り替えることを実現し,JS側でもindex,eqなどのAPIを用いなくなったことである.また、上記の例の「ボタン1」の外にラベルをもう1枚包むことができ、より多くのCSSで飾ることができます.
しかし、上のコードは確かにJSファイルで何なのかを見るのが難しいので、封装一下を次のように呼び出しました.

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



$1.require("ready,20120225_tabs",function(){
$1("#second_tabs").tabs({
active_event: "mouseover"
}).tabs("active",2)
})
Empty class and optimization
django.core-files