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

最新推荐文章于 2019-03-20 00:04:00 发布

weixin_30355437

最新推荐文章于 2019-03-20 00:04:00 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/zhaogaojian/p/10454325.html

版权

程序界面效果如下

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;
  };