root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Pear-Admin-Layui/view/document/tag.html

266 lines
10 KiB
HTML
Raw Normal View History

add tag component
2020-07-19 12:25:57 +00:00
<!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="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
add tag document
2020-07-19 13:30:54 +00:00
Tag 标签组件
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" />
并
<script src="component/layui/layui.js"></script>
并
<script src="component/pear/pear.js"></script>
</pre>
</div>
add tag component
2020-07-19 12:25:57 +00:00
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">主题风格</div>
<div class="layui-card-body">
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
</div>
</div>
</div>
add tag document
2020-07-19 13:30:54 +00:00
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag">
<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
</pre>
</div>
</div>
</div>
</div>
add tag component
2020-07-19 12:25:57 +00:00
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">动态操作</div>
<div class="layui-card-body">
<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
<button lay-id="22" type="button" class="tag-item">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
</div>
</div>
</div>
add tag document
2020-07-19 13:30:54 +00:00
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
tag.add('demo', {text: '新选项',id: 12})
tag.delete('demo', '44');
</pre>
</div>
</div>
</div>
</div>
add tag component
2020-07-19 12:25:57 +00:00
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">圆角风格</div>
<div class="layui-card-body">
<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>
add tag document
2020-07-19 13:30:54 +00:00
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-filter="test" lay-newTags="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>
</pre>
add tag component
2020-07-19 12:25:57 +00:00
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">删除功能</div>
<div class="layui-card-body">
<div class="layui-btn-container tag" lay-allowclose="true">
<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
<button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
</div>
</div>
</div>
</div>
add tag document
2020-07-19 13:30:54 +00:00
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-allowclose="true">
<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
</div>
add popup component and poppup document
2020-07-19 15:37:28 +00:00
add tag document
2020-07-19 13:30:54 +00:00
tag.on('delete(demo)', function(data) {
console.log('删除');
console.log(this);
console.log(data.index);
console.log(data.elem);
console.log(data.othis);
});
</pre>
</div>
</div>
</div>
</div>
add tag component
2020-07-19 12:25:57 +00:00
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">新建功能</div>
<div class="layui-card-body">
<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>
add tag document
2020-07-19 13:30:54 +00:00
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
<div class="layui-btn-container tag" lay-newTags="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>
</div>
add popup component and poppup document
2020-07-19 15:37:28 +00:00
add tag document
2020-07-19 13:30:54 +00:00
tag.on('add(demo)', function(data) {
console.log('新建');
console.log(this);
console.log(data.index);
console.log(data.elem);
});
</pre>
add tag component
2020-07-19 12:25:57 +00:00
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
add tag document
2020-07-19 13:30:54 +00:00
layui.use(['tag', 'code', 'element'], function() {
add tag component
2020-07-19 12:25:57 +00:00
var $ = layui.jquery,
tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
add tag document
2020-07-19 13:30:54 +00:00
layui.code();
add tag component
2020-07-19 12:25:57 +00:00
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大容器
});
});
</script>
</body>
</html>