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 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
javascript实现五星评分功能
Nov 10 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
vue强制刷新组件的方法示例
Feb 28 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
php header示例代码(推荐)
2010/09/08 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python中尾递归用法实例详解
2015/04/28 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python requests模块session代码实例
2020/04/14 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
竞选班长自荐书范文
2014/03/09 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript