使用layui-tree美化左侧菜单，点击生成tab选项

layui-tree美化左侧菜单

• html

  <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll " >
          <div id="sidemenubar" lay-filter="test"></div>
      </div>
  </div>

• css

  /*左侧导航*/
  .layui-tree-skin-sidebar li i{
  color: rgba(255,255,255,.7);
  display: none;
  }
  .layui-tree-skin-sidebar li a cite{
  color: rgba(255,255,255,.7)
  }
  .layui-tree-skin-sidebar li .layui-tree-spread{
  display: block;
  position: absolute;
  right: 30px;
  }
  .layui-tree-skin-sidebar li{
  line-height: 45px;
  position: relative;
  }
  .layui-tree-skin-sidebar li ul{
  margin-left: 0;
  background: rgba(0,0,0,.3);
  }
  .layui-tree-skin-sidebar li ul a{
  padding-left: 20px;
  }
  .layui-tree-skin-sidebar li a{
  height: 45px;
  border-left: 5px solid transparent;
  box-sizing: border-box;
  width: 100%;
  }
  .layui-tree-skin-sidebar li a:hover{
  background: #4E5465;
  color: #fff;
  border-left: 5px solid #009688;
  }
  .layui-tree-skin-sidebar li a.active{
  background: #009688;
  }

• js

  <!--layui.js文件必须放到HTML内容的最后-->
  <script src="layui/layui.js"></script>
  layui.use([‘element‘,‘layer‘,‘jquery‘,‘tree‘], function(){
  var element = layui.element;
  var layer = layui.layer;
  var $ = layui.jquery;
  var menuData =  [ //节点
          {
              name: ‘常用文件夹‘
              ,id: ‘1‘
              ,children: [
              {
                  name: ‘所有未读‘
                  ,id: ‘11‘
                  ,url: ‘http://www.layui.com/‘
              }, {
                  name: ‘置顶邮件‘
                  ,id: ‘12‘
              }, {
                  name: ‘标签邮件‘
                  ,id: ‘13‘
              }
          ]
          }, {
              name: ‘我的邮箱‘
              ,id: ‘2‘
              ,children: [
                  {
                      name: ‘QQ邮箱‘
                      ,id: ‘21‘
                      ,spread: true
                      ,children: [
                      {
                          name: ‘收件箱‘
                          ,id: ‘211‘
                          ,children: [
                          {
                              name: ‘所有未读‘
                              ,id: ‘2111‘
                          }, {
                              name: ‘置顶邮件‘
                              ,id: ‘2112‘
                          }, {
                              name: ‘标签邮件‘
                              ,id: ‘2113‘
                          }
                      ]
                      }, {
                          name: ‘已发出的邮件‘
                          ,id: ‘212‘
                      }, {
                          name: ‘垃圾邮件‘
                          ,id: ‘213‘
                      }
                  ]
                  }, {
                      name: ‘阿里云邮‘
                      ,id: ‘22‘
                      ,children: [
                          {
                              name: ‘收件箱‘
                              ,id: ‘221‘
                          }, {
                              name: ‘已发出的邮件‘
                              ,id: ‘222‘
                          }, {
                              name: ‘垃圾邮件‘
                              ,id: ‘223‘
                          }
                      ]
                  }
              ]
          }
      ]
  layui.tree({
      elem: ‘#sidemenubar‘ //传入元素选择器
      ,skin: ‘sidebar‘  //自定义tree样式的类名
      ,nodes:menuData  //节点数据
      ,click: function(node,item){
          //node即为当前点击的节点数据,item就是被点击的a标签对象了
          //导航按钮选中当前
          $(‘#sidemenubar a‘).removeClass(‘active‘);
          $(item).addClass(‘active‘);
          $(item).siblings(‘.layui-tree-spread‘).click();
          //添加新tab
          activeTab.init(node.name,node.url,node.id);
      }
  });
  var activeTab = {
      tabTit : ‘‘, //tab titile标题
      tabUrl : ‘‘, //tab内容嵌套iframe的src
      tabId  : ‘‘, //tab 标签的lay-id
      tabCon : function(){
          var result;
          $.ajax({
              type: ‘get‘,
              url: this.tabUrl,
              dataType: ‘html‘,
              success: function(data){
                  result = data;
              }
          })
          return result;
      },
      addTab : function(){ //新增tab项
          element.tabAdd(‘demo‘, {
              title: this.tabTit
              ,content: ‘<iframe src = ‘+this.tabUrl +‘ ></iframe>‘ //支持传入html
              ,id: this.tabId
          })
      },
      changeTab: function(){ //选中tab项
          element.tabChange(‘demo‘, this.tabId);
      },
      ishasTab : function(){ //判断tab项中是否包含
          var _this = this;
          var dataId,isflag;
          var arrays = $(‘.layui-tab-title li‘);
          $.each(arrays,function(idx,ele){
              dataId = $(ele).attr(‘lay-id‘);
              if(dataId === _this.tabId){
                  isflag = true
                  return false
              }else{
                  isflag = false
              }
          })
          return isflag
      },
      init : function(tabtit,taburl,tabid){
          var _this = this;
          _this.tabUrl = taburl;
          _this.tabId = tabid;
          _this.tabTit = tabtit;
          if(taburl){
              if(!_this.ishasTab()){
                  _this.addTab();
              }
              _this.changeTab();
          }else{
              return false
          }
      }
  }
  });

  新增tab项逻辑思路

• 点击左侧导航，获取它的数据（url，id。。。）
• 如果有url，则判断其id是否与tab项的lay-id相同，相同则切换选中，不相同则新增
  

  遇到的问题

  layui-tree 单击节点只返回当前的节点数据，不返回当前节点的HTML对象

  解决方案

• 更改tree.js 源码

  

e.children("a").on("click",
                    function(e) {
                        layui.stope(e),
                            i.click(o,this)
                    })
i.click(o)改为 i.click(o,this)

• 使用

  

结语

layui的使用刚刚开始，记录所采之坑，采坑继续进行中。。。

原文地址：https://www.cnblogs.com/hukeer/p/8383708.html