JGUI源码：Tab组件实现

程序界面效果如下

Tab组件由多个TabItem组成，超出部分隐藏，可以通过左右按钮滑动显示出来

1、封装

// 初始化内容
$(function () {
    J.JTab($(".jgui-tab")).init();
});
//Tab封装
(function($) {
  J.JTab = function($p_selector) {
    //初始化
    init = function(p_options, p_datas, p_param) {
      return $p_selector.each(function() {
        $this=$(this);
        $this.find(".jgui-tab-pre").unbind('click').click(function(event) {
          var cur_left = $this.find(".jgui-tabcontent").scrollLeft(); //当前滚过的距离
          $this.find(".jgui-tabcontent")
            .stop()
            .animate({ scrollLeft: -200 + cur_left }, 200);
        });
        $this.find(".jgui-tab-next").unbind('click').click(function(event) {
          var cur_left = $this.find(".jgui-tabcontent").scrollLeft(); //当前滚过的距离
          $this.find(".jgui-tabcontent")
            .stop()
            .animate({ scrollLeft: 200 + cur_left }, 200);
        });
        $this.find(".jgui-tabitem").unbind('click').click(function(event) {
          $(this)
            .siblings(".jgui-tabitem")
            .removeClass("selected");
          $(this).addClass("selected", 300);
        });
        $this.find(".jgui-tabitem .jgui-tab-close").unbind('click').click(function(event) {
          $(this)
            .closest(".jgui-tabitem")
            .remove();
        });
      });
    };
    return {
      init: init
    };
  };
})(J.$);

2、添加和显示方法，暂时实现功能，以后封装

//NavItem点击事件
  var events = $("#menuaccordion").data("events");
  events.onNavItemClick = function(p_obj, p_type) {
    if (!$("#leftpanel").is(".unfold") && p_type == "navitem") {
      //折叠状态展开
      $("#leftpanel").width(300);
      $("#centerpanel").css("left", "300px");
      $("#mainlogo").html("JGUI DEMO");
      J.Accordion($(p_obj).closest(".jgui-accordion")).unfold();
      $("#leftpanel").toggleClass("unfold");
      $("#folderbtn").toggleClass("icon-menu-unfold", "icon-menu-fold");
      return false;
    } else if (p_type == "navitemchild") {
      //点击了子项
      $tabcontent=$("#pagetab .jgui-tabcontent");
      var text = $(p_obj)
        .find("a")
        .html();
      var $findTab = undefined;
      $tabcontent
        .find("span")
        .each(function() {
         var $this = $(this);
           if ($this.html() == text) {
             $findTab = $this;
             return;
           }
        });
      if ($findTab == undefined) {//没有找到对应文字的TabItem，添加
          var appentHtml =
          '<a class="jgui-tabitem "><i class="anticon icon-codepen jgui-tab-item-icon"></i><span>' +
          text +
          '</span><i class=" anticon icon-close jgui-tab-close "></i></a>';
          $("#pagetab .jgui-tabcontent").append(appentHtml);
          J.JTab($("#pagetab")).init();
          $findTab=$("#pagetab .jgui-tabcontent .jgui-tabitem:last-child");
          $findTab.trigger("click");
      }
      else//找到了使可见
      {
        $findTab.trigger("click");
        var left=$tabcontent.scrollLeft();
        var objleft=$findTab.offset().left-$('#menuaccordion').width();
        var objwidth=$findTab.width();
        console.log(left+','+objleft+','+$tabcontent.width());
        if(objleft<0)//到左边了
        {
          $tabcontent
                   .stop()
                   .animate({ scrollLeft: left+objleft-100 }, 200);
        }else if(objleft>$tabcontent.width())
        {
          $tabcontent
                   .stop()
                   .animate({ scrollLeft: left+(objleft-$tabcontent.width())+objwidth+100 }, 200);
        }
      }
    }

+-