模块加载名称:tag
元素功能的开启只需要加载Tag模块即会自动完成,所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素,如你的页面存在一个 Tag元素块,那么Tag模块会自动赋予她该有的功能。
<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>
前提是你要加载tag模块
//config的设置是全局的 layui.config({ base: './modules/' //假设这是你存放拓展模块的根目录 }).extend({ //设定模块别名 tag: 'tag' //如果 tag.js 是在根目录,也可以不用设定别名 }).use('tag', function(){ var tag = layui.tag; //一些事件监听 tag.on('click(demo)', function(data){ console.log('点击'); console.log(this); //当前Tag标题所在的原始DOM元素 console.log(data.index); //得到当前Tag的所在下标 console.log(data.elem); //得到当前的Tag大容器 }); });
我们通过自定义元素属性来作为元素的功能参数,他们一般配置在容器外层,如:
<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">…</div>
tag模块支持的元素如下表:
属性名 | 可选值 | 说明 |
---|---|---|
lay-filter | 任意字符 | 事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。 |
lay-allowClose | true | 是否允许标签关闭。默认不允许,即不用设置该属性 |
lay-newTag | true | 是否允许标签新增。默认不允许,即不用设置该属性 |
基础方法允许你在外部主动对元素发起一起操作,目前tag模块提供的方法如下:
方法名 | 描述 |
---|---|
var tag = layui.tag; |
tag模块的实例
返回的tag变量为该实例的对象,携带一些用于元素操作的基础方法 |
tag.on(filter, callback); | 用于元素的一些事件监听 |
tag.add(filter, options); |
用于新增一个Tag标签
参数filter:tag标签的 lay-filter="value" 过滤器的值(value) 参数options:设定可选值的对象,目前支持的选项如下述示例: tag.add('demo', { text: '标签的内容' ,id: '标签的lay-id属性值' }); |
tag.delete(filter, layid); |
用于删除指定的Tag标签
参数filter:tag元素的 lay-filter="value" 过滤器的值(value) 参数layid:标签的 属性 lay-id 的值 tag.delete('demo', 'xxx'); //删除 lay-id="xxx" 的这一标签 |
跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时tag的相关功能将不会对其有效,你必须手工执行 tag.init(filter, {}) 方法即可。也可以用 tag.render(filter, {}}); 方法替代
第一个参数:filter,为元素的 lay-filter="" 的值。你可以借助该参数,完成指定元素的局部更新。
【HTML】 <div class="layui-btn-container tag" lay-filter="test" lay-newTag="true"> … </div> 【JavaScript】 //比如当你动态插入了标签,这时你需要重新去对它进行渲染 $('[lay-filter="test"]').append('<button lay-id="111" type="button" class="tag-item">新增标签111</button>'); tag.render("test"); //对 lay-filter="test1" 所在导航重新渲染。注:layui 2.1.6 版本新增 //……
第二个参数:type,为表单的type类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表:
参数(options)值 | 描述 |
---|---|
likeHref | css 样式所在路径 |
skin | 样式 |
tagText | 标签新增提示文本 |
tag.init(); //更新全部 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>添加标签' //标签添加按钮提示文本 }); //重新对标签进行渲染 //……
语法:tag.on('event(过滤器值)', callback);
目前tag模块所支持的事件如下表:
event | 描述 |
---|---|
click | 监听Tag标签点击事件 |
add | 监听Tag标签新增事件 |
delete | 监听Tag标签删除事件 |
默认情况下,事件所监听的是全部的元素,但如果你只想监听某一个元素,使用事件过滤器即可。
如:<div class="layui-btn-container tag"
lay-filter="test">
tag.on('click(test)', function(data){ console.log(data); });
Tag标签点击时触发,回调函数返回一个object参数,携带两个成员:
tag.on('click(filter)', function(data){ console.log(this); //当前Tag标签所在的原始DOM元素 console.log(data.index); //得到当前Tag的所在下标 console.log(data.elem); //得到当前的Tag大容器 });
Tag标签新增时触发,回调函数返回一个object参数,携带三个成员:
tag.on('add(filter)', function(data){ console.log(this); //当前Tag标签所在的原始DOM元素 console.log(data.index); //得到当前Tag的所在下标 console.log(data.elem); //得到当前的Tag大容器 console.log(data.othis); //得到新增的DOM对象 //return false; //返回false 取消新增操作。 });
Tag标签删除时触发,回调函数返回一个object参数,携带两个成员:
tag.on('delete(filter)', function(data){ console.log(this); //当前Tag标签所在的原始DOM元素 console.log(data.index); //得到当前Tag的所在下标 console.log(data.elem); //得到当前的Tag大容器 //return false; //返回false 取消删除操作。 });