first commit
This commit is contained in:
root
143
public/demos/document/area.html
Executable file
143
public/demos/document/area.html
Executable file
@ -0,0 +1,143 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>区域选择</title>
|
||||
<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">
|
||||
Area 省市级联 选择组件
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
基本使用
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item" id="area-picker">
|
||||
<div class="layui-form-label">网点地址</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="province" class="province-selector" data-value="广东省">
|
||||
<option value="">请选择省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="city" class="city-selector" data-value="深圳市">
|
||||
<option value="">请选择市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="county" class="county-selector" data-value="龙岗区">
|
||||
<option value="">请选择区</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</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-form">
|
||||
<div class="layui-form-item" id="area-picker-copy">
|
||||
<div class="layui-form-label">网点地址</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="province" class="province-selector" data-value="广东省">
|
||||
<option value="">请选择省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="city" class="city-selector" data-value="深圳市">
|
||||
<option value="">请选择市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="county" class="county-selector" data-value="龙岗区">
|
||||
<option value="">请选择区</option>
|
||||
</select>
|
||||
</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">
|
||||
layui.use(['area'], function () {
|
||||
var area = layui.area;
|
||||
|
||||
area.render({
|
||||
elem: '#area-picker',
|
||||
change: function (res) {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form', 'area', 'element', 'code'], function() {
|
||||
var layer = layui.layer,
|
||||
form = layui.form,
|
||||
area = layui.area;
|
||||
|
||||
layui.code();
|
||||
|
||||
area.render({
|
||||
elem: '#area-picker',
|
||||
change: function(res) {
|
||||
//选择结果
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
|
||||
area.render({
|
||||
elem: '#area-picker-copy',
|
||||
change: function(res) {
|
||||
//选择结果
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
305
public/demos/document/button.html
Executable file
305
public/demos/document/button.html
Executable file
@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>按钮组件</title>
|
||||
<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">
|
||||
Pear Button 参考 Element UI 样式 ，提供 Button 服务
|
||||
</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" />
|
||||
或
|
||||
<link rel="stylesheet" href="component/pear/css/pear-module/button.css" />
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
简单使用
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn">Default Button</button>
|
||||
<button class="pear-btn pear-btn-primary">Primary Button</button>
|
||||
<br>
|
||||
<br>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Primary</button>
|
||||
<button class="pear-btn pear-btn-success"> Button-Success</button>
|
||||
<button class="pear-btn pear-btn-danger"> Button-danger</button>
|
||||
</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">
|
||||
<button class="pear-btn"> Default Button </button>
|
||||
<button class="pear-btn" dashed> Dashed Button </button>
|
||||
<button class="pear-btn pear-btn-primary"> Primary Button </button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
|
||||
<button class="pear-btn pear-btn-success"> Button-Success </button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
简约样式
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button plain class="pear-btn pear-btn-primary"> Button-Primary</button>
|
||||
<button plain class="pear-btn pear-btn-success"> Button-Success</button>
|
||||
<button plain class="pear-btn pear-btn-danger"> Button-Danger</button>
|
||||
<button plain class="pear-btn pear-btn-warming"> Button-Warming</button>
|
||||
</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">
|
||||
<button class="pear-btn"> Default Button </button>
|
||||
<button class="pear-btn" dashed> Dashed Button </button>
|
||||
<button class="pear-btn pear-btn-primary"> Primary Button </button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
|
||||
<button class="pear-btn pear-btn-success"> Button-Success </button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
按钮大小
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg</button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Default</button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>
|
||||
<br>
|
||||
<br>
|
||||
<button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>
|
||||
<button class="pear-btn pear-btn-warming"> Button-Default</button>
|
||||
<button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>
|
||||
<button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</button>
|
||||
</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">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Default </button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<div class="pear-btn-group">
|
||||
<button class="pear-btn pear-btn-primary" round> Button-One</button>
|
||||
<button class="pear-btn pear-btn-primary" round> Button-Two</button>
|
||||
<button class="pear-btn pear-btn-primary" round> Button-Three</button>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="pear-btn-group">
|
||||
<button class="pear-btn"> Button-One </button>
|
||||
<button class="pear-btn"> Button-Two </button>
|
||||
<button class="pear-btn"> Button-Three </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="pear-btn-group">
|
||||
<button class="pear-btn"> Button-One </button>
|
||||
<button class="pear-btn"> Button-Two </button>
|
||||
<button class="pear-btn"> Button-Three </button>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
Load 自动
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary" load> 加载 600 ms </button>
|
||||
</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">
|
||||
layui.use(["button"], function() {
|
||||
var button = layui.button;
|
||||
|
||||
button.load({
|
||||
elem:'[load]',
|
||||
time: 600,
|
||||
done: function(){
|
||||
popup.success("加载完成");
|
||||
}
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
Load 手动
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<button class="pear-btn pear-btn-primary" loading> 开始 </button>
|
||||
|
||||
<button class="pear-btn pear-btn-danger" stop> 停止 </button>
|
||||
</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">
|
||||
layui.use(["button"], function() {
|
||||
var button = layui.button;
|
||||
|
||||
var dom = button.load({
|
||||
elem:'[load]',
|
||||
})
|
||||
|
||||
dom.stop(function() {
|
||||
popup.failure("已停止");
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
本页跳转
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary" to> 本页跳转 </button>
|
||||
</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">
|
||||
layui.use(["jquery"], function() {
|
||||
var $ = layui.jquery;
|
||||
|
||||
$("[to]").click(function(){
|
||||
top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'code', 'jquery', "button", "popup"], function() {
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var popup = layui.popup;
|
||||
var button = layui.button;
|
||||
|
||||
layui.code();
|
||||
|
||||
$("[load]").click(function() {
|
||||
button.load({
|
||||
elem: '[load]',
|
||||
time: 600,
|
||||
done: function() {
|
||||
popup.success("加载完成");
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
var dom;
|
||||
|
||||
$("[loading]").click(function() {
|
||||
dom = button.load({
|
||||
elem: '[loading]'
|
||||
})
|
||||
})
|
||||
|
||||
$("[stop]").click(function() {
|
||||
dom.stop(function() {
|
||||
popup.failure("已停止");
|
||||
});
|
||||
})
|
||||
|
||||
$("[to]").click(function(){
|
||||
top.layui.admin.jump(14,"百度一下","http://www.bing.com",true)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
78
public/demos/document/card.html
Executable file
78
public/demos/document/card.html
Executable file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数据卡片</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form layui-form-pane">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">卡片标题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="realName" id="realName" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label">卡片名称</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" id="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>
|
||||
搜 索</button>
|
||||
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon"></i>
|
||||
获取数据</button>
|
||||
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-checked-btn"><i class="layui-icon"></i>
|
||||
获取选中数据</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="currentTableId"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['table', 'layer', 'form', 'jquery', 'card'], function() {
|
||||
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let layer = layui.layer;
|
||||
let card = layui.card;
|
||||
|
||||
card.render({
|
||||
elem: '#currentTableId',
|
||||
url: '../../demos/data/card.json', // 接口数据
|
||||
data: [], // 静态数据
|
||||
page: true, // 是否分页
|
||||
limit: 8, // 每页数量
|
||||
linenum: 4, // 每行数量
|
||||
clickItem: function(data){ // 单击事件
|
||||
console.log(data)
|
||||
}
|
||||
})
|
||||
|
||||
// 监听搜索操作
|
||||
form.on('submit(data-search-btn)', function(data) {
|
||||
queryJson = data.field;
|
||||
card.reload("currentTableId", {
|
||||
where: queryJson,
|
||||
});
|
||||
return false;
|
||||
});
|
||||
form.on('submit(data-checked-btn)', function() {
|
||||
var data = card.getChecked("currentTableId");
|
||||
layer.msg(JSON.stringify(data));
|
||||
return false;
|
||||
});
|
||||
form.on('submit(data-btn)', function() {
|
||||
var data = card.getAllData("currentTableId");
|
||||
layer.msg(JSON.stringify(data));
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
219
public/demos/document/core.html
Executable file
219
public/demos/document/core.html
Executable file
@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数据卡片</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="collapseSide" class="pear-btn">侧边切换</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="refreshThis" class="pear-btn">刷新当前</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="refresh" class="pear-btn">刷新指定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="addTab" class="pear-btn">新增卡片</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="changeTabTitle" class="pear-btn">修改标题</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="closeTab" class="pear-btn">删除卡片</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="closeThis" class="pear-btn">删除当前</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="closeAll" class="pear-btn">删除全部</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="closeOther" class="pear-btn">删除其他</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="changeIframe" class="pear-btn">切换页面</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="jump" class="pear-btn">兼容切换</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<button id="fullScreen" class="pear-btn">有点多余</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>方法</th>
|
||||
<th>描述</th>
|
||||
<th>参数</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>admin.collapseSide</td>
|
||||
<td>侧边收缩</td>
|
||||
<td>无</td>
|
||||
<td>无模式限制</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.refreshThis</td>
|
||||
<td>刷新当前</td>
|
||||
<td>无</td>
|
||||
<td>无模式限制</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.refresh</td>
|
||||
<td>刷新指定</td>
|
||||
<td>id: 编号</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.addTab</td>
|
||||
<td>新增卡片</td>
|
||||
<td>id:编号,title:标题,url:路径</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.changeTabTitle</td>
|
||||
<td>修改标题</td>
|
||||
<td>id:编号,title:标题</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.closeTab</td>
|
||||
<td>关闭卡片</td>
|
||||
<td>id:编号</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.closeCurrentTab</td>
|
||||
<td>关闭当前</td>
|
||||
<td>无</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.closeAllTab</td>
|
||||
<td>关闭所有</td>
|
||||
<td>无</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.closeOtherTab</td>
|
||||
<td>关闭其他</td>
|
||||
<td>无</td>
|
||||
<td>仅限 TAB 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.changeIframe</td>
|
||||
<td>切换页面</td>
|
||||
<td>id:编号,title:标题,url:路径</td>
|
||||
<td>仅限 IFRAME 模式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.jump</td>
|
||||
<td>兼容切换</td>
|
||||
<td>id:编号,title:标题,url:路径</td>
|
||||
<td>无模式限制</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin.fullScreen</td>
|
||||
<td>全屏模式</td>
|
||||
<td>无</td>
|
||||
<td>无模式限制</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['jquery','layer'], function() {
|
||||
var $ = layui.jquery;
|
||||
|
||||
$("#collapseSide").click(function(){
|
||||
parent.layui.admin.collapseSide()
|
||||
})
|
||||
|
||||
$("#refreshThis").click(function(){
|
||||
parent.layui.admin.refreshThis()
|
||||
})
|
||||
|
||||
$("#refresh").click(function(){
|
||||
parent.layui.admin.refresh(14)
|
||||
})
|
||||
|
||||
$("#addTab").click(function(){
|
||||
parent.layui.admin.addTab(14,"百度一下","http://www.bing.com")
|
||||
})
|
||||
|
||||
$("#closeTab").click(function(){
|
||||
parent.layui.admin.closeTab(14)
|
||||
})
|
||||
|
||||
$("#closeThis").click(function(){
|
||||
parent.layui.admin.closeCurrentTab()
|
||||
})
|
||||
|
||||
$("#closeAll").click(function(){
|
||||
parent.layui.admin.closeAllTab()
|
||||
})
|
||||
|
||||
$("#changeTabTitle").click(function(){
|
||||
parent.layui.admin.changeTabTitle(16,"修改标题")
|
||||
})
|
||||
|
||||
$("#closeOther").click(function(){
|
||||
parent.layui.admin.closeOtherTab()
|
||||
})
|
||||
|
||||
$("#changeIframe").click(function(){
|
||||
parent.layui.admin.changeIframe(14,"百度一下","http://www.bing.com")
|
||||
})
|
||||
|
||||
$("#jump").click(function(){
|
||||
parent.layui.admin.jump(14,"百度一下","http://www.bing.com")
|
||||
})
|
||||
|
||||
$("#fullScreen").click(function(){
|
||||
parent.layui.admin.fullScreen()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
124
public/demos/document/count.html
Executable file
124
public/demos/document/count.html
Executable file
@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数字滚动</title>
|
||||
<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">
|
||||
Pear Count 数据滚动特效
|
||||
</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">
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
简单使用
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<h2 id="number1">0</h2>
|
||||
</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">
|
||||
layui.use(['count'], function() {
|
||||
var count = layui.count;
|
||||
|
||||
count.up("number1", {
|
||||
time: 8000,
|
||||
num: 4540.34,
|
||||
regulator: 100
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
保留小数
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<h2 id="number2">0</h2>
|
||||
</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">
|
||||
layui.use(['count'], function() {
|
||||
var count = layui.count;
|
||||
|
||||
count.up("number2", {
|
||||
time: 8000,
|
||||
num: 4540.34,
|
||||
bit: 2,
|
||||
regulator: 100
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'code', 'count'], function() {
|
||||
var element = layui.element;
|
||||
var count = layui.count;
|
||||
|
||||
count.up("number1", {
|
||||
time: 8000,
|
||||
num: 4540.34,
|
||||
regulator: 100
|
||||
})
|
||||
|
||||
count.up("number2", {
|
||||
time: 8000,
|
||||
num: 9832.34,
|
||||
bit: 2,
|
||||
regulator: 100
|
||||
})
|
||||
|
||||
|
||||
layui.code();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
597
public/demos/document/drawer.html
Executable file
597
public/demos/document/drawer.html
Executable file
@ -0,0 +1,597 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>抽屉组件</title>
|
||||
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
|
||||
<style>
|
||||
.wrap {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</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">
|
||||
Drawer 在 弹出层 UI 上带来不一样的体验.
|
||||
</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">
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">抽屉</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-top pear-btn pear-btn-primary">上</button>
|
||||
<button class="drawer-bottom pear-btn pear-btn-success">下</button>
|
||||
<button class="drawer-left pear-btn pear-btn-warming">左</button>
|
||||
<button class="drawer-right pear-btn pear-btn-danger">右</button>
|
||||
</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">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
|
||||
drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-top",
|
||||
distance: "30%"
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进阶</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-close-mask pear-btn pear-btn-primary">手动关闭</button>
|
||||
</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">
|
||||
var dom;
|
||||
|
||||
$(".drawer-close-mask").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-close-mask",
|
||||
distance: "30%",
|
||||
maskClose: false
|
||||
});
|
||||
})
|
||||
|
||||
$("#btnClose").click(function() {
|
||||
dom.close();
|
||||
})
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">扩展</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
|
||||
</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">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
maskClose: false,
|
||||
time: 1000
|
||||
});
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">扩展</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
|
||||
</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">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
success:function(){
|
||||
layer.msg("触发回调函数");
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</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 id="targetEl"
|
||||
style="width: 600px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid gainsboro;
|
||||
background-color: #EEE;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center"">
|
||||
<button id="targetDemo" class="pear-btn pear-btn-success">指定容器内打开</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">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
$("#targetDemo").click(function () {
|
||||
drawer.open({
|
||||
// 指定挂载节点
|
||||
target: "#targetEl"
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "50%",
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新版 API -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">基于 layer 的抽屉扩展</div>
|
||||
<div class="layui-card-body">
|
||||
<p style="margin-bottom: 10px;">兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可</p>
|
||||
<button id="layerDrawerLeft" class="pear-btn pear-btn-success">左</button>
|
||||
<button id="layerDrawerRight" class="pear-btn pear-btn-success">右</button>
|
||||
<button id="layerDrawerTop" class="pear-btn pear-btn-success">上</button>
|
||||
<button id="layerDrawerBottom" class="pear-btn pear-btn-success">下</button>
|
||||
<button id="layerDrawer" class="pear-btn pear-btn-success">更多参数示例</button>
|
||||
<button id="layerDrawerParent" class="pear-btn pear-btn-success">父窗口打开</button>
|
||||
<button id="layerDrawerIframe" class="pear-btn pear-btn-success">iframe远程页面</button>
|
||||
<button id="layerDrawerURL" class="pear-btn pear-btn-success">URL远程页面</button>
|
||||
<div
|
||||
id="layertargetEl"
|
||||
style="width: 600px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid gainsboro;
|
||||
background-color: #EEE;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center">
|
||||
<button id="layertargetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
|
||||
</div>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden;
|
||||
position: relative;"</blockquote>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||
使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。
|
||||
</blockquote>
|
||||
</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">
|
||||
$("#layerDrawerLeft").click(function(){
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: 'l',
|
||||
area: "30%",
|
||||
content: "left内容",
|
||||
})
|
||||
})
|
||||
$("#layerDrawerRight").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: 'r',
|
||||
area: "30%",
|
||||
content: "right内容",
|
||||
})
|
||||
})
|
||||
$("#layerDrawerTop").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: "t",
|
||||
content: "top内容",
|
||||
})
|
||||
})
|
||||
$("#layerDrawerBottom").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: "b",
|
||||
content: "bottom内容",
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawer").click(function () {
|
||||
var index = drawer.open({
|
||||
legacy: false,
|
||||
title: ['标题', 'font-size:16px;color:#2d8cf0'],
|
||||
maxmin: true,
|
||||
offset: "r",
|
||||
area: "30%",
|
||||
content: "抽屉内容",
|
||||
btn:"关闭",
|
||||
yes:function(index,layero){
|
||||
drawer.close(index);
|
||||
console.log(index,layero);
|
||||
},
|
||||
btnAlign: "l",
|
||||
closeBtn: 1,
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawerParent").click(function () {
|
||||
|
||||
var index = parent.layui.drawer.open({
|
||||
legacy: false,
|
||||
title: ['标题', 'font-size:16px;color:#2d8cf0'],
|
||||
maxmin: true,
|
||||
offset: "r",
|
||||
area: "30%",
|
||||
content: "抽屉内容",
|
||||
btn:"关闭",
|
||||
yes:function(index,layero){
|
||||
drawer.close(index);
|
||||
console.log(index,layero);
|
||||
},
|
||||
btnAlign: "l",
|
||||
closeBtn: 1,
|
||||
})
|
||||
})
|
||||
|
||||
$("#layertargetDemo").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
target: "#layertargetEl",
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "50%",
|
||||
});
|
||||
})
|
||||
|
||||
$("#layerDrawerIframe").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
|
||||
offset: 'r',
|
||||
area: "80%",
|
||||
maxmin: true,
|
||||
closeBtn: 1,
|
||||
iframe: window.location.origin + "/view/document/table.html"
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawerURL").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
|
||||
offset: 'r',
|
||||
area: "80%",
|
||||
maxmin: true,
|
||||
closeBtn: 1,
|
||||
url: window.location.origin + "/view/document/drawerFragment.html"
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer-left" style="display: none;">
|
||||
<br />
|
||||
<h3>左侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-right" style="display: none;">
|
||||
<br />
|
||||
<h3>右侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-top" style="display: none;">
|
||||
<br />
|
||||
<h3>上侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-bottom" style="display: none;">
|
||||
<br />
|
||||
<h3>下侧弹层内容...</h3>
|
||||
</div>
|
||||
|
||||
<div class="layer-open-mask" style="display: none;">
|
||||
<br />
|
||||
<h3>点击右侧灰色区域</h3>
|
||||
</div>
|
||||
<div class="layer-close-mask" style="display: none;">
|
||||
<button id="btnClose" class="pear-btn pear-btn-primary"
|
||||
style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
|
||||
</div>
|
||||
<div class="layer-auto-close" style="display: none;">
|
||||
<br />
|
||||
<h3>打开 2秒 后自动关闭...</h3>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function() {
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var drawer = layui.drawer;
|
||||
var layer = layui.layer;
|
||||
|
||||
layui.code();
|
||||
|
||||
$("#layerDrawerIframe").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
|
||||
offset: 'r',
|
||||
area: "80%",
|
||||
maxmin: true,
|
||||
closeBtn: 1,
|
||||
iframe: window.location.origin + "/view/document/table.html"
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawerURL").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
|
||||
offset: 'r',
|
||||
area: "80%",
|
||||
maxmin: true,
|
||||
closeBtn: 1,
|
||||
url: window.location.origin + "/view/document/drawerFragment.html"
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawerLeft").click(function(){
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: 'l',
|
||||
area: "30%",
|
||||
content: "left内容",
|
||||
})
|
||||
})
|
||||
$("#layerDrawerRight").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: 'r',
|
||||
area: "30%",
|
||||
content: "right内容",
|
||||
})
|
||||
})
|
||||
$("#layerDrawerTop").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: "t",
|
||||
content: "top内容",
|
||||
})
|
||||
})
|
||||
$("#layerDrawerBottom").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
offset: "b",
|
||||
content: "bottom内容",
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawer").click(function () {
|
||||
var index = drawer.open({
|
||||
legacy: false,
|
||||
title: ['标题', 'font-size:16px;color:#2d8cf0'],
|
||||
maxmin: true,
|
||||
offset: "r",
|
||||
area: "30%",
|
||||
content: "抽屉内容",
|
||||
btn:"关闭",
|
||||
yes:function(index,layero){
|
||||
drawer.close(index);
|
||||
console.log(index,layero);
|
||||
},
|
||||
btnAlign: "l",
|
||||
closeBtn: 1,
|
||||
})
|
||||
})
|
||||
|
||||
$("#layerDrawerParent").click(function () {
|
||||
var index = parent.layui.drawer.open({
|
||||
legacy: false,
|
||||
title: ['标题', 'font-size:16px;color:#2d8cf0'],
|
||||
maxmin: true,
|
||||
offset: "r",
|
||||
area: "30%",
|
||||
content: "抽屉内容",
|
||||
btn: "关闭",
|
||||
yes: function (index, layero) {
|
||||
parent.layui.drawer.close(index);
|
||||
console.log(index, layero);
|
||||
},
|
||||
btnAlign: "l",
|
||||
closeBtn: 1,
|
||||
})
|
||||
})
|
||||
|
||||
$("#layertargetDemo").click(function () {
|
||||
drawer.open({
|
||||
legacy: false,
|
||||
target: "#layertargetEl",
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "50%",
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-right").click(function() {
|
||||
drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "30%"
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-left").click(function() {
|
||||
|
||||
drawer.open({
|
||||
direction: "left",
|
||||
dom: ".layer-left",
|
||||
distance: "30%"
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
$(".drawer-top").click(function() {
|
||||
drawer.open({
|
||||
direction: "top",
|
||||
dom: ".layer-top",
|
||||
distance: "30%"
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-bottom").click(function() {
|
||||
drawer.open({
|
||||
direction: "bottom",
|
||||
dom: ".layer-bottom",
|
||||
distance: "30%"
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-open-mask").click(function() {
|
||||
drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-open-mask",
|
||||
distance: "30%",
|
||||
maskClose: true
|
||||
});
|
||||
})
|
||||
|
||||
var dom;
|
||||
|
||||
$(".drawer-close-mask").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-close-mask",
|
||||
distance: "30%",
|
||||
maskClose: false
|
||||
});
|
||||
})
|
||||
|
||||
$("#btnClose").click(function() {
|
||||
dom.close();
|
||||
})
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
maskClose: false,
|
||||
time: 1000
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-call-back").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "30%",
|
||||
success: function() {
|
||||
layer.msg("触发回调函数", {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$("#targetDemo").click(function () {
|
||||
drawer.open({
|
||||
target: "#targetEl",
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "50%",
|
||||
});
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
385
public/demos/document/drawerFragment.html
Executable file
385
public/demos/document/drawerFragment.html
Executable file
@ -0,0 +1,385 @@
|
||||
<style>
|
||||
.expand.pear-btn:hover {
|
||||
color: currentColor;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.expand.pear-btn {
|
||||
border: 1px solid rgb(255 255 255 / 0%)
|
||||
}
|
||||
</style>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form id="userForm" class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="realName" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline" style="margin-left: 50px;">
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-md expand">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="user-table" lay-filter="user-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="user-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-bar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i></button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
|
||||
class="layui-icon layui-icon-delete"></i></button>
|
||||
<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-enable">
|
||||
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
|
||||
checked="{{ d.enable == 0 ? 'true' : 'false' }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-sex">
|
||||
{{#if (d.sex == 1) { }}
|
||||
<span>男</span>
|
||||
{{# }else if(d.sex == 2){ }}
|
||||
<span>女</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-login">
|
||||
{{#if (d.login == 0) { }}
|
||||
<span>在线</span>
|
||||
{{# }else if(d.sex == 1){ }}
|
||||
<span>离线</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-createTime">
|
||||
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
|
||||
</script>
|
||||
<script>
|
||||
layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function () {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let drawer = layui.drawer;
|
||||
let dropdown = layui.dropdown;
|
||||
|
||||
let MODULE_PATH = "/system/user/";
|
||||
|
||||
formToggle({
|
||||
elem: "#userForm",
|
||||
});
|
||||
|
||||
function formToggle(options) {
|
||||
var defaultsOpt = {
|
||||
isExpand: false,
|
||||
prefixIcon: "layui-icon",
|
||||
toggleIcon: ['layui-icon-down', 'layui-icon-up'],
|
||||
toggleText: ['展开', '折叠'],
|
||||
}
|
||||
var opt = $.extend({}, defaultsOpt, options);
|
||||
var elem = opt.elem; // 绑定的表单元素,必填
|
||||
var min = opt.min; // 最小显示数,默认显示一行
|
||||
var isExpand = opt.isExpand; // 初始展开
|
||||
var prefixIcon = opt.prefixIcon + " "; // 图标前缀
|
||||
var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
|
||||
var toggleText = opt.toggleText; // 折叠和展开时的文本
|
||||
|
||||
var eleDOM = $(elem + " .layui-inline");
|
||||
var firstElTop = eleDOM.first().offset().top;
|
||||
var targetEl = eleDOM.filter(function (index) {
|
||||
var isGtMin = (index + 1) > min;
|
||||
var isGtFirstElTop = $(this).offset().top > firstElTop;
|
||||
var isNeqLast = (index + 1) != eleDOM.length;
|
||||
return min
|
||||
? isGtMin && isNeqLast
|
||||
: isGtFirstElTop && isNeqLast;
|
||||
});
|
||||
|
||||
var unExpandIcon = prefixIcon + toggleIcon[0];
|
||||
var expandIcon = prefixIcon + toggleIcon[1];
|
||||
var unExpandText = toggleText[0];
|
||||
var expandText = toggleText[1];
|
||||
var btnSelector = elem + " .expand";
|
||||
$(btnSelector).append("<i></i>")
|
||||
if (isExpand) {
|
||||
$(btnSelector).prepend("<span>" + expandText + "</span>");
|
||||
$(btnSelector + ">i").addClass(expandIcon);
|
||||
} else {
|
||||
$(btnSelector).prepend("<span>" + unExpandText + "</span>")
|
||||
$(btnSelector + ">i").addClass(unExpandIcon)
|
||||
targetEl.addClass("layui-hide");
|
||||
}
|
||||
$(btnSelector).click(function () {
|
||||
isExpand = !isExpand;
|
||||
if (isExpand) {
|
||||
$(btnSelector + ">span").html(expandText);
|
||||
$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
|
||||
targetEl.removeClass("layui-hide")
|
||||
} else {
|
||||
$(btnSelector + ">span").html(unExpandText);
|
||||
$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
|
||||
targetEl.addClass("layui-hide")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let cols = [
|
||||
[{
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
field: 'username',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
field: 'realName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
field: 'sex',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
templet: '#user-sex'
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
field: 'phone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '启用',
|
||||
field: 'enable',
|
||||
align: 'center',
|
||||
templet: '#user-enable'
|
||||
},
|
||||
{
|
||||
title: '登录',
|
||||
field: 'login',
|
||||
align: 'center',
|
||||
templet: '#user-login'
|
||||
},
|
||||
{
|
||||
title: '注册',
|
||||
field: 'createTime',
|
||||
align: 'center',
|
||||
templet: '#user-createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
toolbar: '#user-bar',
|
||||
align: 'left',
|
||||
width: 160,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
table.render({
|
||||
elem: '#user-table',
|
||||
url: '../../demos/data/table.json',
|
||||
page: true,
|
||||
cols: cols,
|
||||
skin: 'line',
|
||||
toolbar: '#user-toolbar',
|
||||
defaultToolbar: [{
|
||||
layEvent: 'refresh',
|
||||
icon: 'layui-icon-refresh',
|
||||
}, 'filter', 'print', 'exports'],
|
||||
done: function (res, curr, count) {
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
dropdown.render({
|
||||
elem: '#more_' + res.data[i].userId,
|
||||
data: [{
|
||||
title: 'menu item11',
|
||||
id: 100
|
||||
}, {
|
||||
title: 'menu item22',
|
||||
id: 101
|
||||
}, {
|
||||
title: 'menu item33',
|
||||
id: 102
|
||||
}],
|
||||
id: '#more_' + res.data[i].userId,
|
||||
click: function (obj) {
|
||||
layer.tips('点击了：' + obj.title, this.elem, {
|
||||
tips: [1, '#5FB878']
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
table.on('tool(user-table)', function (obj) {
|
||||
if (obj.event === 'remove') {
|
||||
window.remove(obj);
|
||||
} else if (obj.event === 'edit') {
|
||||
window.edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
table.on('toolbar(user-table)', function (obj) {
|
||||
if (obj.event === 'add') {
|
||||
window.add();
|
||||
} else if (obj.event === 'refresh') {
|
||||
window.refresh();
|
||||
} else if (obj.event === 'batchRemove') {
|
||||
window.batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
form.on('submit(user-query)', function (data) {
|
||||
table.reload('user-table', {
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('switch(user-enable)', function (obj) {
|
||||
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
|
||||
});
|
||||
|
||||
window.add = function () {
|
||||
layer.msg("添加")
|
||||
}
|
||||
|
||||
window.edit = function (obj) {
|
||||
layer.msg("修改");
|
||||
}
|
||||
|
||||
window.remove = function (obj) {
|
||||
layer.confirm('确定要删除该用户', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, function (index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: MODULE_PATH + "remove/" + obj.data['userId'],
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function (result) {
|
||||
layer.close(loading);
|
||||
if (result.success) {
|
||||
layer.msg(result.msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, function () {
|
||||
obj.del();
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg, {
|
||||
icon: 2,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.batchRemove = function (obj) {
|
||||
let data = table.checkStatus(obj.config.id).data;
|
||||
if (data.length === 0) {
|
||||
layer.msg("未选中数据", {
|
||||
icon: 3,
|
||||
time: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let ids = "";
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids += data[i].userId + ",";
|
||||
}
|
||||
ids = ids.substr(0, ids.length - 1);
|
||||
layer.confirm('确定要删除这些用户', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, function (index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: MODULE_PATH + "batchRemove/" + ids,
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function (result) {
|
||||
layer.close(loading);
|
||||
if (result.success) {
|
||||
layer.msg(result.msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, function () {
|
||||
table.reload('user-table');
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg, {
|
||||
icon: 2,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.refresh = function (param) {
|
||||
table.reload('user-table');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
165
public/demos/document/dtree.html
Executable file
165
public/demos/document/dtree.html
Executable file
@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>树形结构</title>
|
||||
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
|
||||
</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">Dtree 提供 树状态 的数据结构展示</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 href="component/pear/css/pear.css" rel="stylesheet" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
嵌套数据格式
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<ul id="demoTree" class="dtree" data-id="0"></ul>
|
||||
</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">
|
||||
layui.use(['dtree'], function () {
|
||||
dtree = layui.dtree;
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "admin/data/dtree.json"
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
嵌套数据格式
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<ul id="demoTree3" class="dtree" data-id="0"></ul>
|
||||
</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">
|
||||
layui.use(['dtree'], function () {
|
||||
dtree = layui.dtree;
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "admin/data/dtree.json",
|
||||
dataFormat: "list",
|
||||
checkbar: true
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
下拉树
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<ul id="demoTree2" class="dtree" data-id="0"></ul>
|
||||
</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">
|
||||
layui.use(['dtree'], function () {
|
||||
dtree = layui.dtree;
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree2",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "admin/data/dtree.json",
|
||||
select: true
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['dtree', 'jquery','element','code'], function () {
|
||||
var $ = layui.jquery,
|
||||
dtree = layui.dtree;
|
||||
|
||||
layui.code();
|
||||
|
||||
// 初始化树
|
||||
dtree.render({
|
||||
elem: "#demoTree",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "../../demos/data/dtree.json"
|
||||
});
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree3",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "../../demos/data/dataTree2.json",
|
||||
dataFormat: "list", //配置data的风格为list
|
||||
checkbar: true //开启复选框
|
||||
});
|
||||
|
||||
dtree.render({
|
||||
elem: "#demoTree2",
|
||||
initLevel: "1",
|
||||
method: 'get',
|
||||
url: "../../demos/data/dtree.json",
|
||||
select: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
160
public/demos/document/encrypt.html
Executable file
160
public/demos/document/encrypt.html
Executable file
@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>哈希加密</title>
|
||||
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
|
||||
</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">
|
||||
Pear encrypt 为前端开发 提供 加密服务
|
||||
</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">
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">加密操作</div>
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" action="javascript:void(0);">
|
||||
<div class="layui-form-item layui-input-inline">
|
||||
<input id="enter" value="123456" type="text" class="layui-input" />
|
||||
</div>
|
||||
<div class="layui-form-item layui-input-inline">
|
||||
<select name="encode" lay-verify="">
|
||||
<option value="">加密方式</option>
|
||||
<option value="1">MD5</option>
|
||||
<option value="2">SHA1</option>
|
||||
<option value="3">SHA256</option>
|
||||
<option value="4">SHA512</option>
|
||||
<option value="5">rmd160</option>
|
||||
<option value="6">crc32</option>
|
||||
<option value="7">Base64Encode</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-form-item layui-input-inline">
|
||||
<button id="encode" class="pear-btn pear-btn-primary">Encode</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">加密结果</div>
|
||||
<div class="layui-card-body" id="end">
|
||||
|
||||
</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">
|
||||
layui.use(['encrypt'], function() {
|
||||
var encrypt = layui.encrypt;
|
||||
|
||||
encrypt.md5( str );
|
||||
|
||||
encrypt.sha1( str );
|
||||
|
||||
encrypt.sha256( str );
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">API 文档</div>
|
||||
<div class="layui-card-body" id="end">
|
||||
<div>
|
||||
<span>encrypt.md5( str ) -- MD5加密</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>encrypt.sha1( str ) -- SHA1加密</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>encrypt.sha256( str ) -- SHA256加密</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>encrypt.sha512( str ) -- SHA512加密</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>encrypt.rmd160( str ) -- RMD160加密</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>encrypt.crc32( str ) -- CRC32加密</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>encrypt.Base64Encode( str ) -- BASE64加密</span>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['encrypt', 'form', 'jquery','layer','element','code'], function() {
|
||||
var encrypt = layui.encrypt;
|
||||
var form = layui.form;
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var element = layui.element;
|
||||
|
||||
layui.code();
|
||||
|
||||
$("#encode").click(function() {
|
||||
var encode = $("[name='encode']").val();
|
||||
var end;
|
||||
if (encode == 1) {
|
||||
end = encrypt.md5($("#enter").val());
|
||||
} else if (encode == 2) {
|
||||
end = encrypt.sha1($("#enter").val());
|
||||
} else if (encode == 3) {
|
||||
end = encrypt.sha256($("#enter").val());
|
||||
} else if (encode == 4) {
|
||||
end = encrypt.sha512($("#enter").val());
|
||||
} else if (encode == 5) {
|
||||
end = encrypt.rmd160($("#enter").val());
|
||||
} else if (encode == 6) {
|
||||
end = encrypt.crc32($("#enter").val());
|
||||
} else if (encode == 7) {
|
||||
end = encrypt.Base64Encode($("#enter").val());
|
||||
} else{
|
||||
layer.msg("请选择加密方式",{icon:3,time:1000});
|
||||
}
|
||||
|
||||
$("#end").append('<button class="pear-btn">加密方式 : ' + $("[value=" + $("[name='encode']")
|
||||
.val() + "]").text() + ' 明文 : ' + $("#enter").val() +
|
||||
' 加密结果 : ' + end + '</button><br><br>');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
180
public/demos/document/form.html
Executable file
180
public/demos/document/form.html
Executable file
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>表单页面</title>
|
||||
<link href="../../component/pear/css/pear.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开发环境</div>
|
||||
<div class="layui-card-body">
|
||||
Pear 基于 Form 的基础上扩展样式
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
或
|
||||
<link rel="stylesheet" href="component/pear/css/pear-module/form.css" />
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card" style="margin-top: 10px;">
|
||||
<div class="layui-card-header">输入框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="text" name="title" hover placeholder="用户名" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="password" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">下拉选择框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md6">
|
||||
<select name="city" lay-verify="">
|
||||
<option value="">请选择一个城市</option>
|
||||
<option value="010">北京</option>
|
||||
<option value="021">上海</option>
|
||||
<option value="0571">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select name="city" lay-verify="">
|
||||
<option value="010">北京</option>
|
||||
<option value="021" disabled>上海（禁用效果）</option>
|
||||
<option value="0571" selected>杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select name="quiz">
|
||||
<option value="">请选择</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="你工作的第一个城市">你工作的第一个城市？</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<option value="你的工号">你的工号？</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师？</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select name="city" lay-verify="required" lay-search>
|
||||
<option value="">带搜索的选择框</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2">form</option>
|
||||
<option value="3">layim</option>
|
||||
<option value="4">element</option>
|
||||
<option value="5">laytpl</option>
|
||||
<option value="6">upload</option>
|
||||
<option value="7">laydate</option>
|
||||
<option value="8">laypage</option>
|
||||
<option value="9">flow</option>
|
||||
<option value="10">util</option>
|
||||
<option value="11">code</option>
|
||||
<option value="12">tree</option>
|
||||
<option value="13">layedit</option>
|
||||
<option value="14">nav</option>
|
||||
<option value="15">tab</option>
|
||||
<option value="16">table</option>
|
||||
<option value="17">select</option>
|
||||
<option value="18">checkbox</option>
|
||||
<option value="19">switch</option>
|
||||
<option value="20">radio</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<select name="city" lay-verify="">
|
||||
<option value="">请选择一个城市</option>
|
||||
<option value="010">北京</option>
|
||||
<option value="021">上海</option>
|
||||
<option value="0571">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">复选框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
|
||||
<input type="checkbox" name="" title="发呆" lay-skin="primary">
|
||||
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
|
||||
<input type="checkbox" name="" lay-skin="primary">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">扩展样式</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="text" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">文本域</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">开关</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="checkbox" name="xxx" lay-skin="switch">
|
||||
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
|
||||
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
|
||||
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">单选框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="radio" name="sex" value="nan" title="男">
|
||||
<input type="radio" name="sex" value="nv" title="女" checked>
|
||||
<input type="radio" name="sex" value="" title="中性" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['form','element','code'], function() {
|
||||
var form = layui.form;
|
||||
var element = layui.element;
|
||||
|
||||
layui.code();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
126
public/demos/document/fullscreen.html
Executable file
126
public/demos/document/fullscreen.html
Executable file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>全屏组件</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10" id="homeid">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开发环境</div>
|
||||
<div class="layui-card-body">
|
||||
fullscreen 用于控制页面或元素全屏
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">全屏控制</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="fullstart pear-btn pear-btn-primary">全屏</button>
|
||||
<button class="fullclose pear-btn pear-btn-danger">退出全屏</button>
|
||||
<button class="fulltarg pear-btn pear-btn-warming">指定目标全屏</button>
|
||||
</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">
|
||||
layui.use(['fullscreen'], function() {
|
||||
var fullscreen = layui.fullscreen;
|
||||
fullscreen.fullScreen();
|
||||
fullscreen.fullClose();
|
||||
fullscreen.fullScreen("#fulltarget");
|
||||
fullscreen.isFullscreen();
|
||||
|
||||
})
|
||||
</pre>
|
||||
</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 id="fulltarget"
|
||||
style="width: 600px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid gainsboro;
|
||||
background-color: #EEE;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center">
|
||||
<button class="fullclose pear-btn pear-btn-danger">退出全屏</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use([ 'jquery', 'code','admin','fullscreen'], function() {
|
||||
var popup = layui.popup;
|
||||
var $ = layui.jquery;
|
||||
var admin = layui.admin;
|
||||
var fullscreen=layui.fullscreen;
|
||||
layui.code();
|
||||
fullscreen.onFullchange(function(){
|
||||
//增加全屏状态回调，可针对不同浏览器做后续处理
|
||||
console.log("当前全屏状态:",fullscreen.isFullscreen());
|
||||
var document = fullscreen.isFullscreen();
|
||||
if(document){
|
||||
$("#fulltarget").addClass('pear-full-screen');
|
||||
}else{
|
||||
$("#fulltarget").removeClass('pear-full-screen');
|
||||
}
|
||||
});
|
||||
$(".fullstart").click(function() {
|
||||
fullscreen.fullScreen().then(function ok(res){
|
||||
console.log(res);
|
||||
}
|
||||
);
|
||||
})
|
||||
|
||||
$(".fullclose").click(function() {
|
||||
fullscreen.fullClose();
|
||||
})
|
||||
|
||||
$(".fulltarg").click(function() {
|
||||
fullscreen.fullScreen("#fulltarget");
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
2195
public/demos/document/icon.html
Executable file
2195
public/demos/document/icon.html
Executable file
File diff suppressed because it is too large
Load Diff
244
public/demos/document/iconPicker.html
Executable file
244
public/demos/document/iconPicker.html
Executable file
@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<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">
|
||||
IconPicker 提供图标选择功能
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
默认图标
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="iconPicker" value="layui-icon-face-smile" lay-filter="iconPicker" class="hide">
|
||||
</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">
|
||||
layui.use(['iconPicker'], function() {
|
||||
var iconPicker = layui.iconPicker;
|
||||
|
||||
iconPicker.render({
|
||||
elem: '#iconPicker',
|
||||
type: 'fontClass',
|
||||
search: true,
|
||||
page: true,
|
||||
limit: 16,
|
||||
click: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
success: function(d) {
|
||||
console.log(d);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
</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-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2">
|
||||
</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">
|
||||
layui.use(['iconPicker'], function() {
|
||||
var iconPicker = layui.iconPicker;
|
||||
|
||||
iconPicker.render({
|
||||
elem: '#iconPicker2',
|
||||
type: 'fontClass',
|
||||
search: true,
|
||||
page: true,
|
||||
limit: 16,
|
||||
click: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
success: function(d) {
|
||||
console.log(d);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
</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-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="iconPicker3" value="layui-icon-face-smile-fine" lay-filter="iconPicker3">
|
||||
</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">
|
||||
layui.use(['iconPicker'], function() {
|
||||
var iconPicker = layui.iconPicker;
|
||||
|
||||
iconPicker.render({
|
||||
elem: '#iconPicker',
|
||||
type: 'fontClass',
|
||||
search: true,
|
||||
page: false,
|
||||
limit: 16,
|
||||
click: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
success: function(d) {
|
||||
console.log(d);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['iconPicker', 'form', 'layer', 'code','element'], function() {
|
||||
var iconPicker = layui.iconPicker,
|
||||
form = layui.form,
|
||||
layer = layui.layer,
|
||||
$ = layui.$;
|
||||
|
||||
layui.code();
|
||||
|
||||
iconPicker.render({
|
||||
// 选择器，推荐使用input
|
||||
elem: '#iconPicker',
|
||||
// 数据类型：fontClass/unicode，推荐使用fontClass
|
||||
type: 'fontClass',
|
||||
// 是否开启搜索：true/false，默认true
|
||||
search: true,
|
||||
// 是否开启分页：true/false，默认true
|
||||
page: true,
|
||||
// 每页显示数量，默认12
|
||||
limit: 16,
|
||||
// 点击回调
|
||||
click: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
// 渲染成功后的回调
|
||||
success: function(d) {
|
||||
console.log(d);
|
||||
}
|
||||
});
|
||||
|
||||
iconPicker.render({
|
||||
// 选择器，推荐使用input
|
||||
elem: '#iconPicker2',
|
||||
// 数据类型：fontClass/unicode，推荐使用fontClass
|
||||
type: 'fontClass',
|
||||
// 是否开启搜索：true/false
|
||||
search: true,
|
||||
// 是否开启分页
|
||||
page: true,
|
||||
// 每页显示数量，默认12
|
||||
limit: 16,
|
||||
// 点击回调
|
||||
click: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
// 渲染成功后的回调
|
||||
success: function(d) {
|
||||
console.log(d);
|
||||
}
|
||||
});
|
||||
|
||||
iconPicker.render({
|
||||
// 选择器，推荐使用input
|
||||
elem: '#iconPicker3',
|
||||
// 数据类型：fontClass/unicode，推荐使用fontClass
|
||||
type: 'fontClass',
|
||||
// 是否开启搜索：true/false
|
||||
search: true,
|
||||
// 是否开启分页
|
||||
page: false,
|
||||
// 每页显示数量，默认12
|
||||
limit: 16,
|
||||
// 点击回调
|
||||
click: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
// 渲染成功后的回调
|
||||
success: function(d) {
|
||||
console.log(d);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
174
public/demos/document/loading.html
Executable file
174
public/demos/document/loading.html
Executable file
@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>加载组件</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
<style>
|
||||
.load-div {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-color: lightgray;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">加载组件</div>
|
||||
<div class="layui-card-body">
|
||||
<div>
|
||||
<span>loading.Load(1,message);</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>loading.Load(2,message);</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>loading.Load(3,message);</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>loading.Load(4,message);</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>loading.Load(5,message);</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>loading.remove(time);</span>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<button class="loading-1 pear-btn pear-btn-primary" plain>加载</button>
|
||||
<button class="loading-2 pear-btn pear-btn-success" plain>加载</button>
|
||||
<button class="loading-3 pear-btn pear-btn-danger" plain>加载</button>
|
||||
<button class="loading-4 pear-btn pear-btn-warming" plain>加载</button>
|
||||
<button class="loading-5 pear-btn">加载</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">加载组件</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="block-5 pear-btn">加载</button>
|
||||
|
||||
<button class="block-4 pear-btn">加载</button>
|
||||
|
||||
<button class="block-3 pear-btn">加载</button>
|
||||
|
||||
<button class="block-2 pear-btn">加载</button>
|
||||
<button class="block-1 pear-btn">加载</button>
|
||||
<div class="load-div load-div-1"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer-right">
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'jquery', 'loading', 'code'], function() {
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var loading = layui.loading;
|
||||
|
||||
var msg =
|
||||
'"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'
|
||||
|
||||
|
||||
|
||||
$(".loading-1").click(function() {
|
||||
|
||||
loading.Load(1, "");
|
||||
|
||||
loading.loadRemove(1000);
|
||||
})
|
||||
|
||||
$(".loading-2").click(function() {
|
||||
|
||||
loading.Load(2, "");
|
||||
|
||||
loading.loadRemove(1000);
|
||||
})
|
||||
|
||||
$(".loading-3").click(function() {
|
||||
|
||||
loading.Load(3, "");
|
||||
|
||||
loading.loadRemove(1000);
|
||||
})
|
||||
|
||||
$(".loading-4").click(function() {
|
||||
|
||||
loading.Load(4, "");
|
||||
|
||||
loading.loadRemove(1000);
|
||||
})
|
||||
|
||||
$(".loading-5").click(function() {
|
||||
|
||||
loading.Load(5, "");
|
||||
|
||||
loading.loadRemove(1000);
|
||||
})
|
||||
|
||||
$(".block-1").click(function() {
|
||||
|
||||
loading.block({
|
||||
type: 1,
|
||||
elem: '.load-div-1',
|
||||
msg: '加载中'
|
||||
})
|
||||
loading.blockRemove(".load-div-1", 1000);
|
||||
})
|
||||
|
||||
$(".block-2").click(function() {
|
||||
loading.block({
|
||||
type: 2,
|
||||
elem: '.load-div-1',
|
||||
msg: ''
|
||||
})
|
||||
loading.blockRemove(".load-div-1", 1000);
|
||||
})
|
||||
|
||||
$(".block-3").click(function() {
|
||||
loading.block({
|
||||
type: 3,
|
||||
elem: '.load-div-1',
|
||||
msg: ''
|
||||
})
|
||||
loading.blockRemove(".load-div-1", 1000);
|
||||
})
|
||||
|
||||
$(".block-4").click(function() {
|
||||
loading.block({
|
||||
type: 4,
|
||||
elem: '.load-div-1',
|
||||
msg: ''
|
||||
})
|
||||
loading.blockRemove(".load-div-1", 1000);
|
||||
})
|
||||
|
||||
$(".block-5").click(function() {
|
||||
loading.block({
|
||||
type: 5,
|
||||
elem: '.load-div-1',
|
||||
msg: ''
|
||||
})
|
||||
loading.blockRemove(".load-div-1", 1000);
|
||||
})
|
||||
|
||||
$(".block-6").click(function() {
|
||||
loading.block({
|
||||
type: 6,
|
||||
elem: '.load-div-1',
|
||||
msg: ''
|
||||
})
|
||||
loading.blockRemove(".load-div-1", 1000);
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
115
public/demos/document/menu.html
Executable file
115
public/demos/document/menu.html
Executable file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数据菜单</title>
|
||||
<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">
|
||||
Menu 数据菜单对普通菜单的深度封装
|
||||
</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 class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">实例</div>
|
||||
<div class="layui-card-body">
|
||||
<button id="collapse" class="pear-btn">隐藏</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="sideMenu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
|
||||
var sideMenu = menu.render({
|
||||
elem: 'sideMenu',
|
||||
async: true,
|
||||
theme: "light-theme",
|
||||
height: '300px',
|
||||
control: false,
|
||||
defaultMenu: 0,
|
||||
accordion: true,
|
||||
url: "../../demos/data/menu.json",
|
||||
parseData: false,
|
||||
done: function() {
|
||||
layer.msg("加载完成")
|
||||
}
|
||||
});
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
|
||||
layer.msg("菜单点击 : " + JSON.stringify(data));
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form',
|
||||
'element', 'menu', 'code','jquery'
|
||||
], function() {
|
||||
var layer = layui.layer,
|
||||
menu = layui.menu,
|
||||
$ = layui.jquery,
|
||||
form = layui.form;
|
||||
|
||||
layui.code();
|
||||
|
||||
var sideMenu = menu.render({
|
||||
elem: 'sideMenu',
|
||||
async: true,
|
||||
theme: "light-theme",
|
||||
height: '300px',
|
||||
control: false,
|
||||
defaultMenu: 0,
|
||||
accordion: true,
|
||||
url: "../../demos/data/dataMenu.json",
|
||||
parseData: false,
|
||||
done: function() {
|
||||
layer.msg("加载完成")
|
||||
}
|
||||
});
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
layer.msg("菜单点击 : " + JSON.stringify(data));
|
||||
})
|
||||
|
||||
$("#collapse").click(function(){
|
||||
sideMenu.collapse();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
148
public/demos/document/notice.html
Executable file
148
public/demos/document/notice.html
Executable file
@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>通知组件</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<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">
|
||||
Notice 用于 消息通知 场景
|
||||
</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" />
|
||||
或
|
||||
<link rel="stylesheet" href="component/pear/css/pear-module/notice.css" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</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>
|
||||
<span>notice.success("成功消息")</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>notice.error("危险消息")</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>notice.warning("警告消息")</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>notice.info("通用消息")</span>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<button class="notice-info pear-btn pear-btn-primary">通用消息</button>
|
||||
<button class="notice-success pear-btn pear-btn-success">成功消息</button>
|
||||
<button class="notice-failure pear-btn pear-btn-danger">错误消息</button>
|
||||
<button class="notice-warning pear-btn pear-btn-warming">警告消息</button>
|
||||
</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">
|
||||
layui.use(['notice', 'jquery', 'layer', 'code'], function() {
|
||||
var notice = layui.notice;
|
||||
|
||||
notice.success("成功消息")
|
||||
notice.error("危险消息")
|
||||
notice.warning("警告消息")
|
||||
notice.info("通用消息")
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
消息移除
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn" id="closeAll">移除全部</button>
|
||||
</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">
|
||||
layui.use(['notice', 'jquery', 'layer', 'code'], function() {
|
||||
var notice = layui.notice;
|
||||
|
||||
notice.clear();
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['notice', 'jquery', 'layer', 'code', 'element'], function() {
|
||||
var notice = layui.notice;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.jquery;
|
||||
|
||||
layui.code();
|
||||
|
||||
notice.warning("成功消息");
|
||||
notice.info("提示消息");
|
||||
notice.error("错误消息");
|
||||
notice.success("成功消息");
|
||||
|
||||
$(".notice-success").click(function() {
|
||||
notice.success("成功消息")
|
||||
})
|
||||
$(".notice-failure").click(function() {
|
||||
notice.error("危险消息")
|
||||
})
|
||||
$(".notice-warning").click(function() {
|
||||
notice.warning("警告消息")
|
||||
})
|
||||
|
||||
$(".notice-info").click(function() {
|
||||
notice.info("通用消息")
|
||||
})
|
||||
|
||||
$("#closeAll").click(function() {
|
||||
notice.clear();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
227
public/demos/document/popover.html
Executable file
227
public/demos/document/popover.html
Executable file
@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>汽泡组件</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<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">
|
||||
popover 用于 汽泡显示 场景
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">汽泡控制</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="popover-show pear-btn pear-btn-primary">显示</button>
|
||||
<button class="popover-hide pear-btn pear-btn-success">隐藏</button>
|
||||
</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">
|
||||
layui.use(['popover', 'jquery', 'layer', 'code'], function() {
|
||||
var popover = layui.popover;
|
||||
popover.show('#el1');
|
||||
popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
|
||||
|
||||
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
不同方式
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="toast-top-left-btn pear-btn" id="el1">手动</button>
|
||||
<button class="toast-top-center-btn pear-btn" id="el2">回调</button>
|
||||
<button class="toast-top-center-btn pear-btn" id="el3">iframe</button>
|
||||
</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">
|
||||
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
|
||||
var popover = layui.popover;
|
||||
popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',placement:'auto',
|
||||
animation:'pop',
|
||||
closeable:true,
|
||||
delay: {
|
||||
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
|
||||
show: null,
|
||||
hide: 100
|
||||
},
|
||||
opacity:0.98,
|
||||
type:'html',//content type, values:'html','iframe','async'
|
||||
});
|
||||
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
隐藏
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn" id="closeAll">隐藏全部</button>
|
||||
</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">
|
||||
layui.use(['popover', 'jquery', 'layer', 'code'], function() {
|
||||
var popover = layui.popover;
|
||||
popover.hideAll();
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['popover', 'jquery', 'layer', 'code', 'element'], function() {
|
||||
var layer = layui.layer;
|
||||
var $ = layui.jquery;
|
||||
var popover = layui.popover;
|
||||
var element = layui.element;
|
||||
layui.code();
|
||||
$(".popover-show").click(function(e) {
|
||||
popover.show('#el1');
|
||||
})
|
||||
$("#el1").click(function(e) {
|
||||
popover.show('#el1');
|
||||
})
|
||||
|
||||
$(".popover-hide").click(function(e){
|
||||
popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
|
||||
})
|
||||
$("#closeAll").click(function(e){
|
||||
popover.hideAll();
|
||||
});
|
||||
|
||||
//html 事件 手动
|
||||
//用法参照 https://github.com/sandywalker/webui-popover
|
||||
//增加功能 opacity [0,1] 可指定 popover 透明度
|
||||
popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',
|
||||
animation:'pop',
|
||||
closeable:true,
|
||||
placement:'auto',
|
||||
delay: {
|
||||
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
|
||||
show: null,
|
||||
hide: 100
|
||||
},
|
||||
opacity:0.98,
|
||||
type:'html',//content type, values:'html','iframe','async'
|
||||
})
|
||||
|
||||
//html 事件 hover
|
||||
popover.create('#el2',{title:' hello popover-hover',content:'<div class="layui-tab layui-tab-brief" lay-filter="test">\n' +
|
||||
' <ul class="layui-tab-title">\n' +
|
||||
' <li class="layui-this" lay-id="11">网站设置</li>\n' +
|
||||
' <li lay-id="22">用户管理</li>\n' +
|
||||
' <li lay-id="33">权限分配</li>\n' +
|
||||
' <li lay-id="44">商品管理</li>\n' +
|
||||
' <li lay-id="55">订单管理</li>\n' +
|
||||
' </ul>\n' +
|
||||
' <div class="layui-tab-content" style="height: 100px;">\n' +
|
||||
' <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以获得 tab 事件</div>\n' +
|
||||
' <div class="layui-tab-item">内容2</div>\n' +
|
||||
' <div class="layui-tab-item">内容3</div>\n' +
|
||||
' <div class="layui-tab-item">内容4</div>\n' +
|
||||
' <div class="layui-tab-item">内容5</div>\n' +
|
||||
' </div>\n' +
|
||||
'</div> ',trigger:'hover',
|
||||
animation:'pop',
|
||||
delay: {
|
||||
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
|
||||
show: null,
|
||||
hide: 100
|
||||
},
|
||||
placement:'top-right',
|
||||
opacity:0.98,
|
||||
onShow: function($element) {
|
||||
//console.log("onShow",$element);
|
||||
element.on('tab(test)', function(elem){
|
||||
location.hash = 'test='+ $(this).attr('lay-id');
|
||||
console.log(location.hash);
|
||||
})
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
popover.create('#el3',{title:' hello popover-iframe',trigger:'hover',
|
||||
animation:'pop',
|
||||
closeable:true,
|
||||
placement:'auto',
|
||||
delay: {
|
||||
//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
|
||||
show: null,
|
||||
hide: 100
|
||||
},
|
||||
opacity:0.98,
|
||||
type:'iframe',//content type, values:'html','iframe','async'
|
||||
url:'http://cn.bing.com/',
|
||||
width:500,
|
||||
height:400
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
127
public/demos/document/popup.html
Executable file
127
public/demos/document/popup.html
Executable file
@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>封装弹窗</title>
|
||||
<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">
|
||||
Popup 基于 Layer 的 二次封装, 提供简洁高效的 API 调用
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">提示消息</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="success pear-btn pear-btn-primary">成功消息</button>
|
||||
<button class="failure pear-btn pear-btn-danger">失败消息</button>
|
||||
<button class="warming pear-btn pear-btn-warming">警告消息</button>
|
||||
</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">
|
||||
layui.use(['popup'], function() {
|
||||
var popup = layui.popup;
|
||||
|
||||
popup.success("成功消息")
|
||||
popup.failure("失败消息")
|
||||
popup.warning("警告消息")
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">回调函数</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="success-callback pear-btn pear-btn-primary">成功消息</button>
|
||||
<button class="failure-callback pear-btn pear-btn-danger">失败消息</button>
|
||||
<button class="warming-callback pear-btn pear-btn-warming">警告消息</button>
|
||||
</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">
|
||||
layui.use(['popup'], function() {
|
||||
var popup = layui.popup;
|
||||
|
||||
popup.success("成功消息",callback)
|
||||
popup.failure("失败消息",callback)
|
||||
popup.warning("警告消息",callback)
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['popup', 'jquery', 'code'], function() {
|
||||
var popup = layui.popup;
|
||||
var $ = layui.jquery;
|
||||
|
||||
layui.code();
|
||||
|
||||
$(".success").click(function() {
|
||||
popup.success("成功消息")
|
||||
})
|
||||
$(".failure").click(function() {
|
||||
popup.failure("失败消息")
|
||||
})
|
||||
$(".warming").click(function() {
|
||||
popup.warning("警告消息")
|
||||
})
|
||||
$(".success-callback").click(function() {
|
||||
popup.success("成功消息", function() {
|
||||
layer.msg("回调函数")
|
||||
})
|
||||
})
|
||||
$(".failure-callback").click(function() {
|
||||
popup.failure("失败消息", function() {
|
||||
layer.msg("回调函数")
|
||||
})
|
||||
})
|
||||
$(".warming-callback").click(function() {
|
||||
popup.warning("警告消息", function() {
|
||||
layer.msg("回调函数")
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
218
public/demos/document/select.html
Executable file
218
public/demos/document/select.html
Executable file
@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>多选组件</title>
|
||||
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
|
||||
</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">
|
||||
Select 应用于 多选 场景
|
||||
</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 href="component/pear/css/pear.css" rel="stylesheet" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
默认主题
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<select name="city5" xm-select="select5" xm-select-skin="default">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</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">
|
||||
<select name="demo1" xm-selects="demo1" xm-select-skin="default">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
绿色主题
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<select name="city1" xm-select="select1">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</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">
|
||||
<select name="demo2" xm-selects="demo2">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
通用主题
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<select name="city2" xm-select="select2" xm-select-skin="normal">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</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">
|
||||
<select name="demo3" xm-selects="demo3" xm-select-skin="normal">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
警告主题
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<select name="city3" xm-select="select3" xm-select-skin="warm">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</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">
|
||||
<select name="demo4" xm-selects="demo4" xm-select-skin="warm">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
危险主题
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<select name="city4" xm-select="select4" xm-select-skin="danger">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</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">
|
||||
<select name="demo5" xm-selects="demo5" xm-select-skin="danger">
|
||||
<option value="1">北京</option>
|
||||
<option value="2" selected="selected">上海</option>
|
||||
<option value="3">广州</option>
|
||||
<option value="4" selected="selected">深圳</option>
|
||||
<option value="5">天津</option>
|
||||
</select>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['select','code','element'], function() {
|
||||
let select = layui.select;
|
||||
|
||||
layui.code();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
256
public/demos/document/step.html
Executable file
256
public/demos/document/step.html
Executable file
@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>分布表单</title>
|
||||
<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">Step 步骤表单</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body" style="padding-top: 40px;">
|
||||
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
|
||||
<div carousel-item>
|
||||
<div>
|
||||
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">游戏编号:</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款金额:</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="number" placeholder="请填写入款金额" value="" class="layui-input" lay-verify="number" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款类型:</label>
|
||||
<div class="layui-input-block">
|
||||
<select lay-verify="required">
|
||||
<option value="1" selected>保险箱</option>
|
||||
<option value="2">现金</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款方式:</label>
|
||||
<div class="layui-input-block">
|
||||
<select lay-verify="required">
|
||||
<option value="1" selected>人工入款</option>
|
||||
<option value="2">修正</option>
|
||||
<option value="3">活动</option>
|
||||
<option value="4">佣金</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">备注说明:</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="入款备注" value="" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
|
||||
 下一步 
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">游戏编号:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">639537</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">账户余额:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款金额:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">
|
||||
<span style="font-size: 18px;color: #333;">1800 元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款类型:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">保险箱</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">入款方式:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">人工入款</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">备注说明:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-form-mid layui-word-aux">备注说明</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="pear-btn pear-btn-success pre">上一步</button>
|
||||
<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
|
||||
 确认入款 
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div style="text-align: center;margin-top: 90px;">
|
||||
<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;"></i>
|
||||
<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
|
||||
入款成功
|
||||
</div>
|
||||
<div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
|
||||
</div>
|
||||
<div style="text-align: center;margin-top: 50px;">
|
||||
<button class="pear-btn pear-btn-success next">再入一笔</button>
|
||||
<button class="pear-btn pear-btn-success">查看账单</button>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
layui.use(['form', 'step','element'], function() {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
step = layui.step;
|
||||
|
||||
step.render({
|
||||
elem: '#stepForm',
|
||||
filter: 'stepForm',
|
||||
width: '100%',
|
||||
stepWidth: '600px',
|
||||
height: '500px',
|
||||
stepItems: [{
|
||||
title: '填写'
|
||||
}, {
|
||||
title: '确认'
|
||||
}, {
|
||||
title: '完成'
|
||||
}]
|
||||
});
|
||||
|
||||
form.on('submit(formStep)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('submit(formStep2)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.pre').click(function() {
|
||||
step.pre('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.next').click(function() {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'step','code','element'], function() {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
step = layui.step;
|
||||
|
||||
layui.code();
|
||||
|
||||
step.render({
|
||||
elem: '#stepForm',
|
||||
filter: 'stepForm',
|
||||
width: '100%',
|
||||
stepWidth: '600px',
|
||||
height: '500px',
|
||||
stepItems: [{
|
||||
title: '填写'
|
||||
}, {
|
||||
title: '确认'
|
||||
}, {
|
||||
title: '完成'
|
||||
}]
|
||||
});
|
||||
|
||||
form.on('submit(formStep)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('submit(formStep2)', function(data) {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.pre').click(function() {
|
||||
step.pre('#stepForm');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.next').click(function() {
|
||||
step.next('#stepForm');
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
152
public/demos/document/tab.html
Executable file
152
public/demos/document/tab.html
Executable file
@ -0,0 +1,152 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>多选项卡</title>
|
||||
<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">
|
||||
Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
常用操作
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary add">新增 Demo</button>
|
||||
<button class="pear-btn pear-btn-danger del">删除当前</button>
|
||||
<button class="pear-btn pear-btn-warming enable">高级操作</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
基本使用
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<!-- 内 容 页 面 -->
|
||||
<div id="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
|
||||
tab.render({
|
||||
elem: 'contents',
|
||||
roll: false,
|
||||
tool: false,
|
||||
width: '100%',
|
||||
height: '480px',
|
||||
index: 0,
|
||||
tabMax: 30,
|
||||
closeEvent: function(id) {
|
||||
|
||||
// do something
|
||||
},
|
||||
data: [{
|
||||
id: "1",
|
||||
title: "首页",
|
||||
url: "http://www.baidu.com",
|
||||
close: false
|
||||
},{
|
||||
id: "2",
|
||||
title: "百度一下",
|
||||
url: "http://www.baidu.com",
|
||||
close: false
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form',
|
||||
'element', 'tab', 'code','jquery'
|
||||
], function() {
|
||||
var layer = layui.layer,
|
||||
tab = layui.tab,
|
||||
$ = layui.jquery,
|
||||
form = layui.form;
|
||||
|
||||
layui.code();
|
||||
|
||||
tab.render({
|
||||
elem: 'contents',
|
||||
roll: false,
|
||||
tool: false,
|
||||
width: '100%',
|
||||
height: '485px',
|
||||
index: 0,
|
||||
session: false,
|
||||
tabMax: 30,
|
||||
closeEvent: function(id) {
|
||||
layer.msg("关闭回调")
|
||||
},
|
||||
data: [{
|
||||
id: "1",
|
||||
title: "百度一下",
|
||||
url: "../system/space.html",
|
||||
close: false
|
||||
}]
|
||||
});
|
||||
|
||||
$(".add").click(function(){
|
||||
|
||||
// ADD 添加方法
|
||||
tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
|
||||
})
|
||||
|
||||
$(".enable").click(function(){
|
||||
|
||||
// ADD 添加方法
|
||||
tab.addTabOnlyByElem('contents',{id:'tabContent',title:'高级操作',url:'tabContent.html',close: true})
|
||||
})
|
||||
|
||||
$(".del").click(function(){
|
||||
|
||||
tab.delCurrentTabByElem('contents',function(id){
|
||||
layer.msg("已删除 '"+id+"' 标签页")
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
38
public/demos/document/tabContent.html
Executable file
38
public/demos/document/tabContent.html
Executable file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>多选项卡内容</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn pear-btn-primary add">新增 Demo</button>
|
||||
<button class="pear-btn pear-btn del">关闭 当前</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['tab','jquery','layer'],function(){
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
tab = layui.tab;
|
||||
|
||||
$(".add").click(function(){
|
||||
// ADD 添加方法
|
||||
parent.layui.tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
|
||||
})
|
||||
|
||||
$(".del").click(function(){
|
||||
parent.layui.tab.delCurrentTabByElem('contents',function(id){
|
||||
layer.msg("已删除 '"+id+"' 标签页")
|
||||
});
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
412
public/demos/document/table.html
Executable file
412
public/demos/document/table.html
Executable file
@ -0,0 +1,412 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>数据表格</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
<style>
|
||||
.expand.pear-btn:hover {
|
||||
color: currentColor;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.expand.pear-btn {
|
||||
border: 1px solid rgba(255, 255, 255, 0)
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form id="userForm" class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="realName" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline" style="margin-left: 50px;">
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
<button type="button" class="pear-btn pear-btn-md expand">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="user-table" lay-filter="user-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="user-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
删除
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-bar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i></button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
|
||||
class="layui-icon layui-icon-delete"></i></button>
|
||||
<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-enable">
|
||||
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
|
||||
checked="{{ d.enable == 0 ? 'true' : 'false' }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-sex">
|
||||
{{#if (d.sex == 1) { }}
|
||||
<span>男</span>
|
||||
{{# }else if(d.sex == 2){ }}
|
||||
<span>女</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-login">
|
||||
{{#if (d.login == 0) { }}
|
||||
<span>在线</span>
|
||||
{{# }else if(d.sex == 1){ }}
|
||||
<span>离线</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="user-createTime">
|
||||
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
|
||||
</script>
|
||||
|
||||
<div style="display: none;">
|
||||
<div class="layer-top">
|
||||
<br />
|
||||
<h3>上侧弹层内容...</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function() {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let drawer = layui.drawer;
|
||||
let dropdown = layui.dropdown;
|
||||
|
||||
let MODULE_PATH = "/system/user/";
|
||||
|
||||
formToggle({
|
||||
elem: "#userForm",
|
||||
});
|
||||
|
||||
function formToggle(options) {
|
||||
var defaultsOpt = {
|
||||
isExpand: false,
|
||||
prefixIcon: "layui-icon",
|
||||
toggleIcon: ['layui-icon-down', 'layui-icon-up'],
|
||||
toggleText: ['展开', '折叠'],
|
||||
}
|
||||
var opt = $.extend({}, defaultsOpt, options);
|
||||
var elem = opt.elem; // 绑定的表单元素,必填
|
||||
var min = opt.min; // 最小显示数,默认显示一行
|
||||
var isExpand = opt.isExpand; // 初始展开
|
||||
var prefixIcon = opt.prefixIcon + " "; // 图标前缀
|
||||
var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
|
||||
var toggleText = opt.toggleText; // 折叠和展开时的文本
|
||||
|
||||
var eleDOM = $(elem + " .layui-inline");
|
||||
var firstElTop = eleDOM.first().offset().top;
|
||||
var targetEl = eleDOM.filter(function(index) {
|
||||
var isGtMin = (index + 1) > min;
|
||||
var isGtFirstElTop = $(this).offset().top > firstElTop;
|
||||
var isNeqLast = (index + 1) != eleDOM.length;
|
||||
return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast;
|
||||
});
|
||||
|
||||
var unExpandIcon = prefixIcon + toggleIcon[0];
|
||||
var expandIcon = prefixIcon + toggleIcon[1];
|
||||
var unExpandText = toggleText[0];
|
||||
var expandText = toggleText[1];
|
||||
var btnSelector = elem + " .expand";
|
||||
$(btnSelector).append("<i></i>")
|
||||
if (targetEl.length > 0) {
|
||||
if (isExpand) {
|
||||
$(btnSelector).prepend("<span>" + expandText + "</span>");
|
||||
$(btnSelector + ">i").addClass(expandIcon);
|
||||
} else {
|
||||
$(btnSelector).prepend("<span>" + unExpandText + "</span>")
|
||||
$(btnSelector + ">i").addClass(unExpandIcon)
|
||||
targetEl.addClass("layui-hide");
|
||||
}
|
||||
$(btnSelector).click(function() {
|
||||
isExpand = !isExpand;
|
||||
if (isExpand) {
|
||||
$(btnSelector + ">span").html(expandText);
|
||||
$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
|
||||
targetEl.removeClass("layui-hide")
|
||||
} else {
|
||||
$(btnSelector + ">span").html(unExpandText);
|
||||
$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
|
||||
targetEl.addClass("layui-hide")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let cols = [
|
||||
[{
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
field: 'username',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
field: 'realName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
field: 'sex',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
templet: '#user-sex'
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
field: 'phone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '启用',
|
||||
field: 'enable',
|
||||
align: 'center',
|
||||
templet: '#user-enable'
|
||||
},
|
||||
{
|
||||
title: '登录',
|
||||
field: 'login',
|
||||
align: 'center',
|
||||
templet: '#user-login'
|
||||
},
|
||||
{
|
||||
title: '注册',
|
||||
field: 'createTime',
|
||||
align: 'center',
|
||||
templet: '#user-createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
toolbar: '#user-bar',
|
||||
align: 'left',
|
||||
width: 160,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
table.render({
|
||||
elem: '#user-table',
|
||||
url: '../../demos/data/table.json',
|
||||
page: true,
|
||||
cols: cols,
|
||||
skin: 'line',
|
||||
toolbar: '#user-toolbar',
|
||||
defaultToolbar: [{
|
||||
layEvent: 'refresh',
|
||||
icon: 'layui-icon-refresh',
|
||||
}, 'filter', 'print', 'exports'],
|
||||
done: function(res, curr, count) {
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
dropdown.render({
|
||||
elem: '#more_' + res.data[i].userId,
|
||||
data: [{
|
||||
title: 'menu item11',
|
||||
id: 100
|
||||
}, {
|
||||
title: 'menu item22',
|
||||
id: 101
|
||||
}, {
|
||||
title: 'menu item33',
|
||||
id: 102
|
||||
}],
|
||||
id: '#more_' + res.data[i].userId,
|
||||
click: function(obj) {
|
||||
layer.tips('点击了：' + obj.title, this.elem, {
|
||||
tips: [1, '#5FB878']
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
table.on('tool(user-table)', function(obj) {
|
||||
if (obj.event === 'remove') {
|
||||
window.remove(obj);
|
||||
} else if (obj.event === 'edit') {
|
||||
window.edit(obj);
|
||||
}
|
||||
});
|
||||
|
||||
table.on('toolbar(user-table)', function(obj) {
|
||||
if (obj.event === 'add') {
|
||||
window.add();
|
||||
} else if (obj.event === 'refresh') {
|
||||
window.refresh();
|
||||
} else if (obj.event === 'batchRemove') {
|
||||
window.batchRemove(obj);
|
||||
}
|
||||
});
|
||||
|
||||
form.on('submit(user-query)', function(data) {
|
||||
table.reload('user-table', {
|
||||
where: data.field
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('switch(user-enable)', function(obj) {
|
||||
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
|
||||
});
|
||||
|
||||
window.add = function() {
|
||||
drawer.open({
|
||||
direction: "top",
|
||||
dom: ".layer-top",
|
||||
distance: "30%"
|
||||
});
|
||||
}
|
||||
|
||||
window.edit = function(obj) {
|
||||
layer.msg("修改");
|
||||
}
|
||||
|
||||
window.remove = function(obj) {
|
||||
layer.confirm('确定要删除该用户', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: MODULE_PATH + "remove/" + obj.data['userId'],
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function(result) {
|
||||
layer.close(loading);
|
||||
if (result.success) {
|
||||
layer.msg(result.msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, function() {
|
||||
obj.del();
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg, {
|
||||
icon: 2,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.batchRemove = function(obj) {
|
||||
let data = table.checkStatus(obj.config.id).data;
|
||||
if (data.length === 0) {
|
||||
layer.msg("未选中数据", {
|
||||
icon: 3,
|
||||
time: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let ids = "";
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids += data[i].userId + ",";
|
||||
}
|
||||
ids = ids.substr(0, ids.length - 1);
|
||||
layer.confirm('确定要删除这些用户', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: MODULE_PATH + "batchRemove/" + ids,
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function(result) {
|
||||
layer.close(loading);
|
||||
if (result.success) {
|
||||
layer.msg(result.msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, function() {
|
||||
table.reload('user-table');
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg, {
|
||||
icon: 2,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.refresh = function(param) {
|
||||
table.reload('user-table');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
265
public/demos/document/tag.html
Executable file
265
public/demos/document/tag.html
Executable file
@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>标签组件</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">
|
||||
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 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>
|
||||
<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-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>
|
||||
<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-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>
|
||||
<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 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>
|
||||
<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-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>
|
||||
</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>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['tag', 'code', 'element'], function() {
|
||||
var $ = layui.jquery,
|
||||
tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
|
||||
|
||||
layui.code();
|
||||
|
||||
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>
|
||||
93
public/demos/document/tinymce.html
Executable file
93
public/demos/document/tinymce.html
Executable file
@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>文本编辑</title>
|
||||
<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">
|
||||
Tinymce 文本编辑器
|
||||
</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 href="component/pear/css/pear.css" rel="stylesheet" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">富文本编辑器</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" id="edit" cols="30" rows="10"></textarea>
|
||||
<div class="layui-btn-group" style="margin-top: 10px">
|
||||
<button class="pear-btn pear-btn-primary" lay-event="getContent">获取内容</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">
|
||||
layui.use(['tinymce'], function() {
|
||||
var tinymce = layui.tinymce
|
||||
|
||||
var edit = tinymce.render({
|
||||
elem: "#edit",
|
||||
height: 400
|
||||
});
|
||||
|
||||
edit.getContent()
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['tinymce', 'util', 'layer','code','element'], function() {
|
||||
var tinymce = layui.tinymce
|
||||
var util = layui.util;
|
||||
|
||||
layui.code();
|
||||
|
||||
var edit = tinymce.render({
|
||||
elem: "#edit",
|
||||
height: 400
|
||||
});
|
||||
|
||||
util.event('lay-event', {
|
||||
getContent: function() {
|
||||
console.log(edit.getContent())
|
||||
layer.msg("展开控制台查看")
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
291
public/demos/document/toast.html
Executable file
291
public/demos/document/toast.html
Executable file
@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>通知组件</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<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">
|
||||
toast 用于 消息通知 场景
|
||||
</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" />
|
||||
或
|
||||
<link rel="stylesheet" href="component/pear/css/pear-module/toast.css" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</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>
|
||||
<span>toast.success({title:"成功消息",message:"消息描述"})</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>toast.error({title:"危险消息",message:"消息描述"})</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>toast.warning({title:"警告消息",message:"消息描述"})</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>toast.info({title:"通知消息",message:"消息描述"})</span>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<button class="toast-info pear-btn pear-btn-primary">通用消息</button>
|
||||
<button class="toast-success pear-btn pear-btn-success">成功消息</button>
|
||||
<button class="toast-failure pear-btn pear-btn-danger">错误消息</button>
|
||||
<button class="toast-warning pear-btn pear-btn-warming">警告消息</button>
|
||||
<button class="toast-question pear-btn">问题消息</button>
|
||||
</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">
|
||||
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
|
||||
var toast = layui.toast;
|
||||
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
|
||||
|
||||
toast.info({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
|
||||
|
||||
toast.warning({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
|
||||
|
||||
toast.error({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
|
||||
|
||||
toast.question({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
不同位置
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="toast-top-left-btn pear-btn">上左</button>
|
||||
<button class="toast-top-center-btn pear-btn">上中</button>
|
||||
<button class="toast-top-right-btn pear-btn">上右</button>
|
||||
<button class="toast-bottom-left-btn pear-btn">下左</button>
|
||||
<button class="toast-bottom-center-btn pear-btn">下中</button>
|
||||
<button class="toast-bottom-right-btn pear-btn">下右</button>
|
||||
</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">
|
||||
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
|
||||
var toast = layui.toast;
|
||||
|
||||
$(".toast-top-left-btn").click(function(){
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topLeft'});
|
||||
})
|
||||
$(".toast-top-center-btn").click(function(){
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topCenter'});
|
||||
})
|
||||
$(".toast-top-right-btn").click(function(){
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
|
||||
})
|
||||
$(".toast-bottom-left-btn").click(function(){
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomLeft'});
|
||||
})
|
||||
$(".toast-bottom-center-btn").click(function(){
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomCenter'});
|
||||
})
|
||||
$(".toast-bottom-right-btn").click(function(){
|
||||
toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomRight'});
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
消息移除
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="pear-btn" id="closeAll">移除全部</button>
|
||||
</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">
|
||||
layui.use(['toast', 'jquery', 'layer', 'code'], function() {
|
||||
var toast = layui.toast;
|
||||
|
||||
toast.destroy();
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['toast', 'toast', 'jquery', 'layer', 'code', 'element'], function() {
|
||||
var toast = layui.toast;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.jquery;
|
||||
var toast = layui.toast;
|
||||
|
||||
layui.code();
|
||||
|
||||
toast.success({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
toast.error({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
toast.warning({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
toast.question({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
|
||||
$(".toast-success").click(function() {
|
||||
toast.success({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
})
|
||||
$(".toast-failure").click(function() {
|
||||
toast.error({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
})
|
||||
$(".toast-warning").click(function() {
|
||||
toast.warning({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
})
|
||||
|
||||
$(".toast-info").click(function() {
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
})
|
||||
$(".toast-question").click(function() {
|
||||
toast.question({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
})
|
||||
|
||||
$(".toast-top-left-btn").click(function(){
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topLeft'
|
||||
});
|
||||
})
|
||||
$(".toast-top-center-btn").click(function(){
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topCenter'
|
||||
});
|
||||
})
|
||||
$(".toast-top-right-btn").click(function(){
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'topRight'
|
||||
});
|
||||
})
|
||||
|
||||
$(".toast-bottom-left-btn").click(function(){
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'bottomLeft'
|
||||
});
|
||||
})
|
||||
$(".toast-bottom-center-btn").click(function(){
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'bottomCenter'
|
||||
});
|
||||
})
|
||||
$(".toast-bottom-right-btn").click(function(){
|
||||
toast.info({
|
||||
title: 'Caution',
|
||||
message: 'You forgot important data',
|
||||
position: 'bottomRight'
|
||||
});
|
||||
})
|
||||
|
||||
$("#closeAll").click(function() {
|
||||
toast.destroy();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
279
public/demos/document/topBar.html
Executable file
279
public/demos/document/topBar.html
Executable file
@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>回到顶部</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" />
|
||||
<link rel="stylesheet" href="../../demos/css/console1.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">动态</div>
|
||||
<div class="layui-card-body">
|
||||
<dl class="layuiadmin-card-status">
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>次等水货 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../demos/css/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>微笑刺客 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--</div>-->
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'element','topBar'], function() {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
element = layui.element;
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
234
public/demos/document/treetable.html
Executable file
234
public/demos/document/treetable.html
Executable file
@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>树形表格</title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">关键字</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="keyword" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="power-query">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
查询
|
||||
</button>
|
||||
<button type="reset" class="pear-btn pear-btn-md">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table id="power-table" lay-filter="power-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="power-toolbar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
新增
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
删除
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
|
||||
<i class="layui-icon layui-icon-spread-left"></i>
|
||||
展开
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
|
||||
<i class="layui-icon layui-icon-shrink-right"></i>
|
||||
折叠
|
||||
</button>
|
||||
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="reload">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重载
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="power-bar">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
|
||||
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="power-type">
|
||||
{{#if (d.powerType == '0') { }}
|
||||
<span>目录</span>
|
||||
{{# }else if(d.powerType == '1'){ }}
|
||||
<span>菜单</span>
|
||||
{{# }else if(d.powerType == '2'){ }}
|
||||
<span>按钮</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="power-enable">
|
||||
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="icon">
|
||||
<i class="layui-icon {{d.icon}}"></i>
|
||||
</script>
|
||||
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['table','form','jquery','treetable'],function () {
|
||||
let table = layui.table;
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let treetable = layui.treetable;
|
||||
|
||||
let MODULE_PATH = "../system/operate/";
|
||||
|
||||
treetable.render({
|
||||
treeColIndex: 1,
|
||||
treeIdName: 'powerId',
|
||||
treePidName: 'parentId',
|
||||
skin:'line',
|
||||
treeDefaultClose: true,
|
||||
toolbar:'#power-toolbar',
|
||||
elem: '#power-table',
|
||||
url: '../../demos/data/power.json',
|
||||
page: false,
|
||||
cols: [
|
||||
[
|
||||
{type: 'checkbox'},
|
||||
{field: 'powerName', minWidth: 200, title: '权限名称'},
|
||||
{field: 'icon', title: '图标',templet:'#icon'},
|
||||
{field: 'powerType', title: '权限类型',templet:'#power-type'},
|
||||
{field: 'enable', title: '是否可用',templet:'#power-enable'},
|
||||
{field: 'sort', title: '排序'},
|
||||
{title: '操作',templet: '#power-bar', width: 150, align: 'center'}
|
||||
]
|
||||
]
|
||||
});
|
||||
|
||||
table.on('tool(power-table)',function(obj){
|
||||
if (obj.event === 'remove') {
|
||||
window.remove(obj);
|
||||
} else if (obj.event === 'edit') {
|
||||
window.edit(obj);
|
||||
}
|
||||
})
|
||||
|
||||
table.on('toolbar(power-table)', function(obj){
|
||||
if(obj.event === 'add'){
|
||||
window.add();
|
||||
} else if(obj.event === 'refresh'){
|
||||
window.refresh();
|
||||
} else if(obj.event === 'batchRemove'){
|
||||
window.batchRemove(obj);
|
||||
} else if(obj.event === 'expandAll'){
|
||||
treetable.expandAll("#power-table");
|
||||
} else if(obj.event === 'foldAll'){
|
||||
treetable.foldAll("#power-table");
|
||||
} else if(obj.event === 'reload'){
|
||||
treetable.reload("#power-table");
|
||||
}
|
||||
});
|
||||
|
||||
form.on('submit(power-query)', function(data) {
|
||||
var keyword = data.field.keyword;
|
||||
treetable.search('#power-table',keyword);
|
||||
return false;
|
||||
});
|
||||
|
||||
window.add = function(){
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '新增',
|
||||
shade: 0.1,
|
||||
area: ['450px', '500px'],
|
||||
content: MODULE_PATH + 'add.html'
|
||||
});
|
||||
}
|
||||
|
||||
window.edit = function(obj){
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '修改',
|
||||
shade: 0.1,
|
||||
area: ['450px', '500px'],
|
||||
content: MODULE_PATH + 'edit.html'
|
||||
});
|
||||
}
|
||||
|
||||
window.remove = function(obj){
|
||||
layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: MODULE_PATH+"remove/"+obj.data['powerId'],
|
||||
dataType:'json',
|
||||
type:'delete',
|
||||
success:function(result){
|
||||
layer.close(loading);
|
||||
if(result.success){
|
||||
layer.msg(result.msg,{icon:1,time:1000},function(){
|
||||
obj.del();
|
||||
});
|
||||
}else{
|
||||
layer.msg(result.msg,{icon:2,time:1000});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
window.batchRemove = function(obj) {
|
||||
let data = table.checkStatus(obj.config.id).data;
|
||||
if (data.length === 0) {
|
||||
layer.msg("未选中数据", {
|
||||
icon: 3,
|
||||
time: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let ids = "";
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ids += data[i].powerId + ",";
|
||||
}
|
||||
ids = ids.substr(0, ids.length - 1);
|
||||
layer.confirm('确定要删除这些数据', {
|
||||
icon: 3,
|
||||
title: '提示'
|
||||
}, function(index) {
|
||||
layer.close(index);
|
||||
let loading = layer.load();
|
||||
$.ajax({
|
||||
url: MODULE_PATH + "batchRemove/" + ids,
|
||||
dataType: 'json',
|
||||
type: 'delete',
|
||||
success: function(result) {
|
||||
layer.close(loading);
|
||||
if (result.success) {
|
||||
layer.msg(result.msg, {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
}, function() {
|
||||
table.reload('user-table');
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg, {
|
||||
icon: 2,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
161
public/demos/document/watermark.html
Executable file
161
public/demos/document/watermark.html
Executable file
@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>水印组件</title>
|
||||
<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">
|
||||
watermark 用于水印叠加
|
||||
</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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">水印创建</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="btntype1 pear-btn pear-btn-primary">单行水印</button>
|
||||
<button class="btntype2 pear-btn pear-btn-danger">多行水印</button>
|
||||
<button class="btntype3 pear-btn pear-btn-warming">叠加目标</button>
|
||||
</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">
|
||||
layui.use(['watermark'], function() {
|
||||
var watermark = layui.watermark;
|
||||
|
||||
var mark_node=new watermark({
|
||||
content: "单行水印"
|
||||
});
|
||||
|
||||
new watermark({
|
||||
content: "多行水印1<br>多行水印2",
|
||||
height:40
|
||||
});
|
||||
|
||||
new watermark({
|
||||
content: "指定容器上",
|
||||
appendTo:'#water_div',
|
||||
});
|
||||
|
||||
})
|
||||
</pre>
|
||||
</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 id="water_div"
|
||||
style="width: 600px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid gainsboro;
|
||||
background-color: #EEE;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">移除水印</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="btnclose pear-btn pear-btn-primary">销毁水印</button>
|
||||
</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">
|
||||
layui.use(['watermark'], function() {
|
||||
var popup = layui.popup;
|
||||
mark_node.destroy();
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['watermark', 'jquery', 'code'], function() {
|
||||
var popup = layui.popup;
|
||||
var $ = layui.jquery;
|
||||
var watermark = layui.watermark;
|
||||
layui.code();
|
||||
|
||||
var mark_node = null;
|
||||
|
||||
function remove_water_marker(){
|
||||
mark_node && mark_node.destroy();
|
||||
mark_node = null;
|
||||
}
|
||||
|
||||
|
||||
$(".btntype1").click(function() {
|
||||
remove_water_marker();
|
||||
mark_node=new watermark({
|
||||
content: "单行水印"
|
||||
});
|
||||
})
|
||||
$(".btntype2").click(function() {
|
||||
remove_water_marker();
|
||||
mark_node =new watermark({
|
||||
content: "多行水印1<br>第二行长多行水印2",
|
||||
height:40
|
||||
});
|
||||
})
|
||||
$(".btntype3").click(function() {
|
||||
remove_water_marker();
|
||||
mark_node = new watermark({
|
||||
content: "指定目标上",
|
||||
appendTo:'#water_div',
|
||||
});
|
||||
})
|
||||
$(".btnclose").click(function() {
|
||||
remove_water_marker();
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user