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选项卡,添加,关闭的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
vue-ajax小封装实例
Sep 18 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 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
You might like
PHP 高手之路(一)
2006/10/09 PHP
模仿OSO的论坛(二)
2006/10/09 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python远程登录代码
2008/04/29 Python
python 调用HBase的简单实例
2016/12/18 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Python中有几个关键字
2020/06/04 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
党员自我批评与反省材料
2014/02/10 职场文书
企业负责人任命书
2014/06/05 职场文书
市场策划求职信
2014/08/07 职场文书
实习指导老师意见
2015/06/04 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA