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 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
Js获取事件对象代码
Aug 05 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
three.js如何实现3D动态文字效果
Mar 03 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 日期时间处理函数小结
2009/12/18 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
es5 类与es6中class的区别小结
2020/11/09 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
跟老齐学Python之Python文档
2014/10/10 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python中set()函数简介及实例解析
2018/01/09 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
使用tensorflow实现线性回归
2018/09/08 Python
浅析Python四种数据类型
2018/09/26 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python保留小数位的三种实现方法
2020/01/07 Python
零基础学python应该从哪里入手
2020/08/11 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
研发工程师岗位职责
2014/04/28 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
保证书格式
2015/01/16 职场文书
2019暑假学生安全口号
2019/06/27 职场文书