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

layui

layui 后台布局

• 控制台
• 商品管理
• 用户

• 其它系统

  邮件管理

  消息管理

  授权管理

• 

  贤心

  基本资料

  安全设置

• 退了

• 所有商品

  列表一

  列表二

  列表三

  超链接

• 解决方案

  列表一

  列表二

  超链接

• 云市场
• 发布商品

• 网站设置
• 用户管理 ဆ
• 权限分配
• 商品管理
• 订单管理

内容1

内容2

内容3

内容4

内容5

新增Tab项

删除：商品管理

切换到：用户管理

layui.use('element', function () {

var $ = layui.jquery

, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

//触发事件

var active = {

tabAdd: function () {

//新增一个Tab项

element.tabAdd('demo', {

title: '新选项ဆ' //用于演示

, 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');

});

});