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

add tag document

develop
就眠仪式 2020-07-19 21:30:54 +08:00
parent 3e4dd83893
commit 36bbd7a29a
1 changed files with 128 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
view/document/tag.html
View File

@ -14,7 +14,24 @@
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">开发环境</div> <div class="layui-card-header">开发环境</div>
<div class="layui-card-body"> <div class="layui-card-body">
Tag 标签组件 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>
</div> </div>
</div> </div>
</div> </div>
@ -38,11 +55,13 @@
<h2 class="layui-colla-title">显示代码</h2> <h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content"> <div class="layui-colla-content">
<pre class="layui-code" lay-encode="true"> <pre class="layui-code" lay-encode="true">
<link rel="stylesheet" href="component/pear/css/pear.css" /> <div class="layui-btn-container tag">
并 <button lay-id="11" type="button" class="tag-item">网站设置</button>
<script src="component/layui/layui.js"></script> <button lay-id="22" type="button" class="tag-item">用户管理</button>
并 <button lay-id="33" type="button" class="tag-item">权限分配</button>
<script src="component/pear/pear.js"></script> <button lay-id="44" type="button" class="tag-item">商品管理</button>
<button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
</pre> </pre>
</div> </div>
</div> </div>
@ -61,6 +80,23 @@
</div> </div>
</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">
<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>
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">动态操作</div> <div class="layui-card-header">动态操作</div>
@ -78,6 +114,20 @@
</div> </div>
</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">
tag.add('demo', {text: '新选项',id: 12})
tag.delete('demo', '44');
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">圆角风格</div> <div class="layui-card-header">圆角风格</div>
@ -87,7 +137,25 @@
<button lay-id="22" 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="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" 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 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>
</div> </div>
</div> </div>
</div> </div>
@ -106,6 +174,32 @@
</div> </div>
</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-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>
// 删除响应事件
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>
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">新建功能</div> <div class="layui-card-header">新建功能</div>
@ -115,7 +209,31 @@
<button lay-id="22" 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="33" type="button" class="tag-item">权限分配</button>
<button lay-id="44" 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>
</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>
// 新增响应事件
tag.on('add(demo)', function(data) {
console.log('新建');
console.log(this);
console.log(data.index);
console.log(data.elem);
});
</pre>
</div> </div>
</div> </div>
</div> </div>
@ -124,18 +242,11 @@
<script src="../../component/layui/layui.js"></script> <script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script> <script src="../../component/pear/pear.js"></script>
<script> <script>
layui.use(['tag','code','element'], function() { layui.use(['tag', 'code', 'element'], function() {
var $ = layui.jquery, var $ = layui.jquery,
tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块 tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
layui.code(); layui.code();
//全局设置
/*tag.set({
likeHref: 'modules/tag.css', //tag.css所在的路径
skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
tagText: '添加标签' //标签添加按钮提示文本
});*/
tag.render("test", { tag.render("test", {
skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式 skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式