编程 Javascript

layerui代码控制tab选项卡,添加,关闭的实例

Posted in Javascript onSeptember 04, 2019

废话不多说，直接上代码吧！

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link href="layui/css/layui.css" rel="external nofollow" rel="stylesheet" />
 <script src="layui/layui.js"></script>
 <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 <div class="layui-layout layui-layout-admin">
  <div class="layui-header">
   <div class="layui-logo">layui 后台布局</div>
   <!-- 头部区域（可配合layui已有的水平导航） -->
   <ul class="layui-nav layui-layout-left">
    <li class="layui-nav-item"><a href="">控制台</a></li>
    <li class="layui-nav-item"><a href="">商品管理</a></li>
    <li class="layui-nav-item"><a href="">用户</a></li>
    <li class="layui-nav-item">
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其它系统</a>
     <dl class="layui-nav-child">
      <dd><a href="">邮件管理</a></dd>
      <dd><a href="">消息管理</a></dd>
      <dd><a href="">授权管理</a></dd>
     </dl>
    </li>
   </ul>
   <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item">
     <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
      <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
      贤心
     </a>
     <dl class="layui-nav-child">
      <dd><a href="">基本资料</a></dd>
      <dd><a href="">安全设置</a></dd>
     </dl>
    </li>
    <li class="layui-nav-item"><a href="">退了</a></li>
   </ul>
  </div>
  <div class="layui-side layui-bg-black">
   <div class="layui-side-scroll">
    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
     <li class="layui-nav-item layui-nav-itemed">
      <a class="" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >所有商品</a>
      <dl class="layui-nav-child">
       <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表一</a></dd>
       <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表二</a></dd>
       <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表三</a></dd>
       <dd><a href="">超链接</a></dd>
      </dl>
     </li>
     <li class="layui-nav-item">
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >解决方案</a>
      <dl class="layui-nav-child">
       <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表一</a></dd>
       <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表二</a></dd>
       <dd><a href="">超链接</a></dd>
      </dl>
     </li>
     <li class="layui-nav-item"><a href="">云市场</a></li>
     <li class="layui-nav-item"><a href="">发布商品</a></li>
    </ul>
   </div>
  </div>
  <div class="layui-body">
   <div style="padding: 3px;">
    <div class="layui-tab" lay-filter="demo" >
     <ul class="layui-tab-title" >
      <li class="layui-this" lay-id="11" id="11">网站设置 </li>
      <li lay-id="22">用户管理 <i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>
      <li lay-id="33">权限分配</li>
      <li lay-id="44">商品管理</li>
      <li lay-id="55">订单管理</li>
     </ul>
     <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
      <div class="layui-tab-item">内容4</div>
      <div class="layui-tab-item">内容5</div>
     </div>
    </div>
    <div class="site-demo-button" style="margin-bottom: 0;">
     <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
     <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
     <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
    </div>
   </div>
  </div>
 </div>
 <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 <script>
  layui.use('element', function () {
   var $ = layui.jquery
   , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
   //触发事件
   var active = {
    tabAdd: function () {
     //新增一个Tab项
     element.tabAdd('demo', {
      title: '新选项<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用于演示
      , content: '内容' + (Math.random() * 1000 | 0)
      , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
     });
     //增加点击关闭事件 
     var r = $(".layui-tab-title").find("li");
     //每次新打开tab都是最后一个，所以只对最后一个tab添加点击关闭事件 
     r.eq(r.length - 1).children("i").on("click", function () {
      alert($(this).parent("li").attr('lay-id'));
      element.tabDelete("demo", $(this).parent("li").attr('lay-id'));
     }), element.tabChange("demo", r.length - 1);
     element.init();
    }
    , tabDelete: function (othis) {
     //删除指定Tab项
     element.tabDelete('demo', '44'); //删除：“商品管理”

     othis.addClass('layui-btn-disabled');
    }
    , tabChange: function () {
     //切换到指定Tab项
     element.tabChange('demo', '22'); //切换到：用户管理
    }
   };
   $('.site-demo-active').on('click', function () {
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
   });
   //Hash地址的定位
   var layid = location.hash.replace(/^#test=/, '');
   element.tabChange('test', layid);
   element.on('tab(test)', function (elem) {
    location.hash = 'test=' + $(this).attr('lay-id');
   });
  });
 </script>
</body>
</html>

以上这篇layerui代码控制tab选项卡,添加,关闭的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

奔跑的熊猫

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript:history.go()和History.back()的区别及应用

Nov 25 Javascript

当鼠标滑过文本框自动选中输入框内容的JS代码分享

Nov 26 Javascript

浅析XMLHttpRequest的缓存问题

Dec 13 Javascript

将list转换为json失败的原因

Dec 17 Javascript

Vue.js tab实现选项卡切换

May 16 Javascript

vue 页面加载进度条组件实例

Feb 05 Javascript

vue directive定义全局和局部指令及指令简写

Nov 20 Javascript

vue router 用户登陆功能的实例代码

Apr 24 Javascript

Javascript数组方法reduce的妙用之处分享

Jun 10 Javascript

vue 对axios get pust put delete封装的实例代码

Jan 05 Javascript

js实现的订阅发布者模式简单示例

Mar 14 Javascript

解决vue scoped scss 无效的问题

Sep 04 Javascript

layui 表单标签的校验方法

Sep 04 #Javascript

解决layui 表单元素radio不显示渲染的问题

Sep 04 #Javascript

对layer弹出框中icon数字参数的说明介绍

Sep 04 #Javascript

Element 默认勾选表格 toggleRowSelection的实现

Sep 04 #Javascript

使用Angular material主题定义自己的组件库的配色体系

Sep 04 #Javascript

vue-loader中引入模板预处理器的实现

Sep 04 #Javascript

解决layer图标icon不加载的问题

Sep 04 #Javascript