示例地址
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">網(wǎng)站設(shè)置</button>
<button lay-id="22" type="button" class="tag-item">用戶管理</button>
<button lay-id="33" type="button" class="tag-item">權(quán)限分配</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" 允許關(guān)閉標簽 值:lay-allowclose="" |lay-allowclose="true"
lay-newTag="true" 允許新增標簽 值:lay-newTag="" |lay-newTag="true"
//config的設(shè)置是全局的
layui.config({
base: './modules/' //假設(shè)這是你存放拓展模塊的根目錄
}).extend({ //設(shè)定模塊別名
tag: 'tag' //如果 tag.js 是在根目錄,也可以不用設(shè)定別名
}).use('tag', function(){
var tag = layui.tag;
tag.on('click(demo)', function (data) {
console.log('點擊');
console.log(this); //當(dāng)前Tag標簽所在的原始DOM元素
console.log(data.index); //得到當(dāng)前Tag的所在下標
console.log(data.elem); //得到當(dāng)前的Tag大容器
});
tag.on('add(demo)', function (data) {
console.log('新增');
console.log(this); //當(dāng)前Tag標簽所在的原始DOM元素
console.log(data.index); //得到當(dāng)前Tag的所在下標
console.log(data.elem); //得到當(dāng)前的Tag大容器
console.log(data.othis); //得到新增的DOM對象
//return false; //返回false 取消新增操作; 同from表達提交事件。
});
tag.on('delete(demo)', function (data) {
console.log('刪除');
console.log(this); //當(dāng)前Tag標簽所在的原始DOM元素
console.log(data.index); //得到當(dāng)前Tag的所在下標
console.log(data.elem); //得到當(dāng)前的Tag大容器
//return false; //返回false 取消刪除操作; 同from表達提交事件。
});
});