1.页面显示
<!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 rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>默认风格的TAG</legend>
</fieldset>
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>动态操作TAG</legend>
</fieldset>
<!--lay-allowclose="true" 允许关闭标签 值:lay-allowclose="" |lay-allowclose="true" -->
<!--lay-newTag="true" 允许新增标签 值:lay-newTag="" |lay-newTag="true" -->
<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
<!--自定义新增标签按钮元素 button-new-tag -->
<!--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius button-new-tag">+ New Tag</button>-->
</div>
<div class="site-demo-button" style="margin-bottom: 0;">
<button class="layui-btn site-demo-active" data-type="tagAdd">新增Tag项</button>
<button class="layui-btn site-demo-active" data-type="tagDelete">删除:商品管理</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>圆角风格的TAG</legend>
</fieldset>
<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>带删除功能的TAG</legend>
</fieldset>
<div class="layui-btn-container tag" lay-allowclose="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>带新建功能的TAG</legend>
</fieldset>
<div class="layui-btn-container tag" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
//config的设置是全局的
layui.config({
base: './modules/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
tag: 'tag' //如果 tag.js 是在根目录,也可以不用设定别名
}).use('tag', function () {
var $ = layui.jquery
, tag = layui.tag; //Tag的切换功能,切换事件监听等,需要依赖tag模块
//全局设置
/*tag.set({
likeHref: 'modules/tag.css', //tag.css所在的路径
skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
tagText: '添加标签' //标签添加按钮提示文本
});*/
//指定渲染 lay-filter="test" 圆角风格的TAG
tag.render("test", {
skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
});
//触发事件
var active = {
tagAdd: function () {
//新增一个Tag项
tag.add('demo', {
text: '新选项' + (Math.random() * 1000 | 0) //用于演示
, id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下
})
}
, tagDelete: function (othis) {
//删除指定Tag项
tag.delete('demo', '44'); //删除:“商品管理”
othis.addClass('layui-btn-disabled');
}
};
$('.site-demo-active').on('click', function () {
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
tag.on('click(demo)', function (data) {
console.log('点击');
console.log(this); //当前Tag标签所在的原始DOM元素
console.log(data.index); //得到当前Tag的所在下标
console.log(data.elem); //得到当前的Tag大容器
});
tag.on('add(demo)', function (data) {
console.log('新增');
console.log(this); //当前Tag标签所在的原始DOM元素
console.log(data.index); //得到当前Tag的所在下标
console.log(data.elem); //得到当前的Tag大容器
console.log(data.othis); //得到新增的DOM对象
//return false; //返回false 取消新增操作; 同from表达提交事件。
});
tag.on('delete(demo)', function (data) {
console.log('删除');
console.log(this); //当前Tag标签所在的原始DOM元素
console.log(data.index); //得到当前Tag的所在下标
console.log(data.elem); //得到当前的Tag大容器
//return false; //返回false 取消删除操作; 同from表达提交事件。
});
});
</script>
</body>
</html>
tag.js
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,MOD_NAME = 'tag',
TAG_CLASS = '.tag',
BUTTON_NEW_TAG ='button-new-tag',
INPUT_NEW_TAG ='input-new-tag',
TAG_ITEM ='tag-item',
CLOSE = 'tag-close',
DEFAULT_SKIN ='layui-btn layui-btn-primary layui-btn-sm'
,tag = function(){
this.config = {
likeHref: layui.cache.base + 'tag.css', //tag.css路径
skin: DEFAULT_SKIN,
tagText:'+ New Tag'
};
this.configs = {}
};
//全局设置
tag.prototype.set = function(options){
var that = this;
$.extend(true, that.config, options);
tag.render();
return that;
};
//表单事件监听
tag.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
};
//外部Tag新增
tag.prototype.add = function(filter, options){
var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
call.add(null, tagElem, options);
call.tagAuto(filter);
return this.data;
};
//外部Tag删除
tag.prototype.delete = function(filter, layid){
var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
,tagItemElem = tagElem.find('>.' + TAG_ITEM + '[lay-id="'+ layid +'"]');
call.delete(null, tagItemElem);
return this;
};
//获取数据
tag.prototype.data = function (filter) {
var tagElem = $(TAG_CLASS + '[lay-filter=' + filter + ']');
var data=[];
tagElem.find(".tag-item").each(function (i,item) {
var val= $(item).contents().filter(function (index, content) {
return content.nodeType === 3;
}).text();
data.push(val);
});
return data;
};
//基础事件体
var call = {
//Tag点击
tagClick: function(e, index, tagItemElem, options){
options = options || {};
var othis = tagItemElem || $(this)
,index = index || othis.index(othis)
,parents = othis.parents(TAG_CLASS).eq(0)
,filter = parents.attr('lay-filter');
layui.event.call(this, MOD_NAME, 'click('+ filter +')', {
elem: parents
,index: index
});
}
//Tag新增事件
,add: function(e, tagElem, options){
var filter = tagElem.attr('lay-filter'),
buttonNewTag = tagElem.children('.' + BUTTON_NEW_TAG),
index = buttonNewTag.index()
,newTag = '<button lay-id="'+ (options.id||'') +'"' +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +' type="button" class="' + TAG_ITEM + '">'+ (options.text||'unnaming') +'</button>';
var result = layui.event.call(this, MOD_NAME, 'add('+ filter +')', {
elem: tagElem
,index: index
,othis: newTag
})
if(result === false) return;
buttonNewTag[0] ? buttonNewTag.before(newTag) : tagElem.append(newTag);
}
//Tag输入事件
,input: function(e, othis){
var buttonNewTag = othis || $(this)
,parents = buttonNewTag.parents(TAG_CLASS).eq(0)
,filter = parents.attr('lay-filter')
var options = tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
//标签输入框
var inpatNewTag = $('<div class="' + INPUT_NEW_TAG + '"><input type="text" autocomplete="off" class="layui-input"></div>');
inpatNewTag.addClass(options.skin);
buttonNewTag.after(inpatNewTag).remove();
inpatNewTag.children('.layui-input').on('blur', function () {
if(this.value){
var options = {
text: this.value
}
call.add(null, parents, options);
}
inpatNewTag.remove();
call.tagAuto(filter);
}).focus();
}
//Tag删除
,delete: function(e, othis){
var tagItem = othis || $(this).parent(), index = tagItem.index()
,parents = tagItem.parents(TAG_CLASS).eq(0)
,filter = parents.attr('lay-filter');
var result = layui.event.call(this, MOD_NAME, 'delete('+ filter +')', {
elem: parents
,index: index
})
if(result === false) return;
tagItem.remove()
}
//Tag 自适应
,tagAuto: function(filter){
filter = filter || '';
var options = filter ? tag.configs[filter] || tag.config : tag.config;
var elemFilter = function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}();
$(TAG_CLASS + elemFilter).each(function(){
var othis = $(this),tagItem = othis.children('.' + TAG_ITEM), buttonNewTag = othis.children('.' + BUTTON_NEW_TAG);
tagItem.removeClass(DEFAULT_SKIN).addClass(options.skin);
//允许关闭
if(othis.attr('lay-allowClose') && tagItem.length){
tagItem.each(function(){
var li = $(this);
if(!li.find('.'+CLOSE)[0]){
var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">ဆ</i>');
close.on('click', call.delete);
li.append(close);
}
});
}
//允许新增标签
if(othis.attr('lay-newTag') && buttonNewTag.length === 0){
buttonNewTag = $('<button type="button" class="' + BUTTON_NEW_TAG + '"></button>');
buttonNewTag.on('click', call.input);
othis.append(buttonNewTag);
}
buttonNewTag.html(options.tagText);
buttonNewTag.removeClass(DEFAULT_SKIN).addClass(options.skin);
});
}
};
//初始化元素操作
tag.prototype.init = function(filter, options){
layui.link(tag.config.likeHref);
if(filter){
tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
}
return call.tagAuto.call(this, filter);
};
tag.prototype.render = tag.prototype.init;
var tag = new tag(), dom = $(document);
tag.render();
dom.on('click', '.' + TAG_ITEM, call.tagClick); //tag 单击事件
exports(MOD_NAME, tag);
});
tag.css
.input-new-tag {
width: 90px;
}
.input-new-tag input {
height: 100%;
border: none;
padding-left:0px;
}
.tag .layui-btn .tag-close:hover {
border-radius: 2px;
background-color: #FF5722;
color: #fff;
}
.tag .layui-btn .tag-close {
margin-left: 8px;
transition: all .2s;
-webkit-transition: all .2s;
}
获取标签内容
tag.data("name")
name是指lay-filter="name"绑定的名称,就可以获取到这个标签添加的内容。