tab 选项卡初始化函数(CSS不能自理) 

<!DOCTYPE html>
<html>
<head>
<title> initTab </title>
<style>
    ul{ list-style: none ;    
        padding:0px;
        width:440px;
        position:relative;
      }
    li{ display: inline-block;
        zoom:1;
        height: 35px;
        margin-right: 1px;
        width: 102px;
      }
    .tab_hover{background-color:#ccffee;}
    .tab_stable{background-color:#cccccc;}
    .tabSheet{
        width: 412px;
        height:200px;    
        border:1px solid silver;
        position:relative;        
      }
    .hid{display:none;}
    .clear{clear:both;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<ul id="tabHoder_id" class="clear">
    <li class="tab_hover">tab A</li>
    <li class="tab_stable">tab B</li>
    <li class="tab_stable">tab C</li>
    <li class="tab_stable">tab D</li>
</ul>

<div class="tabSheet">sheet 0 </div>
<div class="tabSheet hid">sheet 1 </div>
<div class="tabSheet hid">sheet 2 </div>
<div class="tabSheet hid">sheet 3 </div>


<script>
 
//函数定义
function tabInit(){
        /*  @author ecalf
         *  @overview 用于快速初始化tab控件的函数，代码中使用了jquery 库，建议提供三个参数 arguments:tab,conf,callback
         *  @param tab tab控件id或dom、jq对象,必选参数
         *  @param conf 标签样式及面板切换配置,可选参数
         *  @param callback 点击标签后的回调函数，可选参数
         *    
         *        conf 参数格式为 {tabClass:['标签激活时的样式类','标签未激活时的样式类'],
         *                         sheets:[一组与标签对应的内容面板DOM/JQ对象],
         *                         eventType:'触发切换动作的事件，如果不提供则使用 click'
         *                        }                
         *       callback 函数的第一个参数为tab控件dom对象，第二个参数为被点击标签的序号(从0开始)  
         *       conf 和 callback 至少提供1个，如果 两个都提供，conf将成为callback函数的第三个参数,
         *        如果不提供conf参数或不提供匹配tab内容面板的conf.sheets数据，请在callback内处理行为逻辑     
         *        在callback内可以使用this直接访问被点击的标签的dom对象    
         *  
         */        
        
        var tab,conf,callback,argsNum = arguments.length;
        if(argsNum<2){
            throw new Error("at least 2 arguments needed for function 'tabInit'");
        }
        while(argsNum--){
            if(!argsNum){
                tab = typeof(arguments[0])=="string"?$("#"+arguments[0]):$(arguments[0]);    
            }else if(arguments[argsNum].constructor===Function){
                callback = arguments[argsNum];
            }else if(arguments[argsNum].constructor===Object){
                conf = arguments[argsNum];            
            }                         
        }                    
        
                                
        $(tab).children()[(!conf||conf.eventType)||'click'](function(){ // tab导航            
            if(conf&&$(this).attr("class")==conf.tabClass[0]){
                return;
            }
            
            var curTabIndex = $(this).index();  //要求tab容器 的子元素都是 tab  切换按钮
            
            if(conf&&conf.tabClass&&conf.tabClass.length){
                $(this).siblings().removeClass(conf.tabClass[0]).addClass(conf.tabClass[1]);
                $(this).removeClass(conf.tabClass[1]).addClass(conf.tabClass[0]);
            }            
            
            if(conf&&conf.sheets&&conf.sheets.length){
                $.each(conf.sheets,function(i,v){
                    var sheet = $(typeof(conf.sheets[i])=="string"?"#"+conf.sheets[i]:conf.sheets[i]);
                    if(i==curTabIndex){
                        sheet.show();
                    }else{
                            sheet.hide();
                        }
                });
            }            
                                    
            if(callback){                
                callback.apply(this,[tab,curTabIndex,conf]);
            }
        });
}

// 用法:
tabInit("tabHoder_id",
        {tabClass:['tab_hover','tab_stable'],sheets:$(".tabSheet"),eventType:"mouseover"},
        function(){            
            arguments[2].sheets.eq(arguments[1]).html(
                $('<div></div>').html(
                        "tabs 导航条ID："+[arguments[0].attr("id"), //回调函数第一个参数：tab 的 jquery 对象
                        "active 序号："+arguments[1], //回调函数第二个参数：激活的 tab 的序号
                        "配置参数--CSS类名："+arguments[2].tabClass.join(',') //回调函数第三个参数：conf
                         ].join('<br />')
                )
            );   
});
</script>
</body>
</html>
posted @ 2012-11-25 16:15  ecalf  阅读(562)  评论(0)  编辑  收藏  举报