tab选项卡js优化计划

在开发中基于jquery写了一个通用的  tab选项卡的js。

MutiplePane_init，SingePane_init，HoverPane_init 三种。

只要按照一定的html的格式用class 标记，就能 有三种切换的功能

一直想扩展下，但没有时间

1.  事件触发方式自由设定

2. 添加自动切换功能 （已有）

3.记住上次最后显示的项

4.以面向对象的方式把代码优化重新组织下

 

 

function MutiplePane_init(myArea,bHover){
        var selectRule = ".MutiplePane";
        
        if(myArea!= undefined){
            selectRule = myArea +" "+ selectRule;

        }
        if (bHover != undefined) {
            TabSwitch(selectRule);
        }
        
        
        $(selectRule).each(function(){
            var curPane=this;
            var tObj = $(curPane).find(".m-t");
            var cObj = $(curPane).find(".m-c");

            tObj.each(function(i){
                $(this).click(function(){
                    tObj.each(function(j){
                        if(i==j){
                            $(this).addClass("cur");                        
                        }else{
                            $(this).removeClass("cur");
                        }
                    });

                    cObj.each(function(k){
                        if(i==k){
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    });                
                    
                });                
                
            });
        });
    }


    function TabSwitch(selectRule) {
        
        //1.获取元素
        var sltElm = $(selectRule);
        
        sltElm.start = 0;
     
        //2.获取事件触发元素。
        var sltMt= $(sltElm).find(".m-t");

        $(sltMt).each(function(i) {
            $(this).hover(
              function() {
                  $(this).trigger("click");
                  if (sltElm.timeOut) {
                      clearInterval(sltElm.timeOut);
                      sltElm.start = i;
                  }
              },
              function() {
                 
                  sltElm.timeOut = setInterval(function() {
                      sltMt.each(function(i) {
                          if (sltElm.start > sltMt.length - 1) {
                              sltElm.start = 0;
                          }
                          if (sltElm.start == i) {
                              $(this).trigger("click");
                              
                          }

                      });
                      sltElm.start++;
                      window.startNum=sltElm.start;
                  }, 5000);
              }
            );

        });
        
        //3.停止事件，
        //4.停止事件后的重新开始事件。

        //5.开始循环触发
        sltElm.timeOut = setInterval(function() {
            sltMt.each(function(i) {
                if (sltElm.start > sltMt.length- 1) {
                    sltElm.start = 0;
                }
                if (sltElm.start == i) {
                    $(this).trigger("click");
                   
                }

            });
            sltElm.start++;
            window.startNum=sltElm.start;
        }, 5000);
        
      
      


    }

    function SingePane_init() {
        $(".SinglePane").each(function(i) {
            var singleCur = this;
            var tObj = $(singleCur).find(".s-t");
            var cObj = $(singleCur).find(".s-c");
            var cssStyle = $(singleCur).hasClass("pane");
            if (!cssStyle) {
                if (cObj.css("display") == "none") {
                    tObj.addClass("close");
                } else {
                    tObj.removeClass("close");
                }
            } else {
                if (cObj.hasClass("pane_css")) {
                    tObj.addClass("close");
                } else {
                    tObj.removeClass("close");
                }
            }
            tObj.click(function() {            

                if (!cssStyle) {
                   
                    cObj.toggle();
                    if (cObj.css("display") == "none") {
                        $(this).addClass("close");
                    } else {
                        $(this).removeClass("close");
                    }
                } else {
                   
                    cObj.toggleClass("pane_css");
                    if (cObj.hasClass("pane_css")) {
                        $(this).addClass("close");
                    } else {
                        $(this).removeClass("close");
                    }
                }
            });
        })
    }


    function HoverPane_init() {
        $(".HoverPane").each(function(i) {
            var singleCur = this;
            var tObj = $(singleCur).find(".h-t");
            var cObj = $(singleCur).find(".h-c");
            /**//* if (cObj.css("display") == "none") {
            tObj.addClass("close");
            } else {
            tObj.removeClass("close");
            }*/

            tObj.hover(function() {
                cObj.show();
            },
                      function() {
                          singleCur.timeout = setTimeout(function() {
                              cObj.hide();
                          }, 600);
                      }
              );
            cObj.hover(function() {
                    clearTimeout(singleCur.timeout);
                    cObj.show();
                },
                  function() {
                      cObj.hide();
                  }
              );
        });
    }



    $(document).ready(function() {       
        SingePane_init();
        MutiplePane_init();
        HoverPane_init();
    });