layui 第三方组件平台

返回首页 发布组件

基于 layui 扩展的标签组件

创建:2019-10-6

文档


示例地址
http://lh_yun.gitee.io/lih_tag/
使用
<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>
</div>
lay-allowclose="true" 允许关闭标签 值:lay-allowclose="" |lay-allowclose="true"
lay-newTag="true" 允许新增标签 值:lay-newTag="" |lay-newTag="true"
 //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大容器
});

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表达提交事件。
});
});

下载

去码云下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。