JGUI源码：Tab组件实现（9）

程序界面效果如下

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 == "navitemchildleaf") {

      //点击了子项叶节点

      $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) {

        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");

      }

      var left=$tabcontent.scrollLeft();

      var objleft=$findTab.offset().left-$tabcontent.offset().left-50;//50是左右按钮的宽度

      var objright=$findTab.offset().left-$tabcontent.offset().left-50+left+$findTab.width();//50是左右按钮的宽度

      var objwidth=$findTab.width();

      console.log(left+','+objleft+','+$tabcontent.width());

      if(objleft<0)//左边非可见区域

      {

        $tabcontent

                  .stop()

                  .animate({ scrollLeft: left+objleft-objwidth }, 200);

      }else if(objright>$tabcontent.width())//右边非可见区域

      {

        $tabcontent

                  .stop()

                  .animate({ scrollLeft: left+(objright-$tabcontent.width())+objwidth }, 200);

      }

      $findTab.trigger("click");

    }

    return true;

  };

代码一直完善中，详细代码请看
www.jgui.com