mirror of
https://github.com/acepanel/panel.git
synced 2026-02-04 07:57:21 +08:00
feat: update views
This commit is contained in:
耗子
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,6 +1,7 @@
|
||||
tmp
|
||||
.env
|
||||
.history
|
||||
.air.toml
|
||||
|
||||
# Golang #
|
||||
# `go test -c` 生成的二进制文件
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
// ========`-.____`-.___\_____/___.-`____.-'======== //
|
||||
// `=---=' //
|
||||
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
|
||||
// 佛祖保佑 永无Bug 永不宕机 //
|
||||
// Name：耗子Linux面板 Author：耗子 Date：2023-06-21 //
|
||||
// 佛祖保佑 永无Bug 永不宕机 //
|
||||
// Name: 耗子Linux面板 Author: 耗子 Date: 2023-06-22 //
|
||||
////////////////////////////////////////////////////////////////////
|
||||
-->
|
||||
|
||||
@@ -32,12 +32,12 @@
|
||||
<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">
|
||||
<link href="./res/layui/css/layui.css" rel="stylesheet">
|
||||
<link href="/res/layui/css/layui.css" rel="stylesheet">
|
||||
<script src="https://cdnjs.cdn.haozi.net/ace/1.6.1/ace.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="Panel_app"></div>
|
||||
<script src="./res/layui/layui.js"></script>
|
||||
<script src="/res/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'res/', // 静态资源所在路径
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
<title>评论管理</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>应用</cite></a>
|
||||
<a><cite>评论管理</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-comment">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">ID</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="cid" placeholder="请输入" autocomplete="off" 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="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">评论内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="content" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn layuiadmin-btn-comm" data-type="reload" lay-submit
|
||||
lay-filter="LAY-app-contcomm-search">
|
||||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div style="padding-bottom: 10px;">
|
||||
<button class="layui-btn layuiadmin-btn-comm" data-type="batchdel">删除</button>
|
||||
</div>
|
||||
<table id="LAY-app-content-comm" lay-filter="LAY-app-content-comm"></table>
|
||||
<script type="text/html" id="table-content-com">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
|
||||
class="layui-icon layui-icon-delete"></i>删除</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
layui.use('contlist', layui.factory('contlist')).use(['admin', 'contlist', 'table'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, view = layui.view
|
||||
, table = layui.table
|
||||
, form = layui.form
|
||||
|
||||
form.render(null, 'app-content-comment')
|
||||
|
||||
//搜索
|
||||
form.on('submit(LAY-app-contcomm-search)', function (data) {
|
||||
var field = data.field
|
||||
|
||||
//执行重载
|
||||
table.reload('LAY-app-content-comm', {
|
||||
where: field
|
||||
})
|
||||
})
|
||||
|
||||
//点击事件
|
||||
var active = {
|
||||
batchdel: function () {
|
||||
var checkStatus = table.checkStatus('LAY-app-content-comm')
|
||||
, checkData = checkStatus.data //得到选中的数据
|
||||
|
||||
if (checkData.length === 0) {
|
||||
return layer.msg('请选择数据')
|
||||
}
|
||||
|
||||
layer.confirm('确定删除吗？', function (index) {
|
||||
|
||||
//执行 Ajax 后重载
|
||||
/*
|
||||
admin.req({
|
||||
url: 'xxx'
|
||||
//,……
|
||||
});
|
||||
*/
|
||||
table.reload('LAY-app-content-comm')
|
||||
layer.msg('已删除')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.layui-btn.layuiadmin-btn-comm').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,18 +0,0 @@
|
||||
<div class="layui-form" lay-filter="layuiadmin-form-comment" id="layuiadmin-form-comment">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">评论内容</label>
|
||||
<div class="layui-input-block">
|
||||
<script type="text/html" template>
|
||||
<textarea name="content" lay-verify="required" placeholder="请输入" class="layui-textarea">
|
||||
{{ d.params.content || '' }}
|
||||
</textarea>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="button" lay-submit lay-filter="layuiadmin-app-com-submit" value="确认" class="layui-btn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,151 +0,0 @@
|
||||
<title>文章列表</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>应用</cite></a>
|
||||
<a><cite>文章列表</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">文章ID</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">作者</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">标题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">文章标签</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="label">
|
||||
<option value="">请选择标签</option>
|
||||
<option value="0">美食</option>
|
||||
<option value="1">新闻</option>
|
||||
<option value="2">八卦</option>
|
||||
<option value="3">体育</option>
|
||||
<option value="4">音乐</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
|
||||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card-body">
|
||||
<div style="padding-bottom: 10px;">
|
||||
<button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
|
||||
<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
|
||||
</div>
|
||||
<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
|
||||
<script type="text/html" id="buttonTpl">
|
||||
{{# if(d.status){ }}
|
||||
<button class="layui-btn layui-btn-xs">已发布</button>
|
||||
{{# } else { }}
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">待修改</button>
|
||||
{{# } }}
|
||||
</script>
|
||||
<script type="text/html" id="table-content-list">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
|
||||
class="layui-icon layui-icon-delete"></i>删除</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('contlist', layui.factory('contlist')).use(['admin', 'contlist', 'table'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, view = layui.view
|
||||
, table = layui.table
|
||||
, form = layui.form
|
||||
|
||||
form.render(null, 'app-content-list')
|
||||
|
||||
//搜索
|
||||
form.on('submit(LAY-app-contlist-search)', function (data) {
|
||||
var field = data.field
|
||||
|
||||
//执行重载
|
||||
table.reload('LAY-app-content-list', {
|
||||
where: field
|
||||
})
|
||||
})
|
||||
|
||||
var active = {
|
||||
batchdel: function () {
|
||||
var checkStatus = table.checkStatus('LAY-app-content-list')
|
||||
, checkData = checkStatus.data //得到选中的数据
|
||||
|
||||
if (checkData.length === 0) {
|
||||
return layer.msg('请选择数据')
|
||||
}
|
||||
|
||||
layer.confirm('确定删除吗？', function (index) {
|
||||
|
||||
//执行 Ajax 后重载
|
||||
/*
|
||||
admin.req({
|
||||
url: 'xxx'
|
||||
//,……
|
||||
});
|
||||
*/
|
||||
table.reload('LAY-app-content-list')
|
||||
layer.msg('已删除')
|
||||
})
|
||||
}
|
||||
|
||||
//添加
|
||||
, add: function (othis) {
|
||||
admin.popup({
|
||||
title: '添加文章'
|
||||
, area: ['550px', '550px']
|
||||
, id: 'LAY-popup-content-add'
|
||||
, success: function (layero, index) {
|
||||
view(this.id).render('app/content/listform').done(function () {
|
||||
form.render(null, 'layuiadmin-app-form-list')
|
||||
|
||||
//提交
|
||||
form.on('submit(layuiadmin-app-form-submit)', function (data) {
|
||||
var field = data.field //获取提交的字段
|
||||
|
||||
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
||||
//$.ajax({});
|
||||
layui.table.reload('LAY-app-content-list') //重载表格
|
||||
layer.close(index) //执行关闭
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.layui-btn.layuiadmin-btn-list').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
|
||||
style="padding: 20px 30px 0 0;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标题</label>
|
||||
<div class="layui-input-inline">
|
||||
<script type="text/html" template>
|
||||
<input type="text" name="title" value="{{ d.params.title || '' }}" lay-verify="required"
|
||||
placeholder="请输入用户名" autocomplete="off" class="layui-input">
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布人</label>
|
||||
<div class="layui-input-inline">
|
||||
<script type="text/html" template>
|
||||
<input type="text" name="author" value="{{ d.params.author || '' }}" lay-verify="required"
|
||||
placeholder="请输入号码" autocomplete="off" class="layui-input">
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<script type="text/html" template>
|
||||
<textarea name="content" lay-verify="required" style="width: 400px; height: 150px;" autocomplete="off"
|
||||
class="layui-textarea">
|
||||
{{ d.params.content || '' }}
|
||||
</textarea>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">标签</label>
|
||||
<div class="layui-input-inline">
|
||||
<script type="text/html" template>
|
||||
<select name="label" lay-verify="required">
|
||||
<option value="">请选择标签</option>
|
||||
<option value="美食" {{ d.params.label===
|
||||
'美食' ? 'selected' : '' }}>美食</option>
|
||||
<option value="新闻" {{ d.params.label===
|
||||
'新闻' ? 'selected' : '' }}>新闻</option>
|
||||
<option value="八卦" {{ d.params.label===
|
||||
'八卦' ? 'selected' : '' }}>八卦</option>
|
||||
<option value="体育" {{ d.params.label===
|
||||
'体育' ? 'selected' : '' }}>体育</option>
|
||||
<option value="音乐" {{ d.params.label===
|
||||
'音乐' ? 'selected' : '' }}>音乐</option>
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发布状态</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="checkbox" lay-verify="required" lay-filter="status" name="status" lay-skin="switch"
|
||||
lay-text="已发布|待修改">
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/html" template>
|
||||
<input type="hidden" name="id" value="{{ d.params.id || '' }}">
|
||||
</script>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,65 +0,0 @@
|
||||
<title>分类管理</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>应用</cite></a>
|
||||
<a><cite>分类管理</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header layuiadmin-card-header-auto">
|
||||
<button class="layui-btn layuiadmin-btn-tags" data-type="add">添加</button>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="LAY-app-content-tags" lay-filter="LAY-app-content-tags"></table>
|
||||
<script type="text/html" id="layuiadmin-app-cont-tagsbar">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
|
||||
class="layui-icon layui-icon-delete"></i>删除</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('contlist', layui.factory('contlist')).use(['admin', 'contlist', 'table'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, view = layui.view
|
||||
, table = layui.table
|
||||
, form = layui.form
|
||||
|
||||
var active = {
|
||||
add: function () {
|
||||
admin.popup({
|
||||
title: '添加分类'
|
||||
, area: ['450px', '200px']
|
||||
, id: 'LAY-popup-content-tags'
|
||||
, success: function (layero, index) {
|
||||
view(this.id).render('app/content/tagsform').done(function () {
|
||||
form.render(null, 'layuiadmin-form-tags')
|
||||
|
||||
//提交
|
||||
form.on('submit(layuiadmin-app-tags-submit)', function (data) {
|
||||
var field = data.field //获取提交的字段
|
||||
|
||||
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
||||
//$.ajax({});
|
||||
layui.table.reload('LAY-app-content-tags') //重载表格
|
||||
layer.close(index) //执行关闭
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
$('.layui-btn.layuiadmin-btn-tags').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-app-form-tags">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">分类名</label>
|
||||
<div class="layui-input-inline">
|
||||
<script type="text/html" template>
|
||||
<input type="text" name="tags" value="{{ d.params.tags || '' }}" lay-verify="required"
|
||||
placeholder="请输入..." autocomplete="off" class="layui-input">
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="button" lay-submit lay-filter="layuiadmin-app-tags-submit" value="确认" class="layui-btn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,125 +0,0 @@
|
||||
<title>帖子列表</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>应用</cite></a>
|
||||
<a><cite>帖子列表</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-forum-list">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">发帖人</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="poster" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">发帖内容</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="content" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">帖子状态</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="top">
|
||||
<option value="0">正常</option>
|
||||
<option value="1">置顶</option>
|
||||
<option value="2">封禁</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn layuiadmin-btn-forum-list" lay-submit
|
||||
lay-filter="LAY-app-forumlist-search">
|
||||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card-body">
|
||||
<div style="padding-bottom: 10px;">
|
||||
<button class="layui-btn layuiadmin-btn-forum-list" data-type="batchdel">删除</button>
|
||||
</div>
|
||||
<table id="LAY-app-forum-list" lay-filter="LAY-app-forum-list"></table>
|
||||
<script type="text/html" id="imgTpl">
|
||||
<img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
|
||||
</script>
|
||||
<script type="text/html" id="buttonTpl">
|
||||
{{# if(d.top == true){ }}
|
||||
<button class="layui-btn layui-btn-xs">已置顶</button>
|
||||
{{# } else { }}
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">正常显示</button>
|
||||
{{# } }}
|
||||
</script>
|
||||
<script type="text/html" id="table-forum-list">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
|
||||
class="layui-icon layui-icon-delete"></i>删除</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('forum', layui.factory('forum')).use(['admin', 'forum', 'table'], function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
, table = layui.table
|
||||
|
||||
form.render(null, 'app-forum-list')
|
||||
|
||||
//搜索
|
||||
form.on('submit(LAY-app-forumlist-search)', function (data) {
|
||||
var field = data.field
|
||||
|
||||
//执行重载
|
||||
table.reload('LAY-app-forum-list', {
|
||||
where: field
|
||||
})
|
||||
})
|
||||
|
||||
//事件
|
||||
var active = {
|
||||
batchdel: function () {
|
||||
var checkStatus = table.checkStatus('LAY-app-forum-list')
|
||||
, checkData = checkStatus.data //得到选中的数据
|
||||
|
||||
if (checkData.length === 0) {
|
||||
return layer.msg('请选择数据')
|
||||
}
|
||||
|
||||
layer.confirm('确定删除吗？', function (index) {
|
||||
|
||||
//执行 Ajax 后重载
|
||||
/*
|
||||
admin.req({
|
||||
url: 'xxx'
|
||||
//,……
|
||||
});
|
||||
*/
|
||||
table.reload('LAY-app-forum-list')
|
||||
layer.msg('已删除')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.layui-btn.layuiadmin-btn-forum-list').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,57 +0,0 @@
|
||||
<form class="layui-form" lay-filter="layuiadmin-form-list" id="layuiadmin-form-list" style="padding: 20px 30px 0 0;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="poster" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发帖内容</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="content" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">置顶</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" lay-filter="switch" lay-verify="required" name="switch" lay-skin="switch"
|
||||
lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">头像</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="avatar" placeholder="请上传图片" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-list">上传图片</button>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="button" lay-submit lay-filter="layuiadmin-app-forum-submit" value="确认" class="layui-btn">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'form', 'upload'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, view = layui.view
|
||||
, table = layui.table
|
||||
, form = layui.form
|
||||
, upload = layui.upload
|
||||
|
||||
upload.render({
|
||||
elem: '#layuiadmin-upload-list'
|
||||
, url: './res/json/upload/demo.js'
|
||||
, accept: 'images'
|
||||
, method: 'get'
|
||||
, acceptMime: 'image/*'
|
||||
, done: function (res) {
|
||||
$(this.item).prev('div').children('input').val(res.data.src)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,100 +0,0 @@
|
||||
<title>回帖列表</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>应用</cite></a>
|
||||
<a><cite>回帖列表</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layuiadmin-app-forum-reply">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline layuiadmin-input-useradmin">
|
||||
<label class="layui-form-label">回帖人</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="replyer" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">回帖内容</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="content" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn layuiadmin-btn-replys" data-type="reload" lay-submit
|
||||
lay-filter="LAY-app-forumreply-search">
|
||||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div style="padding-bottom: 10px;">
|
||||
<button class="layui-btn layuiadmin-btn-replys" data-type="batchdel">删除</button>
|
||||
</div>
|
||||
<table id="LAY-app-forumreply-list" lay-filter="LAY-app-forumreply-list"></table>
|
||||
<script type="text/html" id="imgTpl">
|
||||
<img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
|
||||
</script>
|
||||
<script type="text/html" id="table-forum-replys">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
|
||||
class="layui-icon layui-icon-delete"></i>删除</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('forum', layui.factory('forum')).use(['admin', 'forum', 'table'], function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
, table = layui.table
|
||||
|
||||
form.render(null, 'layuiadmin-app-forum-reply')
|
||||
|
||||
//搜索
|
||||
form.on('submit(LAY-app-forumreply-search)', function (data) {
|
||||
var field = data.field
|
||||
|
||||
//执行重载
|
||||
table.reload('LAY-app-forumreply-list', {
|
||||
where: field
|
||||
})
|
||||
})
|
||||
|
||||
var active = {
|
||||
batchdel: function () {
|
||||
var checkStatus = table.checkStatus('LAY-app-forumreply-list')
|
||||
, checkData = checkStatus.data //得到选中的数据
|
||||
|
||||
if (checkData.length === 0) {
|
||||
return layer.msg('请选择数据')
|
||||
}
|
||||
|
||||
layer.confirm('确定删除吗？', function (index) {
|
||||
|
||||
//执行 Ajax 后重载
|
||||
/*
|
||||
admin.req({
|
||||
url: 'xxx'
|
||||
//,……
|
||||
});
|
||||
*/
|
||||
table.reload('LAY-app-forumreply-list')
|
||||
layer.msg('已删除')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.layui-btn.layuiadmin-btn-replys').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<form class="layui-form" lay-filter="layuiadmin-app-forum-reply" style="padding: 20px 30px 0 0;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">回帖内容</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="content" lay-verify="required" autocomplete="off" class="layui-textarea"
|
||||
style="height: 220px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="button" lay-submit lay-filter="layuiadmin-app-forumreply-submit" value="确认"
|
||||
class="layui-btn">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(['index', 'form', 'upload'], function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
, upload = layui.upload
|
||||
|
||||
upload.render({
|
||||
elem: '#layuiadmin-upload-replys'
|
||||
, url: layui.setter.paths.base + 'json/upload/demo.js'
|
||||
, accept: 'images'
|
||||
, method: 'get'
|
||||
, acceptMime: 'image/*'
|
||||
, done: function (res) {
|
||||
$(this.item).prev('div').children('input').val(res.data.src)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,41 +0,0 @@
|
||||
<title>消息详情</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a lay-href="app/message/">消息中心</a>
|
||||
<a><cite>详情</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid" id="LAY-app-message-detail">
|
||||
<div class="layui-card layuiAdmin-msg-detail">
|
||||
<div template lay-url="./res/json/message/detail.js?id={{ layui.router().search.id }}">
|
||||
<div class="layui-card-header">
|
||||
<h1>{{ d.data.title }}</h1>
|
||||
<p>
|
||||
<span>{{ layui.util.timeAgo(d.data.time) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="layui-card-body layui-text">
|
||||
<div class="layadmin-text">
|
||||
{{- d.data.content }}
|
||||
</div>
|
||||
|
||||
<div style="padding-top: 30px;">
|
||||
<a lay-href="app/message/" class="layui-btn layui-btn-primary layui-btn-sm">返回上级</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,192 +0,0 @@
|
||||
<title>消息中心</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>消息中心</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid" id="LAY-app-message">
|
||||
<div class="layui-card">
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">全部消息</li>
|
||||
<li>通知<span class="layui-badge">6</span></li>
|
||||
<li>私信</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div class="LAY-app-message-btns" style="margin-bottom: 10px;">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="del">
|
||||
删除
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="ready">
|
||||
标记已读
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="readyAll">
|
||||
全部已读
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table id="LAY-app-message-all" lay-filter="LAY-app-message-all"></table>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<div class="LAY-app-message-btns" style="margin-bottom: 10px;">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="del">
|
||||
删除
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="ready">
|
||||
标记已读
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice"
|
||||
data-events="readyAll">全部已读
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table id="LAY-app-message-notice" lay-filter="LAY-app-message-notice"></table>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
|
||||
<div class="LAY-app-message-btns" style="margin-bottom: 10px;">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="del">
|
||||
删除
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="ready">
|
||||
标记已读
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct"
|
||||
data-events="readyAll">全部已读
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table id="LAY-app-message-direct" lay-filter="LAY-app-message-direct"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table', 'util'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
var DISABLED = 'layui-btn-disabled'
|
||||
|
||||
//区分各选项卡中的表格
|
||||
, tabs = {
|
||||
all: {
|
||||
text: '全部消息'
|
||||
, id: 'LAY-app-message-all'
|
||||
}
|
||||
, notice: {
|
||||
text: '通知'
|
||||
, id: 'LAY-app-message-notice'
|
||||
}
|
||||
, direct: {
|
||||
text: '私信'
|
||||
, id: 'LAY-app-message-direct'
|
||||
}
|
||||
}
|
||||
|
||||
//标题内容模板
|
||||
var tplTitle = function (d) {
|
||||
return '<a lay-href="app/message/detail/id=' + d.id + '">' + d.title
|
||||
}
|
||||
|
||||
//全部消息
|
||||
table.render({
|
||||
elem: '#LAY-app-message-all'
|
||||
, url: './res/json/message/all.js' //模拟接口
|
||||
, page: true
|
||||
, cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' }
|
||||
, { field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle }
|
||||
, { field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>' }
|
||||
]]
|
||||
, skin: 'line'
|
||||
})
|
||||
|
||||
//通知
|
||||
table.render({
|
||||
elem: '#LAY-app-message-notice'
|
||||
, url: './res/json/message/notice.js' //模拟接口
|
||||
, page: true
|
||||
, cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' }
|
||||
, { field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle }
|
||||
, { field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>' }
|
||||
]]
|
||||
, skin: 'line'
|
||||
})
|
||||
|
||||
//私信
|
||||
table.render({
|
||||
elem: '#LAY-app-message-direct'
|
||||
, url: './res/json/message/direct.js' //模拟接口
|
||||
, page: true
|
||||
, cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' }
|
||||
, { field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle }
|
||||
, { field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>' }
|
||||
]]
|
||||
, skin: 'line'
|
||||
})
|
||||
|
||||
//事件处理
|
||||
var events = {
|
||||
del: function (othis, type) {
|
||||
var thisTabs = tabs[type]
|
||||
, checkStatus = table.checkStatus(thisTabs.id)
|
||||
, data = checkStatus.data //获得选中的数据
|
||||
if (data.length === 0) return layer.msg('未选中行')
|
||||
|
||||
layer.confirm('确定删除选中的数据吗？', function () {
|
||||
/*
|
||||
admin.req('url', {}, function(){ //请求接口
|
||||
//do somethin
|
||||
});
|
||||
*/
|
||||
//此处只是演示，实际应用需把下述代码放入上述Ajax回调中
|
||||
layer.msg('删除成功', {
|
||||
icon: 1
|
||||
})
|
||||
table.reload(thisTabs.id) //刷新表格
|
||||
})
|
||||
}
|
||||
, ready: function (othis, type) {
|
||||
var thisTabs = tabs[type]
|
||||
, checkStatus = table.checkStatus(thisTabs.id)
|
||||
, data = checkStatus.data //获得选中的数据
|
||||
if (data.length === 0) return layer.msg('未选中行')
|
||||
|
||||
//此处只是演示
|
||||
layer.msg('标记已读成功', {
|
||||
icon: 1
|
||||
})
|
||||
table.reload(thisTabs.id) //刷新表格
|
||||
}
|
||||
, readyAll: function (othis, type) {
|
||||
var thisTabs = tabs[type]
|
||||
|
||||
//do somethin
|
||||
|
||||
layer.msg(thisTabs.text + '：全部已读', {
|
||||
icon: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.LAY-app-message-btns .layui-btn').on('click', function () {
|
||||
var othis = $(this)
|
||||
, thisEvent = othis.data('events')
|
||||
, type = othis.data('type')
|
||||
events[thisEvent] && events[thisEvent].call(this, othis, type)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<title>工单系统</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>应用</cite></a>
|
||||
<a><cite>工单系统</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-workorder">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">工单号</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="orderid" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">工单标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">业务性质</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="attr" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">受理人</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="accept" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search">
|
||||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="LAY-app-workorder" lay-filter="LAY-app-workorder"></table>
|
||||
<script type="text/html" id="progressTpl">
|
||||
<div class="layui-progress layuiadmin-order-progress" lay-filter="progress-" + {{ d.orderid }} +"">
|
||||
<div class="layui-progress-bar layui-bg-blue" lay-percent={{ d.progress }}></div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="buttonTpl">
|
||||
{{# if(d.state == '已处理'){ }}
|
||||
<button class="layui-btn layui-btn-normal layui-btn-xs">已处理</button>
|
||||
{{# } else if(d.state == '未分配'){ }}
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">未分配</button>
|
||||
{{# } else{ }}
|
||||
<button class="layui-btn layui-btn-warm layui-btn-xs">处理中</button>
|
||||
{{# } }}
|
||||
</script>
|
||||
<script type="text/html" id="table-system-order">
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
|
||||
class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('workorder', layui.factory('workorder')).use(['admin', 'workorder', 'table'], function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
, table = layui.table
|
||||
|
||||
form.render(null, 'app-content-workorder')
|
||||
|
||||
//搜索
|
||||
form.on('submit(LAY-app-order-search)', function (data) {
|
||||
var field = data.field
|
||||
|
||||
//执行重载
|
||||
table.reload('LAY-app-workorder', {
|
||||
where: field
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,61 +0,0 @@
|
||||
<form class="layui-form" lay-filter="layuiadmin-form-workorder" id="layuiadmin-form-workorder"
|
||||
style="padding: 20px 30px 0 0;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">业务性质</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="attr" lay-verify="required" placeholder="请输入业务性质" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">工单标题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="title" lay-verify="required" placeholder="工单标题..." autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">工单进度</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="progress" lay-verify="required" placeholder="工单进度..." autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">工单状态</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="state">
|
||||
<option value="未分配">未分配</option>
|
||||
<option value="处理中">处理中</option>
|
||||
<option value="已处理">已处理</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">受理人员</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="accept">
|
||||
<option value="">请选择受理人员</option>
|
||||
<option value="员工-1">员工-1</option>
|
||||
<option value="员工-2">员工-2</option>
|
||||
<option value="员工-3">员工-3</option>
|
||||
<option value="员工-4">员工-4</option>
|
||||
<option value="员工-5">员工-5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="button" lay-submit lay-filter="LAY-app-workorder-submit" value="确认" class="layui-btn">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(['index', 'form'], function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
该目录存放【应用】的视图文件
|
||||
@@ -1,153 +0,0 @@
|
||||
<title>动画</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>动画</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#component-anim .layui-card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 127px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #5F5F5F;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo li .layui-icon {
|
||||
display: inline-block;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo li .fontclass {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo li .name {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo li:hover {
|
||||
background-color: #f2f2f2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo li {
|
||||
width: 222px;
|
||||
}
|
||||
|
||||
#component-anim .component-anim-demo .layui-anim {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
margin: 0 auto 10px;
|
||||
text-align: center;
|
||||
background-color: #16baaa;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="component-anim">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">点击演示动画</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<ul class="component-anim-demo">
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
|
||||
<div class="code">layui-anim-up</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
|
||||
<div class="code">layui-anim-upbit</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
|
||||
<div class="code">layui-anim-scale</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
|
||||
<div class="code">layui-anim-scaleSpring</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="component-anim-demo">
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
|
||||
<div class="code">layui-anim-fadein</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
|
||||
<div class="code">layui-anim-fadeout</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
|
||||
<div class="code">layui-anim-rotate</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
|
||||
<div class="code">追加：layui-anim-loop</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
/* 演示动画 */
|
||||
$('#component-anim .component-anim-demo .layui-anim').on('click', function () {
|
||||
var othis = $(this), anim = othis.data('anim')
|
||||
|
||||
/* 停止循环 */
|
||||
if (othis.hasClass('layui-anim-loop')) {
|
||||
return othis.removeClass(anim)
|
||||
}
|
||||
|
||||
othis.removeClass(anim)
|
||||
|
||||
setTimeout(function () {
|
||||
othis.addClass(anim)
|
||||
})
|
||||
|
||||
/* 恢复渐隐 */
|
||||
if (anim === 'layui-anim-fadeout') {
|
||||
setTimeout(function () {
|
||||
othis.removeClass(anim)
|
||||
}, 1300)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,101 +0,0 @@
|
||||
<title>辅助元素</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>辅助</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">引用区块</div>
|
||||
<div class="layui-card-body">
|
||||
<blockquote class="layui-elem-quote">默认引用</blockquote>
|
||||
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||
穷则独善其身，达则兼济天下
|
||||
<br>——孟子（亚圣）
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">字段集区块</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>爱好</legend>
|
||||
<div class="layui-field-box">
|
||||
你可以在这里放任何内容
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<br>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>带标题的横线</legend>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">分割线</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
默认分割线
|
||||
<hr>
|
||||
|
||||
赤色分割线
|
||||
<hr class="layui-bg-red">
|
||||
|
||||
橙色分割线
|
||||
<hr class="layui-bg-orange">
|
||||
|
||||
墨绿分割线
|
||||
<hr class="layui-bg-green">
|
||||
|
||||
青色分割线
|
||||
<hr class="layui-bg-cyan">
|
||||
|
||||
蓝色分割线
|
||||
<hr class="layui-bg-blue">
|
||||
|
||||
黑色分割线
|
||||
<hr class="layui-bg-black">
|
||||
|
||||
灰色分割线
|
||||
<hr class="layui-bg-gray">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">纯圆角</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-inline">
|
||||
<img src="https://unpkg.com/outeres/demo/avatar/0.png" class="layui-circle">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,103 +0,0 @@
|
||||
<title>徽章</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>徽章</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">小徽章大家族</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<br>小圆点：
|
||||
|
||||
<span class="layui-badge-dot"></span>
|
||||
<span class="layui-badge-dot layui-bg-orange"></span>
|
||||
<span class="layui-badge-dot layui-bg-green"></span>
|
||||
<span class="layui-badge-dot layui-bg-cyan"></span>
|
||||
<span class="layui-badge-dot layui-bg-blue"></span>
|
||||
<span class="layui-badge-dot layui-bg-black"></span>
|
||||
<span class="layui-badge-dot layui-bg-gray"></span>
|
||||
|
||||
<br><br>常规弧形徽章：
|
||||
|
||||
<span class="layui-badge">6</span>
|
||||
<span class="layui-badge">99</span>
|
||||
<span class="layui-badge">61728</span>
|
||||
<span class="layui-badge">赤</span>
|
||||
<span class="layui-badge layui-bg-orange">橙</span>
|
||||
<span class="layui-badge layui-bg-green">绿</span>
|
||||
<span class="layui-badge layui-bg-cyan">青</span>
|
||||
<span class="layui-badge layui-bg-blue">蓝</span>
|
||||
<span class="layui-badge layui-bg-black">黑</span>
|
||||
<span class="layui-badge layui-bg-gray">灰</span>
|
||||
|
||||
<br><br>边框徽章：
|
||||
|
||||
<span class="layui-badge-rim">6</span>
|
||||
<span class="layui-badge-rim">Hot</span>
|
||||
|
||||
<br><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">与其它元素的搭配</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
|
||||
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<ul class="layui-nav style=" text-align:="" right;
|
||||
"=""> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
|
||||
<li class="layui-nav-item">
|
||||
<a href="">控制台<span class="layui-badge">9</span></a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="">个人中心<span class="layui-badge-dot"></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">网站设置</li>
|
||||
<li>用户管理<span class="layui-badge-dot"></span></li>
|
||||
<li>最新邮件<span class="layui-badge">99+</span></li>
|
||||
</ul>
|
||||
<div class="layui-tab-content"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
element.render()
|
||||
})
|
||||
</script>
|
||||
@@ -1,195 +0,0 @@
|
||||
<title>按钮</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>按钮</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮主题</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary">原始按钮</button>
|
||||
<button class="layui-btn">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-normal">百搭按钮</button>
|
||||
<button class="layui-btn layui-btn-warm">暖色按钮</button>
|
||||
<button class="layui-btn layui-btn-danger">警告按钮</button>
|
||||
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮尺寸</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
|
||||
<button class="layui-btn layui-btn-primary">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-lg">大型按钮</button>
|
||||
<button class="layui-btn">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-sm">小型按钮</button>
|
||||
<button class="layui-btn layui-btn-xs">迷你按钮</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
|
||||
<button class="layui-btn layui-btn-normal">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
|
||||
<button class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮图标</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮圆角</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
|
||||
<button class="layui-btn layui-btn-radius">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
|
||||
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
|
||||
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
|
||||
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮混搭</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
|
||||
<a href="http://www.baidu.com#/doc/element/button.html" class="layui-btn"
|
||||
target="_blank">跳转的按钮</a>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮组合</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn">增加</button>
|
||||
<button class="layui-btn ">编辑</button>
|
||||
<button class="layui-btn">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-btn-container">
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||
</div>
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">按钮铺满</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-fluid">好雨知时节</button>
|
||||
<button class="layui-btn layui-btn-fluid">当春乃发生</button>
|
||||
<button class="layui-btn layui-btn-fluid">随风潜入夜</button>
|
||||
<button class="layui-btn layui-btn-fluid">润物细无声</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,250 +0,0 @@
|
||||
<title>轮播</title>
|
||||
|
||||
<style>
|
||||
/* 为了区分效果 */
|
||||
#LAY-demo-carousel div[carousel-item] > * {
|
||||
text-align: center;
|
||||
line-height: 280px;
|
||||
color: #5F5F5F;
|
||||
}
|
||||
|
||||
#LAY-demo-carousel div[carousel-item] > *:nth-child(2n) {
|
||||
background-color: #E2E2E2;
|
||||
}
|
||||
|
||||
#LAY-demo-carousel div[carousel-item] > *:nth-child(2n+1) {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#test-carousel-normal-2 div[carousel-item] > * {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>轮播</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid" id="LAY-demo-carousel">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">常规轮播</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-carousel" id="test-carousel-normal" lay-filter="test-carousel-normal">
|
||||
<div carousel-item="">
|
||||
<div>条目1</div>
|
||||
<div>条目2</div>
|
||||
<div>条目3</div>
|
||||
<div>条目4</div>
|
||||
<div>条目5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-carousel" id="test-carousel-normal-2" style="margin-top: 15px;">
|
||||
<div carousel-item="">
|
||||
<div>条目1</div>
|
||||
<div>条目2</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">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">宽高</label>
|
||||
<div class="layui-input-inline" style="width: 98px;">
|
||||
<input type="tel" name="width" value="600" autocomplete="off" placeholder="width"
|
||||
class="layui-input test-carousel-demoSet">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 98px;">
|
||||
<input type="tel" name="height" value="280" autocomplete="off" placeholder="height"
|
||||
class="layui-input test-carousel-demoSet">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">动画类型</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-btn-group test-carousel-demoTest" style="margin-top: 5px;">
|
||||
<button class="layui-btn layui-btn-sm" style="background-color: #16b777;"
|
||||
data-type="set" data-key="anim" data-value="default">左右切换
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" data-type="set" data-key="anim"
|
||||
data-value="updown">上下切换
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" data-type="set" data-key="anim"
|
||||
data-value="fade">渐隐渐显
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">箭头状态</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-btn-group test-carousel-demoTest" style="margin-top: 5px;">
|
||||
<button class="layui-btn layui-btn-sm" style="background-color: #16b777;"
|
||||
data-type="set" data-key="arrow" data-value="hover">悬停显示
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow"
|
||||
data-value="always">始终显示
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow"
|
||||
data-value="none">不显示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">指示器位置</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-btn-group test-carousel-demoTest" style="margin-top: 5px;">
|
||||
<button class="layui-btn layui-btn-sm" style="background-color: #16b777;"
|
||||
data-key="indicator" data-type="set" data-value="inside">容器内部
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator"
|
||||
data-value="outside">容器外部
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator"
|
||||
data-value="none">不显示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自动切换</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="switch" lay-skin="switch" checked="" lay-text="ON|OFF"
|
||||
lay-filter="test-carousel-autoplay">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" style="width: auto;">时间间隔</label>
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<input type="tel" name="interval" value="3000" autocomplete="off" placeholder="毫秒"
|
||||
class="layui-input test-carousel-demoSet">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-carousel" id="test-carousel-demo" lay-filter="test-carousel-demo">
|
||||
<div carousel-item="">
|
||||
<div>条目1</div>
|
||||
<div>条目2</div>
|
||||
<div>条目3</div>
|
||||
<div>条目4</div>
|
||||
<div>条目5</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-carousel" id="test-carousel-img">
|
||||
<div carousel-item="">
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'carousel', 'form'], function () {
|
||||
var carousel = layui.carousel
|
||||
, form = layui.form
|
||||
|
||||
//常规轮播
|
||||
carousel.render({
|
||||
elem: '#test-carousel-normal'
|
||||
, arrow: 'always'
|
||||
})
|
||||
|
||||
//改变下时间间隔、动画类型、高度
|
||||
carousel.render({
|
||||
elem: '#test-carousel-normal-2'
|
||||
, interval: 1800
|
||||
, anim: 'fade'
|
||||
, height: '120px'
|
||||
})
|
||||
|
||||
//设定各种参数
|
||||
var ins3 = carousel.render({
|
||||
elem: '#test-carousel-demo'
|
||||
})
|
||||
//图片轮播
|
||||
carousel.render({
|
||||
elem: '#test-carousel-img'
|
||||
, width: '720px'
|
||||
, height: '360px'
|
||||
, interval: 5000
|
||||
})
|
||||
|
||||
//事件
|
||||
carousel.on('change(test-carousel-demo)', function (res) {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
var $ = layui.$, active = {
|
||||
set: function (othis) {
|
||||
var THIS = 'layui-bg-normal'
|
||||
, key = othis.data('key')
|
||||
, options = {}
|
||||
|
||||
othis.css('background-color', '#16b777').siblings().removeAttr('style')
|
||||
options[key] = othis.data('value')
|
||||
ins3.reload(options)
|
||||
}
|
||||
}
|
||||
|
||||
//开关
|
||||
form.on('switch(test-carousel-autoplay)', function () {
|
||||
ins3.reload({
|
||||
autoplay: this.checked
|
||||
})
|
||||
})
|
||||
|
||||
$('.test-carousel-demoSet').on('keyup', function () {
|
||||
var value = this.value
|
||||
, options = {}
|
||||
if (!/^\d+$/.test(value)) return
|
||||
|
||||
options[this.name] = value
|
||||
ins3.reload(options)
|
||||
})
|
||||
|
||||
//其它示例
|
||||
$('.test-carousel-demoTest .layui-btn').on('click', function () {
|
||||
var othis = $(this), type = othis.data('type')
|
||||
active[type] ? active[type].call(this, othis) : ''
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,132 +0,0 @@
|
||||
<title>代码修饰</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>代码修饰</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">默认修饰</div>
|
||||
<div class="layui-card-body">
|
||||
<pre class="layui-code">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">深色模式</div>
|
||||
<div class="layui-card-body">
|
||||
<pre class="layui-code" lay-options="{title: 'Custom Title', skin: 'dark'}">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">叠加使用</div>
|
||||
<div class="layui-card-body">
|
||||
<pre class="layui-code">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
test
|
||||
<pre class="layui-code">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
test
|
||||
<pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
|
||||
test
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
<pre class="layui-code" lay-options="{skin: 'dark'}">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
test
|
||||
<pre class="layui-code" lay-options="{skin: 'dark'}">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
test
|
||||
<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">// 不显示行号（注：v2.7.3 新增）
|
||||
test
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
</pre>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">固定高度</div>
|
||||
<div class="layui-card-body">
|
||||
<pre class="layui-code" lay-options="{height: '150px'}">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
test
|
||||
code line
|
||||
code line
|
||||
code line
|
||||
code line
|
||||
code line
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">不显示行号</div>
|
||||
<div class="layui-card-body">
|
||||
<pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义右上角内容</div>
|
||||
<div class="layui-card-body">
|
||||
<pre class="layui-code" lay-options="{about: 'code'}">// 在里面放置任意的文本内容
|
||||
test
|
||||
test
|
||||
</pre>
|
||||
<div id="custom1">
|
||||
自定义右上角内容，以便实现个性化操作
|
||||
此处仅为演示，右上角实际功能需自主完成
|
||||
😄
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('code', function () {
|
||||
// 执行渲染
|
||||
layui.code({
|
||||
elem: 'pre'
|
||||
})
|
||||
|
||||
// custom more about
|
||||
layui.code({
|
||||
elem: '#custom1',
|
||||
about: [
|
||||
'<a href="javascript:;">复制</a>',
|
||||
'<a href="about:blank" target="_blank">跳转</a>'
|
||||
].join('')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,189 +0,0 @@
|
||||
<title>颜色选择器组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>颜色选择器组件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">常规使用</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-colorpicker-dome1"></div>
|
||||
<div id="test-colorpicker-dome2" style="margin-left: 10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">表单赋值</div>
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<input type="text" value="" placeholder="请选择颜色" class="layui-input"
|
||||
id="test-colorpicker-form-input">
|
||||
</div>
|
||||
<div class="layui-inline" style="left: -11px;">
|
||||
<div id="test-colorpicker-dome3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">RGB / RGBA 色值</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-colorpicker-dome4"></div>
|
||||
<div id="test-colorpicker-dome5" style="margin-left: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">透明度选择</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-colorpicker-dome6"></div>
|
||||
<div id="test-colorpicker-dome7" style="margin-left: 30px;"></div>
|
||||
<div id="test-colorpicker-dome8" style="margin-left: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">预定义颜色项</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-colorpicker-dome9"></div>
|
||||
<div id="test-colorpicker-dome10" style="margin-left: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">全功能和回调的使用</div>
|
||||
<div class="layui-card-body">
|
||||
<input type="hidden" name="color" value="" id="test-colorpicker-all-input">
|
||||
<div id="test-colorpicker-dome11"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">颜色框尺寸</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-colorpicker-dome12"></div>
|
||||
<div id="test-colorpicker-dome13" style="margin-left: 30px;"></div>
|
||||
<div id="test-colorpicker-dome14" style="margin-left: 30px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'colorpicker'], function () {
|
||||
var $ = layui.$
|
||||
, colorpicker = layui.colorpicker
|
||||
|
||||
//常规使用
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome1' //绑定元素
|
||||
, change: function (color) { //颜色改变的回调
|
||||
layer.tips('选择了：' + color, this.elem, {
|
||||
tips: 1
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//初始色值
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome2'
|
||||
, color: '#2ec770' //设置默认色
|
||||
, done: function (color) {
|
||||
layer.tips('选择了：' + color, this.elem)
|
||||
}
|
||||
})
|
||||
|
||||
//表单赋值
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome3'
|
||||
, color: '#1c97f5'
|
||||
, done: function (color) {
|
||||
$('#test-colorpicker-form-input').val(color)
|
||||
}
|
||||
})
|
||||
|
||||
//RGB 、RGBA
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome4'
|
||||
, color: 'rgb(68,66,66)'
|
||||
, format: 'rgb' //默认为 hex
|
||||
})
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome5'
|
||||
, color: 'rgba(68,66,66,0.5)'
|
||||
, format: 'rgb'
|
||||
, alpha: true //开启透明度滑块
|
||||
})
|
||||
|
||||
//开启透明度
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome6'
|
||||
, color: '#16baaa' //hex
|
||||
, alpha: true //开启透明度
|
||||
, format: 'rgb'
|
||||
})
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome7'
|
||||
, color: 'rgb(0,150,136,0.6)' //rgba
|
||||
, alpha: true
|
||||
, format: 'rgb'
|
||||
})
|
||||
colorpicker.render({ //无初始色值时
|
||||
elem: '#test-colorpicker-dome8'
|
||||
, alpha: true
|
||||
, format: 'rgb'
|
||||
})
|
||||
|
||||
//预定义颜色项
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome9'
|
||||
, color: '#c71585'
|
||||
, predefine: true // 开启预定义颜色
|
||||
})
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome10'
|
||||
, color: '#9d8a0e'
|
||||
, predefine: true // 开启预定义颜色
|
||||
, colors: ['#ff8c00', '#00ced1', '#9d8a0e'] //自定义预定义颜色项
|
||||
})
|
||||
|
||||
//开启全功能
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome11'
|
||||
, color: 'rgba(7, 155, 140, 1)'
|
||||
, format: 'rgb'
|
||||
, predefine: true
|
||||
, alpha: true
|
||||
, done: function (color) {
|
||||
$('#test-colorpicker-all-input').val(color) //向隐藏域赋值
|
||||
layer.tips('给指定隐藏域设置了颜色值：' + color, this.elem)
|
||||
|
||||
color || this.change(color) //清空时执行 change
|
||||
}
|
||||
, change: function (color) {
|
||||
//给当前页面头部和左侧设置主题色
|
||||
$('.layui-side-menu,.layui-logo').css('cssText', 'background-color: ' + color + ' !important;')
|
||||
}
|
||||
})
|
||||
|
||||
//设定颜色框尺寸
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome12'
|
||||
, size: 'lg' //大号下拉框
|
||||
})
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome13'
|
||||
//,size: 'sm' //默认 sm
|
||||
})
|
||||
colorpicker.render({
|
||||
elem: '#test-colorpicker-dome14'
|
||||
, size: 'xs' //mini下拉框
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,581 +0,0 @@
|
||||
<title>下拉菜单</title>
|
||||
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<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">
|
||||
<button class="layui-btn test-dropdown-demo1">
|
||||
下拉菜单
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary test-dropdown-demo1">
|
||||
下拉菜单
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn" id="test-dropdown-demo100">
|
||||
无限层级 + 跳转 + 事件 + 自定义模板
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline" style="width: 235px;">
|
||||
<input name="" placeholder="在输入框提供一些常用的选项" class="layui-input"
|
||||
id="test-dropdown-demo2">
|
||||
</div>
|
||||
<div class="layui-inline layui-word-aux layui-font-gray">
|
||||
可以绑定任意元素，<a href="javascript:;" class="layui-font-blue" id="test-dropdown-demo3">比如这段文字
|
||||
<i class="layui-icon layui-font-12 layui-icon-down"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">在表格中的应用</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<table class="layui-hide" id="test-dropdown-table" lay-filter="test-dropdown-table"></table>
|
||||
<script type="text/html" id="test-dropdown-toolbar-barDemo">
|
||||
<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i
|
||||
class="layui-icon layui-icon-down"></i></a>
|
||||
</script>
|
||||
|
||||
</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">
|
||||
<button class="layui-btn layui-btn-primary" id="test-dropdown-demo4">
|
||||
hover
|
||||
<i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary" id="test-dropdown-demo5">
|
||||
mousedown
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary" id="test-dropdown-demo6">
|
||||
dblclick - 双击
|
||||
<i class="layui-icon layui-icon-circle layui-font-12"></i>
|
||||
</button>
|
||||
</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-bg-gray" style="height: 260px; text-align: center;" id="test-dropdown-demo7">
|
||||
<span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
|
||||
</div>
|
||||
<button class="layui-btn" style="margin-top: 15px;" lay-demoactive="rightclick">
|
||||
开启全局右键菜单
|
||||
</button>
|
||||
|
||||
</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">
|
||||
<button class="layui-btn" id="test-dropdown-demo8">
|
||||
重定义样式
|
||||
<i class="layui-icon layui-icon-list layui-font-14"></i>
|
||||
</button>
|
||||
<style>
|
||||
.test-dropdown-demo,
|
||||
.test-dropdown-demo .layui-menu {
|
||||
background-color: #000;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.test-dropdown-demo .layui-menu li {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.test-dropdown-demo .layui-menu li:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
</style>
|
||||
<button class="layui-btn" id="test-dropdown-demo9">
|
||||
重定义内容
|
||||
<i class="layui-icon layui-icon-list layui-font-14"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'dropdown', 'util', 'layer', 'table'], function () {
|
||||
var dropdown = layui.dropdown
|
||||
, util = layui.util
|
||||
, layer = layui.layer
|
||||
, table = layui.table
|
||||
, $ = layui.jquery
|
||||
|
||||
//初演示
|
||||
dropdown.render({
|
||||
elem: '.test-dropdown-demo1'
|
||||
, data: [{
|
||||
title: 'menu item11'
|
||||
, id: 100
|
||||
}, {
|
||||
title: 'menu item22'
|
||||
, id: 101
|
||||
}, {
|
||||
title: 'menu item33'
|
||||
, id: 102
|
||||
}]
|
||||
, click: function (obj) {
|
||||
layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#16b777'] })
|
||||
}
|
||||
})
|
||||
|
||||
//初演示 - 绑定输入框
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo2'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 101
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, id: 102
|
||||
}, {
|
||||
title: 'menu item 3'
|
||||
, id: 103
|
||||
}, {
|
||||
title: 'menu item 4'
|
||||
, id: 104
|
||||
}, {
|
||||
title: 'menu item 5'
|
||||
, id: 105
|
||||
}, {
|
||||
title: 'menu item 6'
|
||||
, id: 106
|
||||
}]
|
||||
, click: function (obj) {
|
||||
this.elem.val(obj.title)
|
||||
}
|
||||
, style: 'width: 235px;'
|
||||
})
|
||||
|
||||
//初演示 - 绑定文字
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo3'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 100
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, id: 101
|
||||
, child: [{ //横向子菜单
|
||||
title: 'menu item 2-1'
|
||||
, id: 1011
|
||||
}, {
|
||||
title: 'menu item 2-2'
|
||||
, id: 1012
|
||||
}]
|
||||
}, {
|
||||
title: 'menu item 3'
|
||||
, id: 102
|
||||
}, {
|
||||
type: '-' //分割线
|
||||
}, {
|
||||
title: 'menu group'
|
||||
, id: 103
|
||||
, type: 'group' //纵向菜单组
|
||||
, child: [{
|
||||
title: 'menu item 4-1'
|
||||
, id: 1031
|
||||
}, {
|
||||
title: 'menu item 4-2'
|
||||
, id: 1032
|
||||
}]
|
||||
}, {
|
||||
type: '-' //分割线
|
||||
}, {
|
||||
title: 'menu item 5'
|
||||
, id: 104
|
||||
}, {
|
||||
title: 'menu item 5'
|
||||
, id: 104
|
||||
}]
|
||||
, click: function (obj) {
|
||||
this.elem.val(obj.title)
|
||||
}
|
||||
})
|
||||
|
||||
//无限层级
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo100'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
,
|
||||
templet: '<i class="layui-icon layui-icon-picture"></i> {{d.title}} <span class="layui-badge-dot"></span>'
|
||||
,
|
||||
id: 100
|
||||
,
|
||||
href: '#'
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, templet: '<img src="https://unpkg.com/outeres/demo/layer.png?t=123" style="width: 16px;"> {{d.title}}'
|
||||
, id: 101
|
||||
, href: '/'
|
||||
, target: '_blank'
|
||||
}
|
||||
, { type: '-' } //分割线
|
||||
, {
|
||||
title: 'menu item 3'
|
||||
, id: 102
|
||||
, type: 'group'
|
||||
, child: [{
|
||||
title: 'menu item 3-1'
|
||||
, id: 103
|
||||
}, {
|
||||
title: 'menu item 3-2'
|
||||
, id: 104
|
||||
, child: [{
|
||||
title: 'menu item 3-2-1'
|
||||
, id: 105
|
||||
}, {
|
||||
title: 'menu item 3-2-2'
|
||||
, id: 11
|
||||
, type: 'group'
|
||||
, child: [{
|
||||
title: 'menu item 3-2-2-1'
|
||||
, id: 111
|
||||
}, {
|
||||
title: 'menu item 3-2-2-2'
|
||||
, id: 1111
|
||||
}]
|
||||
}, {
|
||||
title: 'menu item 3-2-3'
|
||||
, id: 11111
|
||||
}]
|
||||
}, {
|
||||
title: 'menu item 3-3'
|
||||
, id: 111111
|
||||
, type: 'group'
|
||||
, child: [{
|
||||
title: 'menu item 3-3-1'
|
||||
, id: 22
|
||||
}, {
|
||||
title: 'menu item 3-3-2'
|
||||
, id: 222
|
||||
, child: [{
|
||||
title: 'menu item 3-3-2-1'
|
||||
, id: 2222
|
||||
}, {
|
||||
title: 'menu item 3-3-2-2'
|
||||
, id: 22222
|
||||
}, {
|
||||
title: 'menu item 3-3-2-3'
|
||||
, id: 2222222
|
||||
}]
|
||||
}, {
|
||||
title: 'menu item 3-3-3'
|
||||
, id: 333
|
||||
}]
|
||||
}]
|
||||
}
|
||||
, { type: '-' }
|
||||
, {
|
||||
title: 'menu item 4'
|
||||
, id: 4
|
||||
}, {
|
||||
title: 'menu item 5'
|
||||
, id: 5
|
||||
, child: [{
|
||||
title: 'menu item 5-1'
|
||||
, id: 55
|
||||
, child: [{
|
||||
title: 'menu item 5-1-1'
|
||||
, id: 5555
|
||||
}, {
|
||||
title: 'menu item 5-1-2'
|
||||
, id: 55555
|
||||
}, {
|
||||
title: 'menu item 5-1-3'
|
||||
, id: 555555
|
||||
}]
|
||||
}, {
|
||||
title: 'menu item 5-2'
|
||||
, id: 52
|
||||
}, {
|
||||
title: 'menu item 5-3'
|
||||
, id: 53
|
||||
}]
|
||||
}, { type: '-' }, {
|
||||
title: 'menu item 6'
|
||||
, id: 66
|
||||
, type: 'group'
|
||||
, isSpreadItem: false
|
||||
, child: [{
|
||||
title: 'menu item 6-1'
|
||||
, id: 777
|
||||
}, {
|
||||
title: 'menu item 6-2'
|
||||
, id: 7777
|
||||
}, {
|
||||
title: 'menu item 6-3'
|
||||
, id: 77777
|
||||
}]
|
||||
}]
|
||||
, click: function (item) {
|
||||
layer.msg(util.escape(JSON.stringify(item)))
|
||||
}
|
||||
})
|
||||
|
||||
// dropdown 在表格中的应用
|
||||
table.render({
|
||||
elem: '#test-dropdown-table'
|
||||
, url: './res/json/table/demo.js'
|
||||
, title: '用户数据表'
|
||||
, cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' }
|
||||
, { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true }
|
||||
, { field: 'username', title: '用户名', width: 120, edit: 'text' }
|
||||
, { field: 'email', title: '邮箱', minWidth: 150 }
|
||||
, { fixed: 'right', title: '操作', toolbar: '#test-dropdown-toolbar-barDemo', width: 150 }
|
||||
]]
|
||||
, height: 355
|
||||
, page: true
|
||||
})
|
||||
//行工具事件
|
||||
table.on('tool(test-dropdown-table)', function (obj) {
|
||||
var that = this
|
||||
, data = obj.data
|
||||
|
||||
if (obj.event === 'edit') {
|
||||
layer.prompt({
|
||||
formType: 2
|
||||
, value: data.email
|
||||
}, function (value, index) {
|
||||
obj.update({
|
||||
email: value
|
||||
})
|
||||
layer.close(index)
|
||||
})
|
||||
} else if (obj.event === 'more') {
|
||||
//更多下拉菜单
|
||||
dropdown.render({
|
||||
elem: that
|
||||
, show: true //外部事件触发即显示
|
||||
, data: [{
|
||||
title: 'item 1'
|
||||
, id: 'aaa'
|
||||
}, {
|
||||
title: 'item 2'
|
||||
, id: 'bbb'
|
||||
}, {
|
||||
title: '删除'
|
||||
, id: 'del'
|
||||
}]
|
||||
, click: function (data, othis) {
|
||||
//根据 id 做出不同操作
|
||||
if (data.id === 'del') {
|
||||
layer.confirm('真的删除行么', function (index) {
|
||||
obj.del()
|
||||
layer.close(index)
|
||||
})
|
||||
} else {
|
||||
layer.msg('得到表格下拉菜单 id：' + data.id)
|
||||
}
|
||||
}
|
||||
, style: 'margin-left: -45px; box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//自定义事件 - hover
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo4'
|
||||
, trigger: 'hover'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 100
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, id: 101
|
||||
}, {
|
||||
title: 'menu item 3'
|
||||
, id: 102
|
||||
}]
|
||||
})
|
||||
|
||||
//自定义事件 - mousedown
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo5'
|
||||
, trigger: 'mousedown'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 100
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, id: 101
|
||||
}, {
|
||||
title: 'menu item 3'
|
||||
, id: 102
|
||||
}]
|
||||
})
|
||||
|
||||
//自定义事件 - dblclick
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo6'
|
||||
, trigger: 'dblclick'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 100
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, id: 101
|
||||
}, {
|
||||
title: 'menu item 3'
|
||||
, id: 102
|
||||
}]
|
||||
})
|
||||
|
||||
//右键菜单
|
||||
var inst = dropdown.render({
|
||||
elem: '#test-dropdown-demo7' //也可绑定到 document，从而重置整个右键
|
||||
, trigger: 'contextmenu' //contextmenu
|
||||
, isAllowSpread: false //禁止菜单组展开收缩
|
||||
, style: 'width: 200px' //定义宽度，默认自适应
|
||||
, id: 'test777' //定义唯一索引
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 'test'
|
||||
}, {
|
||||
title: 'Printing'
|
||||
, id: 'print'
|
||||
}, {
|
||||
title: 'Reload'
|
||||
, id: 'reload'
|
||||
}, { type: '-' }, {
|
||||
title: 'menu item 3'
|
||||
, id: '#3'
|
||||
, child: [{
|
||||
title: 'menu item 3-1'
|
||||
, id: '#1'
|
||||
}, {
|
||||
title: 'menu item 3-2'
|
||||
, id: '#2'
|
||||
}, {
|
||||
title: 'menu item 3-3'
|
||||
, id: '#3'
|
||||
}]
|
||||
}, { type: '-' }, {
|
||||
title: 'menu item 4'
|
||||
, id: ''
|
||||
}, {
|
||||
title: 'menu item 5'
|
||||
, id: '#1'
|
||||
}, {
|
||||
title: 'menu item 6'
|
||||
, id: '#1'
|
||||
}]
|
||||
, click: function (obj, othis) {
|
||||
if (obj.id === 'test') {
|
||||
layer.msg('click')
|
||||
} else if (obj.id === 'print') {
|
||||
window.print()
|
||||
} else if (obj.id === 'reload') {
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//重定义样式
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo8'
|
||||
, data: [{
|
||||
title: 'menu item 1'
|
||||
, id: 100
|
||||
}, {
|
||||
title: 'menu item 2'
|
||||
, id: 101
|
||||
}, {
|
||||
title: 'menu item 3'
|
||||
, id: 103
|
||||
}, {
|
||||
title: 'menu item 4'
|
||||
, id: 104
|
||||
}, {
|
||||
title: 'menu item 5'
|
||||
, id: 105
|
||||
}, {
|
||||
title: 'menu item 6'
|
||||
, id: 106
|
||||
}]
|
||||
, className: 'test-dropdown-demo'
|
||||
, ready: function (elemPanel, elem) {
|
||||
layer.msg('定义了一个 className')
|
||||
}
|
||||
})
|
||||
|
||||
//重定义内容
|
||||
dropdown.render({
|
||||
elem: '#test-dropdown-demo9'
|
||||
, content: ['<div class="layui-tab layui-tab-brief">'
|
||||
, '<ul class="layui-tab-title">'
|
||||
, '<li class="layui-this">Tab header 1</li>'
|
||||
, '<li>Tab header 2</li>'
|
||||
, '<li>Tab header 3</li>'
|
||||
, '</ul>'
|
||||
, '<div class="layui-tab-content">'
|
||||
, '<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 参数中插入任意的 html 内容，可替代默认的下拉菜单。 从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>'
|
||||
, '<div class="layui-tab-item">Tab body 2</div>'
|
||||
, '<div class="layui-tab-item">Tab body 3</div>'
|
||||
, '</div>'
|
||||
, '</div>'].join('')
|
||||
, style: 'width: 370px; height: 200px; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);'
|
||||
, ready: function () {
|
||||
layui.use('element', function (element) {
|
||||
element.render('tab')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//其他操作
|
||||
util.event('lay-demoactive', {
|
||||
//全局右键菜单
|
||||
rightclick: function (othis) {
|
||||
if (!othis.data('open')) {
|
||||
dropdown.reload('test777', {
|
||||
elem: document //将事件直接绑定到 document
|
||||
})
|
||||
layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
|
||||
othis.html('取消全局右键菜单')
|
||||
othis.data('open', true)
|
||||
} else {
|
||||
dropdown.reload('test777', {
|
||||
elem: '#test-dropdown-demo7' //重新绑定到指定元素上
|
||||
})
|
||||
layer.msg('已取消全局右键菜单，恢复默认右键菜单')
|
||||
othis.html('开启全局右键菜单')
|
||||
othis.data('open', false)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,157 +0,0 @@
|
||||
<title>流加载</title>
|
||||
|
||||
<!-- 以下样式仅供演示 -->
|
||||
<style>
|
||||
#LAY-flow-demo .flow-default {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
#LAY-flow-demo .flow-default li {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
font-size: 14px;
|
||||
width: 48%;
|
||||
margin-bottom: 10px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#LAY-flow-demo .flow-default img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#LAY-flow-demo .site-demo-flow {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#LAY-flow-demo .site-demo-flow img {
|
||||
width: 40%;
|
||||
height: 200px;
|
||||
margin: 0 2px 5px 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#LAY-flow-demo .flow-default,
|
||||
#LAY-flow-demo .site-demo-flow {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#LAY-flow-demo .flow-default li {
|
||||
width: 45%
|
||||
}
|
||||
|
||||
#LAY-flow-demo .site-demo-flow img {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>流加载</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid" id="LAY-flow-demo">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">信息流 - 滚动加载</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="flow-default" id="test-flow-auto"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">信息流 - 手工加载</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="flow-default" style="height: 300px;" id="test-flow-manual"></ul>
|
||||
</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="site-demo-flow" id="test-flow-lazyimg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'flow'], function () {
|
||||
var flow = layui.flow
|
||||
|
||||
flow.load({
|
||||
elem: '#test-flow-auto' //流加载容器
|
||||
, scrollElem: '#test-flow-auto' //滚动条所在元素，一般不用填，此处只是演示需要。
|
||||
, done: function (page, next) { //执行下一页的回调
|
||||
|
||||
//模拟数据插入
|
||||
setTimeout(function () {
|
||||
var lis = []
|
||||
for (var i = 0; i < 8; i++) {
|
||||
lis.push('<li>' + ((page - 1) * 8 + i + 1) + '</li>')
|
||||
}
|
||||
|
||||
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||
next(lis.join(''), page < 10) //假设总页数为 10
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
|
||||
flow.load({
|
||||
elem: '#test-flow-manual' //流加载容器
|
||||
, scrollElem: '#test-flow-manual' //滚动条所在元素，一般不用填，此处只是演示需要。
|
||||
, isAuto: false
|
||||
, isLazyimg: true
|
||||
, done: function (page, next) { //加载下一页
|
||||
//模拟插入
|
||||
setTimeout(function () {
|
||||
var lis = []
|
||||
for (var i = 0; i < 6; i++) {
|
||||
lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg?v=' + ((page - 1) * 6 + i + 1) + '"></li>')
|
||||
}
|
||||
next(lis.join(''), page < 6) //假设总页数为 6
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
|
||||
//按屏加载图片
|
||||
flow.lazyimg({
|
||||
elem: '#test-flow-lazyimg img'
|
||||
, scrollElem: '#test-flow-lazyimg' //一般不用设置，此处只是演示需要。
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,238 +0,0 @@
|
||||
<title>表单元素</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>表单</cite></a>
|
||||
<a><cite>表单元素</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<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" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="text" name="title" placeholder="用户名" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="password" name="title" 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="写作" checked>
|
||||
<input type="checkbox" name="" title="发呆">
|
||||
<input type="checkbox" name="" title="禁用" disabled>
|
||||
</div>
|
||||
<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 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 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">
|
||||
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">响应式组合</div>
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" action="" lay-filter="component-form-element">
|
||||
<div class="layui-row layui-col-space10 layui-form-item">
|
||||
<div class="layui-col-lg6">
|
||||
<label class="layui-form-label">员工姓名：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="fullname" lay-verify="required" placeholder=""
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<label class="layui-form-label">技术工种：</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="type" lay-verify="required" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">前端工程师</option>
|
||||
<option value="1">Node.js工程师</option>
|
||||
<option value="2">PHP工程师</option>
|
||||
<option value="3">Java工程师</option>
|
||||
<option value="4">运维</option>
|
||||
<option value="4">视觉设计师</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">兴趣爱好：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="interest[write]" title="写作">
|
||||
<input type="checkbox" name="interest[read]" title="阅读">
|
||||
<input type="checkbox" name="interest[code]" title="代码" checked>
|
||||
<input type="checkbox" name="interest[dreaming]" title="做梦">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否婚姻：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">所属职称：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="role" value="" title="经理">
|
||||
<input type="radio" name="role" value="" title="主管">
|
||||
<input type="radio" name="role" value="" title="码农" checked>
|
||||
<input type="radio" name="role" value="" title="端水">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">其它信息：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="other" placeholder="" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"> </label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="" title="同意" lay-skin="primary" checked>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'form'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, form = layui.form
|
||||
|
||||
form.render(null, 'component-form-element')
|
||||
element.render('breadcrumb', 'breadcrumb')
|
||||
|
||||
form.on('submit(component-form-element)', function (data) {
|
||||
layer.alert(layui.util.escape(JSON.stringify(data.field)))
|
||||
return false
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,298 +0,0 @@
|
||||
<title>表单组合</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>表单</cite></a>
|
||||
<a><cite>表单组合</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">表单组合</div>
|
||||
<div class="layui-card-body" style="padding: 15px;">
|
||||
<form class="layui-form" action="" lay-filter="component-form-group">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证必填项</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证手机</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">多规则验证</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="number" lay-verify="required|number" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="date" id="LAY-component-form-group-date" lay-verify="date"
|
||||
placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证链接</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证身份证</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">自定义验证</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="pass" placeholder="请输入密码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<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">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">分组选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">搜索选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="modules" 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>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">联动选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-inline">
|
||||
<select name="quiz1">
|
||||
<option value="">请选择省</option>
|
||||
<option value="浙江" selected="">浙江省</option>
|
||||
<option value="你的工号">江西省</option>
|
||||
<option value="你最喜欢的老师">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<select name="quiz2">
|
||||
<option value="">请选择市</option>
|
||||
<option value="杭州">杭州</option>
|
||||
<option value="宁波" disabled="">宁波</option>
|
||||
<option value="温州">温州</option>
|
||||
<option value="温州">台州</option>
|
||||
<option value="温州">绍兴</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<select name="quiz3">
|
||||
<option value="">请选择县/区</option>
|
||||
<option value="西湖区">西湖区</option>
|
||||
<option value="余杭区">余杭区</option>
|
||||
<option value="拱墅区">临安市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读" checked="">
|
||||
<input type="checkbox" name="like[game]" title="游戏">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" pane="">
|
||||
<label class="layui-form-label">原始复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
|
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关-默认关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关-默认开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked="" name="open" lay-skin="switch"
|
||||
lay-filter="component-form-switchTest" lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">普通文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="text" placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-footer">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'form', 'laydate'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, layer = layui.layer
|
||||
, laydate = layui.laydate
|
||||
, form = layui.form
|
||||
|
||||
form.render(null, 'component-form-group')
|
||||
|
||||
laydate.render({
|
||||
elem: '#LAY-component-form-group-date'
|
||||
})
|
||||
|
||||
/* 自定义验证规则 */
|
||||
form.verify({
|
||||
title: function (value) {
|
||||
if (value.length < 5) {
|
||||
return '标题至少得5个字符啊'
|
||||
}
|
||||
}
|
||||
, pass: [/(.+){6,12}$/, '密码必须6到12位']
|
||||
, content: function (value) {
|
||||
layedit.sync(editIndex)
|
||||
}
|
||||
})
|
||||
|
||||
/* 指定开关 */
|
||||
form.on('switch(component-form-switchTest)', function (data) {
|
||||
layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
|
||||
offset: '6px'
|
||||
})
|
||||
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
|
||||
})
|
||||
|
||||
/* 提交 */
|
||||
form.on('submit(component-form-demo1)', function (data) {
|
||||
layer.alert(layui.util.escape(JSON.stringify(data.field)), {
|
||||
title: '最终的提交信息'
|
||||
})
|
||||
return false
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,85 +0,0 @@
|
||||
<title>全端复杂组合</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>栅格</cite></a>
|
||||
<a><cite>全端复杂组合</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-grid-all .layui-card-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-grid-all">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
|
||||
<!-- 填充内容 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,123 +0,0 @@
|
||||
<title>等比例列表排列</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>栅格</cite></a>
|
||||
<a><cite>等比例列表排列</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-grid-list .demo-list .layui-card {
|
||||
height: 267px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-grid-list">
|
||||
<div class="layui-row layui-col-space10 demo-list">
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<!-- 填充内容 -->
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||
<div class="layui-card">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,85 +0,0 @@
|
||||
<title>移动桌面组合</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>栅格</cite></a>
|
||||
<a><cite>移动桌面组合</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-grid-mobile-pc .layui-card-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-grid-mobile-pc">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6 layui-col-md8">
|
||||
<!-- 填充内容 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,117 +0,0 @@
|
||||
<title>按移动端排列</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>栅格</cite></a>
|
||||
<a><cite>按移动端排列</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-grid-mobile .layui-card-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-grid-mobile">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6">
|
||||
<!-- 填充内容 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,92 +0,0 @@
|
||||
<title>九宫格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>栅格</cite></a>
|
||||
<a><cite>九宫格</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-grid-speed-dial .layui-card-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#LAY-component-grid-speed-dial .layui-card-body:hover {
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-grid-speed-dial">
|
||||
<div class="layui-row layui-col-space1">
|
||||
<div class="layui-col-xs4">
|
||||
<!-- 填充内容 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">7</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
|
||||
element.render('breadcrumb', 'breadcrumb')
|
||||
|
||||
//窗口尺寸改变事件，控制宽度相同
|
||||
admin.resize(function () {
|
||||
var cardBody = $('#LAY-component-grid-speed-dial .layui-card-body')
|
||||
cardBody.height(cardBody.width())
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,147 +0,0 @@
|
||||
<title>低于桌面堆叠排列</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>栅格</cite></a>
|
||||
<a><cite>低于桌面堆叠排列</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-grid-stack .layui-card-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-grid-stack">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md4">
|
||||
<!-- 填充内容 -->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, table = layui.table
|
||||
, element = layui.element
|
||||
|
||||
element.render('breadcrumb', 'breadcrumb')
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,340 +0,0 @@
|
||||
<title>layDate 功能演示一</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>日期时间</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">常规用法</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">中文版</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-normal-cn"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">国际版</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-normal-en"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</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" pad15>
|
||||
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-type-year"
|
||||
placeholder="yyyy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-type-month"
|
||||
placeholder="yyyy-MM">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-type-date"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-type-time"
|
||||
placeholder="HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-type-datetime"
|
||||
placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</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" pad15>
|
||||
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-range-date"
|
||||
placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-range-year"
|
||||
placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-range-month"
|
||||
placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-range-time"
|
||||
placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-range-datetime"
|
||||
placeholder=" - ">
|
||||
</div>
|
||||
</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" pad15>
|
||||
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-format-date1"
|
||||
placeholder="yyyy年MM月dd日">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-format-date2"
|
||||
placeholder="dd/MM/yyyy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择月份</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-format-month"
|
||||
placeholder="yyyyMM">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-format-time"
|
||||
placeholder="H点m分">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-format-range1"
|
||||
placeholder=" ~ ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-format-range2"
|
||||
placeholder="开始 到 结束">
|
||||
</div>
|
||||
</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" pad15>
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input test-laydate-item" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input test-laydate-item" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input test-laydate-item" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'laydate'], function () {
|
||||
var laydate = layui.laydate
|
||||
|
||||
//示例代码
|
||||
|
||||
//常规用法
|
||||
laydate.render({
|
||||
elem: '#test-laydate-normal-cn'
|
||||
})
|
||||
|
||||
//国际版
|
||||
laydate.render({
|
||||
elem: '#test-laydate-normal-en'
|
||||
, lang: 'en'
|
||||
})
|
||||
|
||||
//年选择器
|
||||
laydate.render({
|
||||
elem: '#test-laydate-type-year'
|
||||
, type: 'year'
|
||||
})
|
||||
|
||||
//年月选择器
|
||||
laydate.render({
|
||||
elem: '#test-laydate-type-month'
|
||||
, type: 'month'
|
||||
})
|
||||
|
||||
//日期选择器
|
||||
laydate.render({
|
||||
elem: '#test-laydate-type-date'
|
||||
//,type: 'date' //type 默认为 date，所以可不填
|
||||
})
|
||||
|
||||
//时间选择器
|
||||
laydate.render({
|
||||
elem: '#test-laydate-type-time'
|
||||
, type: 'time'
|
||||
})
|
||||
|
||||
//日期时间选择器
|
||||
laydate.render({
|
||||
elem: '#test-laydate-type-datetime'
|
||||
, type: 'datetime'
|
||||
})
|
||||
|
||||
//日期范围
|
||||
laydate.render({
|
||||
elem: '#test-laydate-range-date'
|
||||
, range: true
|
||||
})
|
||||
|
||||
//年范围
|
||||
laydate.render({
|
||||
elem: '#test-laydate-range-year'
|
||||
, type: 'year'
|
||||
, range: true
|
||||
})
|
||||
|
||||
//年月范围
|
||||
laydate.render({
|
||||
elem: '#test-laydate-range-month'
|
||||
, type: 'month'
|
||||
, range: true
|
||||
})
|
||||
|
||||
//时间范围
|
||||
laydate.render({
|
||||
elem: '#test-laydate-range-time'
|
||||
, type: 'time'
|
||||
, range: true
|
||||
})
|
||||
|
||||
//日期时间范围
|
||||
laydate.render({
|
||||
elem: '#test-laydate-range-datetime'
|
||||
, type: 'datetime'
|
||||
, range: true
|
||||
})
|
||||
|
||||
//自定义格式
|
||||
laydate.render({
|
||||
elem: '#test-laydate-format-date1'
|
||||
, format: 'yyyy年MM月dd日'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-format-date2'
|
||||
, format: 'dd/MM/yyyy'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-format-month'
|
||||
, type: 'month'
|
||||
, format: 'yyyyMM'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-format-time'
|
||||
, type: 'time'
|
||||
, format: 'H点m分'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-format-range1'
|
||||
, range: '~'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-format-range2'
|
||||
, type: 'datetime'
|
||||
, range: '到'
|
||||
, format: 'yyyy年M月d日H时m分s秒'
|
||||
})
|
||||
|
||||
//同时绑定多个
|
||||
lay('.test-laydate-item').each(function () {
|
||||
laydate.render({
|
||||
elem: this
|
||||
, trigger: 'click'
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,287 +0,0 @@
|
||||
<title>layDate 功能演示二</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>日期时间</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">公历节日和自定义重要日子</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">开启公历节日</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-mark"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义重要日</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-mark-custom"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</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" pad15>
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">限定可选日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-limit1"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">前后若干天可选</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-limit2"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">限定可选时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-limit3"
|
||||
placeholder="HH:mm:ss">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">
|
||||
这里以控制在9:30-17:30为例
|
||||
</div>
|
||||
</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" pad15>
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">初始赋值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-init-value"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">选中后的回调</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-call-done"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期切换的回调</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-call-change"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">不出现底部栏</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-showBottom"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">只出现确定按钮</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-confirm"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义事件</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-trigger1"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="test-laydate-trigger2-1">点我触发</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-trigger2"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="test-laydate-trigger3-1">双击我触发</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-trigger3"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期只读</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-readonly" readonly=""
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">非input元素</label>
|
||||
<div class="layui-input-inline">
|
||||
<div id="test-laydate-normElem"
|
||||
style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'laydate'], function () {
|
||||
var laydate = layui.laydate
|
||||
|
||||
//示例代码
|
||||
|
||||
//开启公历节日
|
||||
laydate.render({
|
||||
elem: '#test-laydate-mark'
|
||||
, calendar: true
|
||||
})
|
||||
|
||||
//自定义重要日
|
||||
laydate.render({
|
||||
elem: '#test-laydate-mark-custom'
|
||||
, mark: {
|
||||
'0-10-14': '生日'
|
||||
, '0-12-31': '跨年'
|
||||
, '0-0-10': '工资'
|
||||
, '0-0-15': '月中'
|
||||
, '2018-8-8': ''
|
||||
, '2099-10-14': '呵呵'
|
||||
}
|
||||
, done: function (value, date) {
|
||||
if (date.year === 2018 && date.month === 8 && date.date === 8) {
|
||||
layer.msg('北京奥运会十周年，时间都去哪儿了')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//限定可选日期
|
||||
var ins22 = laydate.render({
|
||||
elem: '#test-laydate-limit1'
|
||||
, min: '2016-10-14'
|
||||
, max: '2080-10-14'
|
||||
, ready: function () {
|
||||
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14')
|
||||
}
|
||||
})
|
||||
|
||||
//前后若干天可选，这里以7天为例
|
||||
laydate.render({
|
||||
elem: '#test-laydate-limit2'
|
||||
, min: -7
|
||||
, max: 7
|
||||
})
|
||||
|
||||
//限定可选时间
|
||||
laydate.render({
|
||||
elem: '#test-laydate-limit3'
|
||||
, type: 'time'
|
||||
, min: '09:30:00'
|
||||
, max: '17:30:00'
|
||||
, btns: ['clear', 'confirm']
|
||||
})
|
||||
|
||||
//初始赋值
|
||||
laydate.render({
|
||||
elem: '#test-laydate-init-value'
|
||||
, value: '1989-10-14'
|
||||
})
|
||||
|
||||
//选中后的回调
|
||||
laydate.render({
|
||||
elem: '#test-laydate-call-done'
|
||||
, done: function (value, date) {
|
||||
layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date))
|
||||
}
|
||||
})
|
||||
|
||||
//日期切换的回调
|
||||
laydate.render({
|
||||
elem: '#test-laydate-call-change'
|
||||
, change: function (value, date) {
|
||||
layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date))
|
||||
}
|
||||
})
|
||||
//不出现底部栏
|
||||
laydate.render({
|
||||
elem: '#test-laydate-showBottom'
|
||||
, showBottom: false
|
||||
})
|
||||
|
||||
//只出现确定按钮
|
||||
laydate.render({
|
||||
elem: '#test-laydate-confirm'
|
||||
, btns: ['confirm']
|
||||
})
|
||||
|
||||
//自定义事件
|
||||
laydate.render({
|
||||
elem: '#test-laydate-trigger1'
|
||||
, trigger: 'mousedown'
|
||||
})
|
||||
|
||||
//点我触发
|
||||
laydate.render({
|
||||
elem: '#test-laydate-trigger2'
|
||||
, eventElem: '#test-laydate-trigger2-1'
|
||||
, trigger: 'click'
|
||||
})
|
||||
|
||||
//双击我触发
|
||||
lay('#test-laydate-trigger3-1').on('dblclick', function () {
|
||||
laydate.render({
|
||||
elem: '#test-laydate-trigger3'
|
||||
, show: true
|
||||
, closeStop: '#test-laydate-trigger3-1'
|
||||
})
|
||||
})
|
||||
|
||||
//日期只读
|
||||
laydate.render({
|
||||
elem: '#test-laydate-readonly'
|
||||
, trigger: 'click'
|
||||
})
|
||||
|
||||
//非input元素
|
||||
laydate.render({
|
||||
elem: '#test-laydate-normElem'
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,73 +0,0 @@
|
||||
<title>layDate 日期组件功能演示</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>日期时间</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">联动范围选择</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">活动日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-start"
|
||||
placeholder="开始日期">
|
||||
</div>
|
||||
<div class="layui-form-mid">
|
||||
-
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-end" placeholder="结束日期">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'laydate'], function () {
|
||||
var laydate = layui.laydate
|
||||
|
||||
//示例代码
|
||||
|
||||
//开始日期
|
||||
var insStart = laydate.render({
|
||||
elem: '#test-laydate-start'
|
||||
, min: 0
|
||||
, done: function (value, date) {
|
||||
//更新结束日期的最小日期
|
||||
insEnd.config.min = lay.extend({}, date, {
|
||||
month: date.month - 1
|
||||
})
|
||||
|
||||
//自动弹出结束日期的选择器
|
||||
insEnd.config.elem[0].focus()
|
||||
}
|
||||
})
|
||||
|
||||
//结束日期
|
||||
var insEnd = laydate.render({
|
||||
elem: '#test-laydate-end'
|
||||
, min: 0
|
||||
, done: function (value, date) {
|
||||
//更新开始日期的最大日期
|
||||
insStart.config.max = lay.extend({}, date, {
|
||||
month: date.month - 1
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,250 +0,0 @@
|
||||
<title>layDate 日期组件功能演示</title>
|
||||
|
||||
<style>
|
||||
.test-laydate-theme-box .layui-inline {
|
||||
margin: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
/* 定制 laydate 皮肤：gbw（由社区提供） */
|
||||
.layui-laydate-hint.laydate-theme-gbw, .layui-laydate.laydate-theme-gbw {
|
||||
border: 1px solid #FFF;
|
||||
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
|
||||
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
|
||||
}
|
||||
|
||||
.layui-laydate.laydate-theme-gbw {
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
z-index: 19850126
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-header {
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding-top: 5px
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-header i {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, .45)
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-header span {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-header i:hover, .laydate-theme-gbw .layui-laydate-header span:hover {
|
||||
color: #40a9ff
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-footer {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
height: 36px
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-footer span:hover {
|
||||
color: #40a9ff
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .laydate-footer-btns {
|
||||
top: 0
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-content th {
|
||||
color: rgba(0, 0, 0, .65)
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-content td {
|
||||
color: rgba(0, 0, 0, .65);
|
||||
border-radius: 2px;
|
||||
-webkit-transition: background .3s ease;
|
||||
-o-transition: background .3s ease;
|
||||
transition: background .3s ease
|
||||
}
|
||||
|
||||
.laydate-theme-gbw .layui-laydate-content .laydate-day-next, .laydate-theme-gbw .layui-laydate-content .laydate-day-prev {
|
||||
color: rgba(0, 0, 0, .25)
|
||||
}
|
||||
|
||||
.layui-laydate.laydate-theme-gbw td.layui-this {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #1890ff;
|
||||
border-radius: 3px;
|
||||
font-weight: 700;
|
||||
color: #1890ff !important
|
||||
}
|
||||
|
||||
.layui-laydate.laydate-theme-gbw li.layui-this {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-radius: 0;
|
||||
border: 0
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>日期时间</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义按钮主题</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
<div class="layui-form" wid100>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">墨绿主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-theme-molv"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">格子主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-theme-grid"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">蓝色主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-theme-blue"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">大红主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-theme-red"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义其它颜色</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-theme-other"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">定制主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="test-laydate-theme-custom"
|
||||
placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</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" pad15>
|
||||
<div class="test-laydate-theme-box">
|
||||
<div class="layui-inline" id="test-laydate-static-n1"></div>
|
||||
<div class="layui-inline" id="test-laydate-static-n2"></div>
|
||||
<div class="layui-inline" id="test-laydate-static-n3"></div>
|
||||
<div class="layui-inline" id="test-laydate-static-n4"></div>
|
||||
<div class="layui-inline" id="test-laydate-static-n5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'laydate'], function () {
|
||||
var laydate = layui.laydate
|
||||
|
||||
//示例代码
|
||||
|
||||
//墨绿主题
|
||||
laydate.render({
|
||||
elem: '#test-laydate-theme-molv'
|
||||
, theme: 'molv'
|
||||
})
|
||||
|
||||
//格子主题
|
||||
laydate.render({
|
||||
elem: '#test-laydate-theme-grid'
|
||||
, theme: 'grid'
|
||||
})
|
||||
|
||||
//蓝色主题
|
||||
laydate.render({
|
||||
elem: '#test-laydate-theme-blue'
|
||||
, theme: '#1E9FFF'
|
||||
})
|
||||
|
||||
//大红主题
|
||||
laydate.render({
|
||||
elem: '#test-laydate-theme-red'
|
||||
, theme: '#c00'
|
||||
})
|
||||
|
||||
//自定义其它颜色
|
||||
laydate.render({
|
||||
elem: '#test-laydate-theme-other'
|
||||
, theme: '#393D49'
|
||||
})
|
||||
|
||||
//定制主题
|
||||
laydate.render({
|
||||
elem: '#test-laydate-theme-custom'
|
||||
, theme: 'gbw'
|
||||
})
|
||||
|
||||
//直接嵌套显示
|
||||
laydate.render({
|
||||
elem: '#test-laydate-static-n1'
|
||||
, position: 'static'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-static-n2'
|
||||
, position: 'static'
|
||||
, lang: 'en'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-static-n3'
|
||||
, type: 'year'
|
||||
, position: 'static'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-static-n4'
|
||||
, type: 'month'
|
||||
, position: 'static'
|
||||
})
|
||||
laydate.render({
|
||||
elem: '#test-laydate-static-n4'
|
||||
, type: 'time'
|
||||
, position: 'static'
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,482 +0,0 @@
|
||||
<title>layer 组件功能演示</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a href="http://www.baidu.com/" target="_blank">layer</a>
|
||||
<a><cite>功能演示</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-layer-list .layui-card-body {
|
||||
padding-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-layer-list">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<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 layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test1">Alert</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test2">Confirm</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test3">Msg</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test4">Tips</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test5">Page</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test6">Iframe</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test7">Prompt</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test8">Tab</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test9">Photos</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">常规使用</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-btn-container layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test10">信息框</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test11">询问层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test12">提示层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test13">墨绿深蓝风</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test14">捕获页</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test15">页面层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test16">自定风格</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test17">tips层1</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test18">tips层2</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test19">iframe层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test20">iframe窗</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test21">加载层1</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test22">加载层2</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test23">prompt层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test8">tab层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test9">相册层</button>
|
||||
</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 layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test26">例1</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test27">例2</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test28">例3</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test29">例4</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test30">例5</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test31">例6</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">页面层与iframe层</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-btn-container layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test33">自定义页面</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test35" id="LAY_layer_iframe_demo">
|
||||
iframe父子通讯
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test36">禁止iframe滚动条</button>
|
||||
</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 layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test37">风格1</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test38">风格2</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test39">风格3</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test40">风格4</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">tips层</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-btn-container layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test41">显示在上</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test42">显示在右</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test43">显示在下</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test44">显示在左</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test45">不销毁上一个tips</button>
|
||||
</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 layadmin-layer-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="test47">最大化弹出</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="test48">显示在正上方</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'layer'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, layer = layui.layer
|
||||
|
||||
element.render()
|
||||
|
||||
/* 触发弹层 */
|
||||
var active = {
|
||||
test1: function () {
|
||||
layer.alert('你好，体验者')
|
||||
}
|
||||
, test2: function () {
|
||||
layer.confirm('您是如何看待前端开发？', {
|
||||
btn: ['重要', '奇葩'] //按钮
|
||||
}, function () {
|
||||
layer.msg('的确很重要', { icon: 1 })
|
||||
}, function () {
|
||||
layer.msg('也可以这样', {
|
||||
time: 20000, //20s后自动关闭
|
||||
btn: ['明白了', '知道了']
|
||||
})
|
||||
})
|
||||
}
|
||||
, test3: function () {
|
||||
layer.msg('玩命提示中')
|
||||
}
|
||||
, test4: function () {
|
||||
layer.tips('Hi，我是一个提示', this, { tips: 1 })
|
||||
}
|
||||
, test5: function () {
|
||||
layer.open({
|
||||
title: '页面层'
|
||||
, type: 1
|
||||
//,skin: 'layui-layer-rim'
|
||||
, shadeClose: true
|
||||
, area: admin.screen() < 2 ? ['80%', '300px'] : ['700px', '500px']
|
||||
, content: '<div style="padding: 20px;">放入任意HTML</div>'
|
||||
})
|
||||
}
|
||||
, test6: function () {
|
||||
layer.open({
|
||||
type: 2
|
||||
, content: 'https://cn.bing.com/'
|
||||
, shadeClose: true
|
||||
, area: admin.screen() < 2 ? ['100%', '80%'] : ['375px', '500px']
|
||||
, maxmin: true
|
||||
})
|
||||
}
|
||||
, test7: function () {
|
||||
layer.prompt({ title: '输入任何口令，并确认', formType: 1 }, function (pass, index) {
|
||||
layer.close(index)
|
||||
layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function (text, index) {
|
||||
layer.close(index)
|
||||
layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text)
|
||||
})
|
||||
})
|
||||
}
|
||||
, test8: function () {
|
||||
layer.tab({
|
||||
area: admin.screen() < 2 ? ['100%', '80%'] : ['600px', '300px'],
|
||||
tab: [{
|
||||
title: 'TAB1',
|
||||
content: '<div style="padding:20px;">内容1</div>'
|
||||
}, {
|
||||
title: 'TAB2',
|
||||
content: '<div style="padding:20px;">内容2</div>'
|
||||
}]
|
||||
})
|
||||
}
|
||||
, test9: function () {
|
||||
$.getJSON('./res/json/layer/photos.js', function (json) {
|
||||
layer.photos({
|
||||
photos: json //格式见API文档手册页
|
||||
})
|
||||
})
|
||||
}
|
||||
, test10: function () {
|
||||
var icon = -1;
|
||||
(function changeIcon () {
|
||||
var index = layer.alert('Hi，你好！ 点击确认更换图标', {
|
||||
icon: icon,
|
||||
shadeClose: true,
|
||||
title: icon === -1 ? '初体验 - layer ' + layer.v : 'icon：' + icon + ' - layer ' + layer.v
|
||||
}, changeIcon)
|
||||
if (8 === ++icon) layer.close(index)
|
||||
}())
|
||||
}
|
||||
, test11: function () {
|
||||
layer.confirm('真的吗？', function (index) {
|
||||
layer.msg('哦')
|
||||
layer.close(index)
|
||||
})
|
||||
}
|
||||
, test12: function () {
|
||||
layer.msg('玩了命提示中')
|
||||
}
|
||||
, test13: function () {
|
||||
//墨绿深蓝风
|
||||
layer.alert('墨绿风格，点击确认看深蓝', {
|
||||
skin: 'layui-layer-molv'
|
||||
, closeBtn: 0
|
||||
}, function () {
|
||||
layer.alert('偶吧深蓝style', {
|
||||
skin: 'layui-layer-lan'
|
||||
, closeBtn: 0
|
||||
, anim: 4
|
||||
})
|
||||
})
|
||||
}
|
||||
, test14: function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
title: false,
|
||||
content: $('.demo-component-layer'),
|
||||
cancel: function () {
|
||||
setTimeout(function () {
|
||||
layer.tips('捕获就是从页面已经存在的元素上，包裹 layer 的结构，从而弹出显示。是不是比较好玩呢？', '.demo-component-layer', {
|
||||
tips: 3, time: 5000
|
||||
})
|
||||
}, 300)
|
||||
}
|
||||
})
|
||||
}
|
||||
, test15: function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
skin: 'layui-layer-rim',
|
||||
area: ['420px', '240px'],
|
||||
content: '<div style="padding: 10px;">任意html内容</div>'
|
||||
})
|
||||
}
|
||||
, test16: function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
skin: 'layui-layer-admin',
|
||||
closeBtn: false,
|
||||
area: '350px',
|
||||
anim: 5,
|
||||
shadeClose: true,
|
||||
content: '<div style="padding:20px;">即传入skin:"样式名"，然后你就可以为所欲为了。你怎么样给她整容都行</div>'
|
||||
})
|
||||
}
|
||||
, test17: function () {
|
||||
layer.tips('Hi，我是tips', this, {
|
||||
tips: 1
|
||||
})
|
||||
}
|
||||
, test18: function () {
|
||||
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', this, {
|
||||
tips: [3, '#2F9688'],
|
||||
time: 4000
|
||||
})
|
||||
}
|
||||
, test19: function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '必应',
|
||||
shadeClose: true,
|
||||
shade: 0.8,
|
||||
area: ['375px', '500px'],
|
||||
content: 'https://cn.bing.com/'
|
||||
})
|
||||
}
|
||||
, test20: function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '必应',
|
||||
shade: false,
|
||||
maxmin: true,
|
||||
area: ['90%', '90%'],
|
||||
content: 'https://cn.bing.com/'
|
||||
})
|
||||
}
|
||||
, test21: function () {
|
||||
var ii = layer.load(0, { shade: false })
|
||||
setTimeout(function () {
|
||||
layer.close(ii)
|
||||
}, 3000)
|
||||
}
|
||||
, test22: function () {
|
||||
var iii = layer.load(1, {
|
||||
shade: [0.1, '#fff']
|
||||
})
|
||||
setTimeout(function () {
|
||||
layer.close(iii)
|
||||
}, 3000)
|
||||
}
|
||||
, test23: function () {
|
||||
layer.prompt({ title: '写点什么吧' }, function (value, index) {
|
||||
layer.msg('你写下了：' + value, {
|
||||
icon: 6
|
||||
, shade: 0.9
|
||||
}, function () {
|
||||
layer.close(index)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
, test26: function () {
|
||||
layer.alert('见到你真的很高兴', { icon: 6 })
|
||||
}
|
||||
, test27: function () {
|
||||
layer.msg('一个询问测试？', {
|
||||
time: 0 //不自动关闭
|
||||
, btn: ['确定', '关闭']
|
||||
, yes: function (index) {
|
||||
layer.close(index)
|
||||
layer.msg('自定义按钮 O.o', {
|
||||
icon: 6
|
||||
, time: 0
|
||||
, btn: ['按钮-1', '按钮-2', '按钮-3']
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
, test28: function () {
|
||||
layer.msg('这是最常用的吧')
|
||||
}
|
||||
, test29: function () {
|
||||
layer.msg('并不十分开心。。', { icon: 5 })
|
||||
}
|
||||
, test30: function () {
|
||||
layer.msg('玩命卖萌中', function () {
|
||||
layer.msg('卖完了')
|
||||
})
|
||||
}
|
||||
, test31: function () {
|
||||
layer.confirm('真的删除吗？', function () {
|
||||
layer.msg('正在删除', { icon: 16 }, function () {
|
||||
layer.msg('成功删除', { icon: 1 })
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
, test33: function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shadeClose: true,
|
||||
skin: 'yourClass',
|
||||
content: '<div style="padding: 20px; width: 260px; height: 180px;">自定义HTML内容</div>'
|
||||
})
|
||||
}
|
||||
|
||||
, test35: function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
area: ['700px', '450px'],
|
||||
fixed: false,
|
||||
maxmin: true,
|
||||
content: layui.setter.paths.base + 'views/iframe/layer/iframe.html'
|
||||
})
|
||||
}
|
||||
, test36: function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
area: ['360px', '500px'],
|
||||
skin: 'layui-layer-rim',
|
||||
content: ['https://cn.bing.com/', 'no']
|
||||
})
|
||||
}
|
||||
, test37: function () {
|
||||
layer.load()
|
||||
setTimeout(function () {
|
||||
layer.closeAll('loading')
|
||||
}, 2000)
|
||||
}
|
||||
, test38: function () {
|
||||
layer.load(1)
|
||||
setTimeout(function () {
|
||||
layer.closeAll('loading')
|
||||
}, 2000)
|
||||
}
|
||||
, test39: function () {
|
||||
layer.load(2)
|
||||
setTimeout(function () {
|
||||
layer.closeAll('loading')
|
||||
}, 2000)
|
||||
}
|
||||
, test40: function () {
|
||||
layer.msg('加载中', {
|
||||
icon: 16
|
||||
, shade: 0.01
|
||||
})
|
||||
}
|
||||
, test41: function () {
|
||||
layer.tips('上', this, {
|
||||
tips: [1, '#000']
|
||||
})
|
||||
}
|
||||
, test42: function () {
|
||||
layer.tips('默认就是向右的，3秒后关闭', this)
|
||||
}
|
||||
, test43: function () {
|
||||
layer.tips('下', this, {
|
||||
tips: 3
|
||||
})
|
||||
}
|
||||
, test44: function () {
|
||||
layer.tips('在很久很久以前，在很久很久以前，在很久很久以前……', this, {
|
||||
tips: [4, '#78BA32']
|
||||
})
|
||||
}
|
||||
, test45: function () {
|
||||
layer.tips('不会销毁之前的', this, { tipsMore: true })
|
||||
}
|
||||
|
||||
, test47: function () {
|
||||
var index = layer.open({
|
||||
type: 2,
|
||||
content: 'http://baidu.com',
|
||||
area: ['300px', '300px'],
|
||||
maxmin: true
|
||||
})
|
||||
layer.full(index)
|
||||
}
|
||||
, test48: function () {
|
||||
layer.msg('灵活运用 offset', {
|
||||
offset: 't',
|
||||
anim: 6
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('#LAY-component-layer-list .layadmin-layer-demo .layui-btn').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] && active[type].call(this)
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,277 +0,0 @@
|
||||
<title>layer 组件特殊示例</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a href="http://www.baidu.com/" target="_blank">layer</a>
|
||||
<a><cite>特殊示例</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-layer-special-demo .layui-card-body {
|
||||
padding-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-layer-special-demo">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<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 layadmin-layer-demo">
|
||||
<button data-method="setTop" class="layui-btn layui-btn-primary">多窗口模式，层叠置顶 / Esc
|
||||
关闭
|
||||
</button>
|
||||
<button data-method="confirmTrans" class="layui-btn layui-btn-primary">配置一个透明的询问框
|
||||
</button>
|
||||
<button data-method="notice" class="layui-btn layui-btn-primary">示范一个公告层</button>
|
||||
</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 layadmin-layer-demo">
|
||||
<button data-method="offset" data-type="t" class="layui-btn layui-btn-primary">上弹出</button>
|
||||
<button data-method="offset" data-type="r" class="layui-btn layui-btn-primary">右弹出</button>
|
||||
<button data-method="offset" data-type="b" class="layui-btn layui-btn-primary">下弹出</button>
|
||||
<button data-method="offset" data-type="l" class="layui-btn layui-btn-primary">左弹出</button>
|
||||
<button data-method="offset" data-type="lt" class="layui-btn layui-btn-primary">左上弹出
|
||||
</button>
|
||||
<button data-method="offset" data-type="lb" class="layui-btn layui-btn-primary">左下弹出
|
||||
</button>
|
||||
<button data-method="offset" data-type="rt" class="layui-btn layui-btn-primary">右上弹出
|
||||
</button>
|
||||
<button data-method="offset" data-type="rb" class="layui-btn layui-btn-primary">右下弹出
|
||||
</button>
|
||||
<button data-method="offset" data-type="auto" class="layui-btn layui-btn-primary">居中弹出
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">抽屉</div>
|
||||
<div class="layui-card-body">
|
||||
<p style="line-height: 32px;">从页面四个边缘弹出（抽屉效果）：</p>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-t">从上往下
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-r">从右往左
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-b">从下往上
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-l">从左往右
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
var admin = layui.admin
|
||||
var element = layui.element
|
||||
var util = layui.util
|
||||
var router = layui.router()
|
||||
|
||||
element.render()
|
||||
|
||||
var active = {
|
||||
setTop: function () {
|
||||
var that = this
|
||||
//多窗口模式，层叠置顶
|
||||
layer.open({
|
||||
type: 1 //此处以iframe举例
|
||||
,
|
||||
title: '当你选择该窗体时，即会在最顶端'
|
||||
,
|
||||
area: ['390px', '260px']
|
||||
,
|
||||
shade: 0
|
||||
,
|
||||
maxmin: true
|
||||
,
|
||||
offset: [ //为了演示，随机坐标
|
||||
Math.random() * ($(window).height() - 300)
|
||||
, Math.random() * ($(window).width() - 390)
|
||||
]
|
||||
,
|
||||
content: '<div style="padding: 15px;">内容标记：' + new Date().getTime() + '，按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口，你需要像 Window 窗体那样，点击某个窗口，该窗体就置顶在上面，那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>'
|
||||
|
||||
,
|
||||
btn: ['继续弹出', '全部关闭'] //只是为了演示
|
||||
,
|
||||
yes: function () {
|
||||
$(that).click()
|
||||
}
|
||||
,
|
||||
btn2: function () {
|
||||
layer.closeAll()
|
||||
}
|
||||
|
||||
,
|
||||
zIndex: layer.zIndex //重点1
|
||||
,
|
||||
success: function (layero, index) {
|
||||
layer.setTop(layero) //重点2. 保持选中窗口置顶
|
||||
|
||||
//记录索引，以便按 esc 键关闭。事件见代码最末尾处。
|
||||
layer.escIndex = layer.escIndex || []
|
||||
layer.escIndex.unshift(index)
|
||||
//选中当前层时，将当前层索引放置在首位
|
||||
layero.on('mousedown', function () {
|
||||
var _index = layer.escIndex.indexOf(index)
|
||||
if (_index !== -1) {
|
||||
layer.escIndex.splice(_index, 1) //删除原有索引
|
||||
}
|
||||
layer.escIndex.unshift(index) //将索引插入到数组首位
|
||||
})
|
||||
}
|
||||
,
|
||||
end: function () {
|
||||
//更新索引
|
||||
if (typeof layer.escIndex === 'object') {
|
||||
layer.escIndex.splice(0, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
, confirmTrans: function () {
|
||||
layer.closeAll()
|
||||
layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
|
||||
time: 20 * 1000,
|
||||
btn: ['明白了', '知道了', '哦']
|
||||
})
|
||||
}
|
||||
, notice: function () {
|
||||
layer.closeAll()
|
||||
layer.open({
|
||||
type: 1
|
||||
,
|
||||
title: false
|
||||
,
|
||||
closeBtn: false
|
||||
,
|
||||
area: '300px;'
|
||||
,
|
||||
shade: 0.8
|
||||
,
|
||||
id: 'LAY_layuipro'
|
||||
,
|
||||
btn: ['火速围观', '残忍拒绝']
|
||||
,
|
||||
btnAlign: 'c'
|
||||
,
|
||||
moveType: 1 //拖拽模式，0或者1
|
||||
,
|
||||
content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
|
||||
,
|
||||
success: function (layero) {
|
||||
var btn = layero.find('.layui-layer-btn')
|
||||
btn.find('.layui-layer-btn0').attr({
|
||||
href: ''
|
||||
, target: '_blank'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
, offset: function (othis) {
|
||||
var type = othis.data('type')
|
||||
, text = othis.text()
|
||||
|
||||
layer.open({
|
||||
type: 1
|
||||
, offset: type
|
||||
, id: 'layerDemo' + type
|
||||
, content: '<div style="padding: 20px 100px;">' + text + '</div>'
|
||||
, btn: '关闭全部'
|
||||
, btnAlign: 'c'
|
||||
, shade: 0
|
||||
, yes: function () {
|
||||
layer.closeAll()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('#LAY-component-layer-special-demo .layadmin-layer-demo .layui-btn').on('click', function () {
|
||||
var othis = $(this), method = othis.data('method')
|
||||
active[method] ? active[method].call(this, othis) : ''
|
||||
})
|
||||
|
||||
//多窗口模式 - esc 键
|
||||
$(document).on('keyup', function (e) {
|
||||
if (e.keyCode === 27) {
|
||||
layer.close(layer.escIndex ? layer.escIndex[0] : 0)
|
||||
}
|
||||
})
|
||||
|
||||
// util 事件
|
||||
util.on('lay-on', {
|
||||
'test-offset-t': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 't',
|
||||
anim: 'slideDown', // 从上往下
|
||||
area: ['100%', '160px'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-t',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
})
|
||||
},
|
||||
'test-offset-r': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'r',
|
||||
anim: 'slideLeft', // 从右往左
|
||||
area: ['320px', '100%'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-r',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
})
|
||||
},
|
||||
'test-offset-b': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'b',
|
||||
anim: 'slideUp', // 从下往上
|
||||
area: ['100%', '160px'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-b',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
})
|
||||
},
|
||||
'test-offset-l': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'l',
|
||||
anim: 'slideRight', // 从左往右
|
||||
area: ['320px', '100%'],
|
||||
shade: 0.1,
|
||||
shadeClose: true,
|
||||
id: 'ID-demo-layer-direction-l',
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,123 +0,0 @@
|
||||
<title>layer 组件风格定制</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a href="http://www.baidu.com/" target="_blank">layer</a>
|
||||
<a><cite>风格定制</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-layer-theme .layui-card-body {
|
||||
padding-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-layer-theme">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">Windows 10 风格</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
|
||||
Windows 10 风格信息框 <span class="layui-badge-dot"></span>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
|
||||
Win10 风格页面层 <span class="layui-badge-dot"></span>
|
||||
</button>
|
||||
</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 layadmin-layer-demo">
|
||||
<button data-type="test1" class="layui-btn layui-btn-primary">layuiAdmin 风格</button>
|
||||
<button data-type="test2" class="layui-btn layui-btn-primary">右侧呼出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
var admin = layui.admin
|
||||
var element = layui.element
|
||||
var util = layui.util
|
||||
var router = layui.router()
|
||||
|
||||
element.render()
|
||||
|
||||
var active = {
|
||||
test1: function () {
|
||||
admin.popup({
|
||||
title: 'layuiAdmin'
|
||||
, shade: 0
|
||||
, anim: -1
|
||||
, area: ['280px', '150px']
|
||||
, id: 'layadmin-layer-skin-test'
|
||||
, skin: 'layui-anim layui-anim-upbit'
|
||||
, content: '内容'
|
||||
})
|
||||
}
|
||||
, test2: function () {
|
||||
admin.popupRight({
|
||||
id: 'LAY_adminPopupLayerTest'
|
||||
, success: function () {
|
||||
$('#' + this.id).html('<div style="padding: 20px;">放入内容</div>')
|
||||
//admin.view(this.id).render('system/xxx')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('#LAY-component-layer-theme .layadmin-layer-demo .layui-btn').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] && active[type].call(this)
|
||||
})
|
||||
|
||||
// util 事件
|
||||
util.on('lay-on', {
|
||||
'test-skin-win10': function () {
|
||||
layer.alert('Windows 10 风格主题', {
|
||||
skin: 'layui-layer-win10', // 2.8+
|
||||
shade: 0.01,
|
||||
btn: ['确定', '取消']
|
||||
})
|
||||
},
|
||||
'test-skin-win10-page': function () {
|
||||
// 此处以一个简单的 Win10 风格记事本为例
|
||||
layer.open({
|
||||
type: 1, // 页面层类型
|
||||
skin: 'layui-layer-win10', // 2.8+
|
||||
shade: 0.01,
|
||||
area: ['50%', '60%'],
|
||||
maxmin: true,
|
||||
title: '*无标题 - 记事本',
|
||||
content: [
|
||||
'<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
|
||||
// 自定义菜单，此处仅作样式演示，具体功能可自主实现
|
||||
[
|
||||
'<a href="javascript:;">文件(F)</a>',
|
||||
'<a href="javascript:;" >编辑(E)</a> ',
|
||||
'<a href="javascript:;" >格式(O)</a> ',
|
||||
'<a href="javascript:;" >查看(V)</a> ',
|
||||
'<a href="javascript:;" >帮助(H)</a> ',
|
||||
].join(' '),
|
||||
'</div>',
|
||||
'<textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;"></textarea>'
|
||||
].join('')
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,156 +0,0 @@
|
||||
<title>功能演示1 - 通用分页组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>分页演示一</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">总页数低于页码总数</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-laypage-demo0"></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="test-laypage-demo1"></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="test-laypage-demo2"></div>
|
||||
<div id="test-laypage-demo2-1"></div>
|
||||
<div id="test-laypage-demo2-2"></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="test-laypage-demo3"></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="test-laypage-demo4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启HASH</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-laypage-demo5"></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="test-laypage-demo6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'laypage'], function () {
|
||||
var laypage = layui.laypage
|
||||
|
||||
//总页数低于页码总数
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo0'
|
||||
, count: 50 //数据总数
|
||||
})
|
||||
|
||||
//总页数大于页码总数
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo1'
|
||||
, count: 70 //数据总数
|
||||
, jump: function (obj) {
|
||||
console.log(obj)
|
||||
}
|
||||
})
|
||||
|
||||
//自定义样式
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo2'
|
||||
, count: 100
|
||||
, theme: '#1E9FFF'
|
||||
})
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo2-1'
|
||||
, count: 100
|
||||
, theme: '#FF5722'
|
||||
})
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo2-2'
|
||||
, count: 100
|
||||
, theme: '#FFB800'
|
||||
})
|
||||
|
||||
//自定义首页、尾页、上一页、下一页文本
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo3'
|
||||
, count: 100
|
||||
, first: '首页'
|
||||
, last: '尾页'
|
||||
, prev: '<em>←</em>'
|
||||
, next: '<em>→</em>'
|
||||
})
|
||||
|
||||
//不显示首页尾页
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo4'
|
||||
, count: 100
|
||||
, first: false
|
||||
, last: false
|
||||
})
|
||||
|
||||
//开启HASH
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo5'
|
||||
, count: 500
|
||||
, curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
|
||||
, hash: 'fenye' //自定义hash值
|
||||
})
|
||||
|
||||
//只显示上一页、下一页
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo6'
|
||||
, count: 50
|
||||
, layout: ['prev', 'next']
|
||||
, jump: function (obj, first) {
|
||||
if (!first) {
|
||||
layer.msg('第 ' + obj.curr + ' 页')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,156 +0,0 @@
|
||||
<title>功能演示2 - 通用分页组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>分页演示二</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">显示完整功能</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-laypage-demo7"></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="test-laypage-demo8"></div>
|
||||
<div id="test-laypage-demo9"></div>
|
||||
<div id="test-laypage-demo10"></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="test-laypage-demo11"></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="test-laypage-demo20"></div>
|
||||
<ul id="test-laypage-biuuu_city_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'laypage'], function () {
|
||||
var laypage = layui.laypage
|
||||
|
||||
//完整功能
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo7'
|
||||
, count: 100
|
||||
, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
|
||||
, jump: function (obj) {
|
||||
console.log(obj)
|
||||
}
|
||||
})
|
||||
|
||||
//自定义排版
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo8'
|
||||
, count: 1000
|
||||
, layout: ['limit', 'prev', 'page', 'next']
|
||||
})
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo9'
|
||||
, count: 1000
|
||||
, layout: ['prev', 'next', 'page']
|
||||
})
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo10'
|
||||
, count: 1000
|
||||
, layout: ['page', 'count']
|
||||
})
|
||||
|
||||
//自定义每页条数的选择项
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo11'
|
||||
, count: 1000
|
||||
, limit: 100
|
||||
, limits: [100, 300, 500]
|
||||
})
|
||||
|
||||
//将一段数组分页展示
|
||||
|
||||
//测试数据
|
||||
var testLayPageData = [
|
||||
'北京',
|
||||
'上海',
|
||||
'广州',
|
||||
'深圳',
|
||||
'杭州',
|
||||
'长沙',
|
||||
'合肥',
|
||||
'宁夏',
|
||||
'成都',
|
||||
'西安',
|
||||
'南昌',
|
||||
'上饶',
|
||||
'沈阳',
|
||||
'济南',
|
||||
'厦门',
|
||||
'福州',
|
||||
'九江',
|
||||
'宜春',
|
||||
'赣州',
|
||||
'宁波',
|
||||
'绍兴',
|
||||
'无锡',
|
||||
'苏州',
|
||||
'徐州',
|
||||
'东莞',
|
||||
'佛山',
|
||||
'中山',
|
||||
'成都',
|
||||
'武汉',
|
||||
'青岛',
|
||||
'天津',
|
||||
'重庆',
|
||||
'南京',
|
||||
'九江',
|
||||
'香港',
|
||||
'澳门',
|
||||
'台北'
|
||||
]
|
||||
|
||||
//调用分页
|
||||
laypage.render({
|
||||
elem: 'test-laypage-demo20'
|
||||
, count: testLayPageData.length
|
||||
, jump: function (obj) {
|
||||
//模拟渲染
|
||||
document.getElementById('test-laypage-biuuu_city_list').innerHTML = function () {
|
||||
var arr = []
|
||||
, thisData = testLayPageData.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit)
|
||||
layui.each(thisData, function (index, item) {
|
||||
arr.push('<li>' + item + '</li>')
|
||||
})
|
||||
return arr.join('')
|
||||
}()
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,47 +0,0 @@
|
||||
<title>模板引擎</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>模板引擎</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
.layadmin-trailer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layadmin-trailer">
|
||||
<div style="width: 280px; margin: 0 auto;">
|
||||
<a href="http://www.baidu.com#/demo/laytpl.html" target="_blank" class="layui-btn">
|
||||
正在整理中，你可以先去官网看示例
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,208 +0,0 @@
|
||||
<title>导航</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>导航</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-nav .layui-nav-tree {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-nav">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">水平导航菜单</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layui-nav" lay-filter="component-nav">
|
||||
<li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
|
||||
<li class="layui-nav-item layui-this">
|
||||
<a href="javascript:;">产品</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">选项1</a></dd>
|
||||
<dd><a href="javascript:;">选项2</a></dd>
|
||||
<dd><a href="javascript:;">选项3</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd class="layui-this"><a href="javascript:;">选中项</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">导航带徽章和图片</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layui-nav" lay-filter="component-nav">
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">控制台<span class="layui-badge">9</span></a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-unselect="">
|
||||
<a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">修改信息</a></dd>
|
||||
<dd><a href="javascript:;">安全管理</a></dd>
|
||||
<dd><a href="javascript:;">退了</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">导航主题</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layui-nav layui-bg-cyan" lay-filter="component-nav">
|
||||
<li class="layui-nav-item"><a href="javascript:;">藏青导航</a></li>
|
||||
<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul class="layui-nav layui-bg-green" lay-filter="component-nav">
|
||||
<li class="layui-nav-item"><a href="javascript:;">墨绿导航</a></li>
|
||||
<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul class="layui-nav layui-bg-blue" lay-filter="component-nav">
|
||||
<li class="layui-nav-item"><a href="javascript:;">艳蓝导航</a></li>
|
||||
<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">垂直导航菜单</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="component-nav-active"
|
||||
style="margin-right: 10px;">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a href="javascript:;">默认展开</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">选项一</a></dd>
|
||||
<dd><a href="javascript:;">选项二</a></dd>
|
||||
<dd><a href="javascript:;">选项三</a></dd>
|
||||
<dd><a href="javascript:;">跳转项</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||
</ul>
|
||||
<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="component-nav-active">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a href="javascript:;">默认展开</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">选项一</a></dd>
|
||||
<dd><a href="javascript:;">选项二</a></dd>
|
||||
<dd><a href="javascript:;">选项三</a></dd>
|
||||
<dd><a href="http://www.baidu.com#/admin/" target="_blank">跳转项</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
|
||||
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">面包屑</div>
|
||||
<div class="layui-card-body">
|
||||
<span class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a href="javascript:;">首页</a>
|
||||
<a href="javascript:;">演示</a>
|
||||
<a><cite>导航元素</cite></a>
|
||||
</span>
|
||||
<br>
|
||||
<span class="layui-breadcrumb" lay-separator="-" lay-filter="breadcrumb">
|
||||
<a href="javascript:;">首页</a>
|
||||
<a href="javascript:;">演示</a>
|
||||
<a><cite>导航元素</cite></a>
|
||||
</span>
|
||||
<br>
|
||||
<span class="layui-breadcrumb" lay-separator="\" lay-filter="breadcrumb">
|
||||
<a href="javascript:;">首页</a>
|
||||
<a href="javascript:;">演示</a>
|
||||
<a><cite>导航元素</cite></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
|
||||
element.render('nav', 'component-nav')
|
||||
element.render('nav', 'component-nav-active')
|
||||
|
||||
element.on('nav(component-nav-active)', function (elem) {
|
||||
layer.msg(elem.text())
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,188 +0,0 @@
|
||||
<title>面板</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>面板</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">折叠面板</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-collapse" lay-filter="component-panel">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>
|
||||
有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>
|
||||
因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui
|
||||
认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
|
||||
<br><br>
|
||||
因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">张三是男是女？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>man！ 所以这个问题不要再出现了。。。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
|
||||
<div class="layui-card-header">手风琴折叠</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-collapse" lay-accordion="">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui
|
||||
认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
|
||||
<br>
|
||||
因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>
|
||||
有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>
|
||||
因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">张三是男是女？</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>man！ 所以这个问题不要再出现了。。。</p>
|
||||
</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-collapse" lay-accordion="">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">文豪</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
|
||||
<div class="layui-collapse" lay-accordion="">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">唐代</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
|
||||
<div class="layui-collapse" lay-accordion="">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">杜甫</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
伟大的诗人
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">李白</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>据说是韩国人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">王勃</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>千古绝唱《滕王阁序》</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">宋代</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>比如苏轼、李清照</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">当代</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>比如张三</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">科学家</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>伟大的科学家</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">艺术家</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>浑身散发着艺术细胞</p>
|
||||
</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" style="height: 200px;">
|
||||
就是当前这个
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
element.render('collapse')
|
||||
|
||||
//折叠
|
||||
element.on('collapse(component-panel)', function (data) {
|
||||
layer.msg('展开状态：' + data.show)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,161 +0,0 @@
|
||||
<title>进度条</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>进度条</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
.layui-progress {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-progress">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">默认进度条</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar" lay-percent="50%"></div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-xs6">
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar" lay-percent="50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6">
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar" lay-percent="50%"></div>
|
||||
</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-progress">
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-progress layui-progress-big">
|
||||
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big">
|
||||
<div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big">
|
||||
<div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></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-progress layui-progress-big" lay-showpercent="true"
|
||||
lay-filter="component-progress-demo">
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-container" style="margin-top: 20px; margin-bottom: 0;">
|
||||
<button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
|
||||
<button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
|
||||
</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-progress" lay-showpercent="true">
|
||||
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showpercent="true">
|
||||
<div class="layui-progress-bar" lay-percent="5 / 10"></div>
|
||||
</div>
|
||||
<div class="layui-progress layui-progress-big" lay-showpercent="true">
|
||||
<div class="layui-progress-bar" lay-percent="70%"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
element.render('progress')
|
||||
|
||||
//触发事件
|
||||
var active = {
|
||||
setPercent: function () {
|
||||
//设置50%进度
|
||||
element.progress('component-progress-demo', '50%')
|
||||
}
|
||||
, loading: function (othis) {
|
||||
var DISABLED = 'layui-btn-disabled'
|
||||
if (othis.hasClass(DISABLED)) return
|
||||
|
||||
//模拟loading
|
||||
var n = 0, timer = setInterval(function () {
|
||||
n = n + Math.random() * 10 | 0
|
||||
if (n > 100) {
|
||||
n = 100
|
||||
clearInterval(timer)
|
||||
othis.removeClass(DISABLED)
|
||||
}
|
||||
element.progress('component-progress-demo', n + '%')
|
||||
}, 300 + Math.random() * 1000)
|
||||
|
||||
othis.addClass(DISABLED)
|
||||
}
|
||||
}
|
||||
|
||||
$('#LAY-component-progress .site-demo-active').on('click', function () {
|
||||
var othis = $(this), type = $(this).data('type')
|
||||
active[type] ? active[type].call(this, othis) : ''
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,191 +0,0 @@
|
||||
<title>评分组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>评分组件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">基础效果</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-rate-dome1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">显示文字</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-rate-dome2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">半星效果</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-rate-dome3"></div>
|
||||
<div>
|
||||
<div id="test-rate-dome4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义主题色</div>
|
||||
<div class="layui-card-body">
|
||||
<ul>
|
||||
<li>
|
||||
<div id="test-rate-dome10"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="test-rate-dome11"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="test-rate-dome12"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="test-rate-dome13"></div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="test-rate-dome14"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</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="test-rate-dome9"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义内容</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-rate-dome5"></div>
|
||||
<div>
|
||||
<div id="test-rate-dome6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义长度</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-rate-dome7"></div>
|
||||
<div>
|
||||
<div id="test-rate-dome8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'rate'], function () {
|
||||
var rate = layui.rate
|
||||
//基础效果
|
||||
rate.render({
|
||||
elem: '#test-rate-dome1'
|
||||
})
|
||||
|
||||
//显示文字
|
||||
rate.render({
|
||||
elem: '#test-rate-dome2'
|
||||
, value: 2 //初始值
|
||||
, text: true //开启文本
|
||||
})
|
||||
|
||||
//半星效果
|
||||
rate.render({
|
||||
elem: '#test-rate-dome3'
|
||||
, value: 2.5 //初始值
|
||||
, half: true //开启半星
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test-rate-dome4'
|
||||
, value: 3.5
|
||||
, half: true
|
||||
, text: true
|
||||
})
|
||||
|
||||
//自定义文本
|
||||
rate.render({
|
||||
elem: '#test-rate-dome5'
|
||||
, value: 3
|
||||
, text: true
|
||||
, setText: function (value) { //自定义文本的回调
|
||||
var arrs = {
|
||||
'1': '极差'
|
||||
, '2': '差'
|
||||
, '3': '中等'
|
||||
, '4': '好'
|
||||
, '5': '极好'
|
||||
}
|
||||
this.span.text(arrs[value] || (value + '星'))
|
||||
}
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test-rate-dome6'
|
||||
, value: 1.5
|
||||
, half: true
|
||||
, text: true
|
||||
, setText: function (value) {
|
||||
this.span.text(value)
|
||||
}
|
||||
})
|
||||
|
||||
//自定义长度
|
||||
rate.render({
|
||||
elem: '#test-rate-dome7'
|
||||
, length: 3
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test-rate-dome8'
|
||||
, length: 10
|
||||
, value: 8 //初始值
|
||||
})
|
||||
|
||||
//只读
|
||||
rate.render({
|
||||
elem: '#test-rate-dome9'
|
||||
, value: 4
|
||||
, readonly: true
|
||||
})
|
||||
|
||||
//主题色
|
||||
rate.render({
|
||||
elem: '#test-rate-dome10'
|
||||
, value: 3
|
||||
, theme: '#FF8000' //自定义主题色
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test-rate-dome11'
|
||||
, value: 3
|
||||
, theme: '#16baaa'
|
||||
})
|
||||
|
||||
rate.render({
|
||||
elem: '#test-rate-dome12'
|
||||
, value: 2.5
|
||||
, half: true
|
||||
, theme: '#1E9FFF'
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test-rate-dome13'
|
||||
, value: 2.5
|
||||
, half: true
|
||||
, theme: '#2F4056'
|
||||
})
|
||||
rate.render({
|
||||
elem: '#test-rate-dome14'
|
||||
, value: 2.5
|
||||
, half: true
|
||||
, theme: '#FE0000'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,216 +0,0 @@
|
||||
<title>滑块组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>滑块组件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.test-slider-demo {
|
||||
margin: 45px 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">基础效果</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo1" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">定义初始值</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo2" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置最大最小值</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo3" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置步长</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo4" class="test-slider-demo"></div>
|
||||
<div id="test-slider-demo5" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置提示文本</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo6" class="test-slider-demo"></div>
|
||||
<div id="test-slider-demo7" class="test-slider-demo"></div>
|
||||
<div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启输入框</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo8" class="test-slider-demo"></div>
|
||||
</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="test-slider-demo9" class="test-slider-demo"></div>
|
||||
<div id="test-slider-tips2" style="position:relative; left: 30px; margin-top: -10px;"></div>
|
||||
<div id="test-slider-demo10" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">垂直滑块</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo11" style="margin: 45px 30px; display: inline-block;"></div>
|
||||
<div id="test-slider-demo12" style="margin: 45px 30px; display: inline-block;"></div>
|
||||
<div id="test-slider-demo13" style="margin: 45px 30px; display: inline-block;"></div>
|
||||
<div id="test-slider-demo14" style="margin: 45px 30px; display: inline-block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义颜色</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo15" class="test-slider-demo"></div>
|
||||
<div id="test-slider-demo16" class="test-slider-demo"></div>
|
||||
<div id="test-slider-demo17" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">禁用滑块</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-slider-demo18" class="test-slider-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'slider'], function () {
|
||||
var $ = layui.$
|
||||
, slider = layui.slider
|
||||
|
||||
//默认滑块
|
||||
slider.render({
|
||||
elem: '#test-slider-demo1'
|
||||
})
|
||||
|
||||
//定义初始值
|
||||
slider.render({
|
||||
elem: '#test-slider-demo2'
|
||||
, value: 20 //初始值
|
||||
})
|
||||
|
||||
//设置最大最小值
|
||||
slider.render({
|
||||
elem: '#test-slider-demo3'
|
||||
, min: 20 //最小值
|
||||
, max: 50 //最大值
|
||||
})
|
||||
|
||||
//设置步长
|
||||
slider.render({
|
||||
elem: '#test-slider-demo4'
|
||||
, step: 10 //步长
|
||||
})
|
||||
|
||||
slider.render({
|
||||
elem: '#test-slider-demo5'
|
||||
, step: 10 //步长
|
||||
, showstep: true //开启间隔点
|
||||
})
|
||||
|
||||
//设置提示文本
|
||||
slider.render({
|
||||
elem: '#test-slider-demo6'
|
||||
, min: 20
|
||||
, max: 1000
|
||||
, setTips: function (value) { //自定义提示文本
|
||||
return value + 'GB'
|
||||
}
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo7'
|
||||
, tips: false //关闭默认提示层
|
||||
, change: function (value) {
|
||||
$('#test-slider-tips1').html('当前数值：' + value)
|
||||
}
|
||||
})
|
||||
|
||||
//开启输入框
|
||||
slider.render({
|
||||
elem: '#test-slider-demo8'
|
||||
, input: true //输入框
|
||||
})
|
||||
|
||||
//开启范围选择
|
||||
slider.render({
|
||||
elem: '#test-slider-demo9'
|
||||
, value: 40 //初始值
|
||||
, range: true //范围选择
|
||||
, change: function (vals) {
|
||||
$('#test-slider-tips2').html('开始值：' + vals[0] + '、结尾值：' + vals[1])
|
||||
}
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo10'
|
||||
, value: [30, 60] //初始值
|
||||
, range: true //范围选择
|
||||
})
|
||||
|
||||
//垂直滑块
|
||||
slider.render({
|
||||
elem: '#test-slider-demo11'
|
||||
, type: 'vertical' //垂直滑块
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo12'
|
||||
, value: 30
|
||||
, type: 'vertical' //垂直滑块
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo13'
|
||||
, value: 50
|
||||
, range: true //范围选择
|
||||
, type: 'vertical' //垂直滑块
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo14'
|
||||
, value: 80
|
||||
, input: true //输入框
|
||||
, type: 'vertical' //垂直滑块
|
||||
})
|
||||
|
||||
//自定义颜色
|
||||
slider.render({
|
||||
elem: '#test-slider-demo15'
|
||||
, theme: '#1E9FFF' //主题色
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo16'
|
||||
, value: 50
|
||||
, theme: '#16b777' //主题色
|
||||
})
|
||||
slider.render({
|
||||
elem: '#test-slider-demo17'
|
||||
, value: [30, 70]
|
||||
, range: true
|
||||
, theme: '#FF5722' //主题色
|
||||
})
|
||||
|
||||
//禁用滑块
|
||||
slider.render({
|
||||
elem: '#test-slider-demo18'
|
||||
, value: 35
|
||||
, disabled: true //禁用滑块
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,47 +0,0 @@
|
||||
<title>列宽自动分配 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>列宽自动分配</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">列宽自动分配</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-autowidth"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-autowidth'
|
||||
, url: './res/json/table/user.js'
|
||||
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
||||
, cols: [[
|
||||
{ field: 'id', title: 'ID', sort: true }
|
||||
, { field: 'username', title: '用户名' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
||||
, { field: 'sex', title: '性别', sort: true }
|
||||
, { field: 'city', title: '城市' }
|
||||
, { field: 'sign', title: '签名' }
|
||||
, { field: 'classify', title: '职业', align: 'center' } //单元格内容水平居中
|
||||
, { field: 'experience', title: '积分', sort: true, align: 'right' } //单元格内容水平居中
|
||||
, { field: 'score', title: '评分', sort: true, align: 'right' }
|
||||
, { field: 'wealth', title: '财富', sort: true, align: 'right' }
|
||||
]]
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,54 +0,0 @@
|
||||
<title>开启单元格编辑 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启单元格编辑</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启单元格编辑</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-cellEdit" lay-filter="test-table-cellEdit"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-cellEdit'
|
||||
, url: './res/json/table/demo.js'
|
||||
, cols: [[
|
||||
{ type: 'checkbox' }
|
||||
, { field: 'id', title: 'ID', width: 80, sort: true }
|
||||
, { field: 'username', title: '用户名', width: 120, sort: true, edit: 'text' }
|
||||
, { field: 'email', title: '邮箱', edit: 'text', minWidth: 150 }
|
||||
, { field: 'sex', title: '性别', width: 80, edit: 'text' }
|
||||
, { field: 'city', title: '城市', edit: 'text', minWidth: 100 }
|
||||
, { field: 'experience', title: '积分', sort: true, edit: 'text' }
|
||||
]]
|
||||
})
|
||||
|
||||
//单元格编辑
|
||||
table.on('edit(test-table-cellEdit)', function (obj) {
|
||||
var value = obj.value //得到修改后的值
|
||||
, data = obj.data //得到所在行所有键值
|
||||
, field = obj.field //得到字段
|
||||
layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value, {
|
||||
offset: '15px'
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,65 +0,0 @@
|
||||
<title>单元格事件 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>单元格事件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">单元格事件</div>
|
||||
<div class="layui-card-body">
|
||||
<blockquote class="layui-elem-quote">点击下面表格中的【签名列】，以演示单元格事件</blockquote>
|
||||
<table class="layui-hide" id="test-table-demoEvent" lay-filter="test-table-demoEvent"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-demoEvent'
|
||||
, height: 313
|
||||
, url: './res/json/table/user.js'
|
||||
, cols: [[
|
||||
{ field: 'id', title: 'ID', width: 80 }
|
||||
, { field: 'username', title: '用户名', width: 80 }
|
||||
, { field: 'sign', title: '签名', width: '50%', event: 'setSign', style: 'cursor: pointer;' }
|
||||
, { field: 'experience', title: '积分' }
|
||||
, { field: 'score', title: '评分' }
|
||||
]]
|
||||
})
|
||||
|
||||
//单元格事件
|
||||
table.on('tool(test-table-demoEvent)', function (obj) {
|
||||
var data = obj.data
|
||||
if (obj.event === 'setSign') {
|
||||
layer.prompt({
|
||||
formType: 2
|
||||
, title: '修改 ID 为 [' + data.id + '] 的用户签名'
|
||||
, value: data.sign
|
||||
}, function (value, index) {
|
||||
layer.close(index)
|
||||
|
||||
//这里一般是发送修改的Ajax请求
|
||||
|
||||
//同步更新表格和缓存对应的值
|
||||
obj.update({
|
||||
sign: value
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,139 +0,0 @@
|
||||
<title>赋值已知数据 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>简单用法</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">赋值已知数据</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-data"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
//展示已知数据
|
||||
table.render({
|
||||
elem: '#test-table-data'
|
||||
, cols: [[ //标题栏
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true }
|
||||
, { field: 'username', title: '用户名', width: 120 }
|
||||
, { field: 'email', title: '邮箱', minWidth: 150 }
|
||||
, { field: 'sign', title: '签名', minWidth: 160 }
|
||||
, { field: 'sex', title: '性别', width: 80 }
|
||||
, { field: 'city', title: '城市', width: 100 }
|
||||
, { field: 'experience', title: '积分', width: 80, sort: true }
|
||||
]]
|
||||
, data: [{
|
||||
'id': '10001'
|
||||
, 'username': '杜甫'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '116'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '108'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}, {
|
||||
'id': '10002'
|
||||
, 'username': '李白'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '12'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
, 'LAY_CHECKED': true
|
||||
}, {
|
||||
'id': '10003'
|
||||
, 'username': '王勃'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '65'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}, {
|
||||
'id': '10004'
|
||||
, 'username': '张三'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '777'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}, {
|
||||
'id': '10005'
|
||||
, 'username': '张三'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '86'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}, {
|
||||
'id': '10006'
|
||||
, 'username': '张三'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '12'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}, {
|
||||
'id': '10007'
|
||||
, 'username': '张三'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '16'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}, {
|
||||
'id': '10008'
|
||||
, 'username': '张三'
|
||||
, 'email': 'xianxin@baidu.com'
|
||||
, 'sex': '男'
|
||||
, 'city': '浙江杭州'
|
||||
, 'sign': '人生恰似一场修行'
|
||||
, 'experience': '106'
|
||||
, 'ip': '192.168.0.8'
|
||||
, 'logins': '106'
|
||||
, 'joinTime': '2016-10-14'
|
||||
}]
|
||||
//,skin: 'line' //表格风格
|
||||
, even: true
|
||||
//,page: true //是否显示分页
|
||||
//,limits: [5, 7, 10]
|
||||
//,limit: 5 //每页默认显示的数量
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,51 +0,0 @@
|
||||
<title>固定列 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>固定列</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">固定列</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-fixed"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
, admin = layui.admin
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-fixed'
|
||||
, url: './res/json/table/user.js'
|
||||
, width: admin.screen() > 1 ? 892 : ''
|
||||
, height: 332
|
||||
, cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' }
|
||||
, { field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left' }
|
||||
, { field: 'username', width: 80, title: '用户名' }
|
||||
, { field: 'sex', width: 80, title: '性别', sort: true }
|
||||
, { field: 'city', width: 80, title: '城市' }
|
||||
, { field: 'sign', width: 219, title: '签名' }
|
||||
, { field: 'experience', width: 80, title: '积分', sort: true }
|
||||
, { field: 'score', width: 80, title: '评分', sort: true }
|
||||
, { field: 'classify', width: 80, title: '职业' }
|
||||
, { field: 'wealth', width: 120, title: '财富', sort: true, fixed: 'right' }
|
||||
]]
|
||||
, page: true
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,83 +0,0 @@
|
||||
<title>加入表单元素 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>加入表单元素</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">加入表单元素</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-form"></table>
|
||||
|
||||
<script type="text/html" id="test-table-switchTpl">
|
||||
<!-- 这里的 checked 的状态只是演示 -->
|
||||
<input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男"
|
||||
lay-filter="test-table-sexDemo"
|
||||
value="{{ d.id }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.id==
|
||||
10003 ? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="test-table-checkboxTpl">
|
||||
<!-- 这里的 checked 的状态只是演示 -->
|
||||
<input type="checkbox" name="lock" title="锁定" lay-filter="test-table-lockDemo"
|
||||
value="{{d.id}}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.id== 10006
|
||||
? 'checked' : '' }}>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table', 'form'], function () {
|
||||
var table = layui.table
|
||||
, form = layui.form
|
||||
, $ = layui.$
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-form'
|
||||
, url: './res/json/table/user.js'
|
||||
, cellMinWidth: 80
|
||||
, cols: [[
|
||||
{ type: 'numbers' }
|
||||
, { type: 'checkbox' }
|
||||
, { field: 'id', title: 'ID', width: 100, unresize: true, sort: true }
|
||||
, { field: 'username', title: '用户名' }
|
||||
, { field: 'city', title: '城市' }
|
||||
, { field: 'wealth', title: '财富', minWidth: 120, sort: true }
|
||||
, { field: 'sex', title: '性别', width: 85, templet: '#test-table-switchTpl', unresize: true }
|
||||
, { field: 'lock', title: '是否锁定', width: 110, templet: '#test-table-checkboxTpl', unresize: true }
|
||||
]]
|
||||
, page: true
|
||||
})
|
||||
|
||||
//性别操作
|
||||
form.on('switch(test-table-sexDemo)', function (obj) {
|
||||
var json = JSON.parse(decodeURIComponent($(this).data('json')))
|
||||
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis)
|
||||
|
||||
json = table.clearCacheKey(json)
|
||||
console.log(json) //当前行数据
|
||||
})
|
||||
|
||||
//锁定操作
|
||||
form.on('checkbox(test-table-lockDemo)', function (obj) {
|
||||
var json = JSON.parse(decodeURIComponent($(this).data('json')))
|
||||
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis)
|
||||
|
||||
json = table.clearCacheKey(json)
|
||||
console.log(json) //当前行数据
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,336 +0,0 @@
|
||||
<title>综合演示 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>综合演示</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">综合演示</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-index" lay-filter="test-table-index"></table>
|
||||
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
|
||||
<button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
|
||||
重载测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
|
||||
多行
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
|
||||
单行
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" id="moreTest">
|
||||
更多测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="cityTpl">
|
||||
<select id="demoCity1" class="layui-border" lay-ignore>
|
||||
<option value="浙江杭州">浙江杭州</option>
|
||||
<option value="江西南昌">江西南昌</option>
|
||||
<option value="湖北武汉">湖北武汉</option>
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="barDemo">
|
||||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table', 'dropdown'], function () {
|
||||
var table = layui.table
|
||||
var dropdown = layui.dropdown
|
||||
|
||||
// 创建渲染实例
|
||||
table.render({
|
||||
elem: '#test-table-index'
|
||||
, url: layui.setter.paths.base + 'json/table/demo.js' // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
, toolbar: '#toolbarDemo'
|
||||
, defaultToolbar: ['filter', 'exports', 'print', {
|
||||
title: '帮助'
|
||||
, layEvent: 'LAYTABLE_TIPS'
|
||||
, icon: 'layui-icon-tips'
|
||||
}]
|
||||
, height: 'full-200' // 最大高度减去其他容器已占有的高度差
|
||||
, cellMinWidth: 80
|
||||
, totalRow: true // 开启合计行
|
||||
, page: true
|
||||
, cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' }
|
||||
, { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true, totalRowText: '合计：' }
|
||||
, { field: 'username', width: 80, title: '用户' }
|
||||
, {
|
||||
field: 'email',
|
||||
title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
|
||||
hide: 0,
|
||||
width: 150,
|
||||
edit: 'text'
|
||||
}
|
||||
, { field: 'sex', width: 80, title: '性别', sort: true }
|
||||
, {
|
||||
field: 'city',
|
||||
width: 115,
|
||||
title: '城市',
|
||||
minWidth: 115,
|
||||
templet: '#cityTpl',
|
||||
exportTemplet: function (d, obj) {
|
||||
//console.log(obj)
|
||||
// 处理该字段的导出数据
|
||||
var td = obj.td(this.field) //获取当前 td
|
||||
return td.find('select').val()
|
||||
}
|
||||
}
|
||||
, { field: 'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;' }
|
||||
, { field: 'experience', width: 100, title: '积分', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 😊' }
|
||||
, {
|
||||
field: 'checkin',
|
||||
title: '打卡',
|
||||
width: 100,
|
||||
sort: true,
|
||||
totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'
|
||||
}
|
||||
, { field: 'ip', title: 'IP', width: 120 }
|
||||
, { field: 'joinTime', title: '加入时间', width: 120 }
|
||||
, { fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo' }
|
||||
]]
|
||||
, done: function () {
|
||||
var id = this.id
|
||||
|
||||
// 重载测试
|
||||
dropdown.render({
|
||||
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
, data: [{
|
||||
id: 'reload',
|
||||
title: '重载'
|
||||
}, {
|
||||
id: 'reload-deep',
|
||||
title: '重载 - 参数叠加'
|
||||
}, {
|
||||
id: 'reloadData',
|
||||
title: '仅重载数据'
|
||||
}, {
|
||||
id: 'reloadData-deep',
|
||||
title: '仅重载数据 - 参数叠加'
|
||||
}]
|
||||
// 菜单被点击的事件
|
||||
, click: function (obj) {
|
||||
switch (obj.id) {
|
||||
case 'reload':
|
||||
// 重载 - 默认（参数重置）
|
||||
table.reload('test-table-index', {
|
||||
where: {
|
||||
abc: '123456'
|
||||
//,test: '新的 test2'
|
||||
//,token: '新的 token2'
|
||||
}
|
||||
/*
|
||||
,cols: [[ // 重置表头
|
||||
{type: 'checkbox', fixed: 'left'}
|
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
|
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
]]
|
||||
*/
|
||||
})
|
||||
break
|
||||
case 'reload-deep':
|
||||
// 重载 - 深度（参数叠加）
|
||||
table.reload('test-table-index', {
|
||||
where: {
|
||||
abc: 123
|
||||
, test: '新的 test1'
|
||||
}
|
||||
//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
|
||||
//,cols: ins1.config.cols
|
||||
}, true)
|
||||
break
|
||||
case 'reloadData':
|
||||
// 数据重载 - 参数重置
|
||||
table.reloadData('test-table-index', {
|
||||
where: {
|
||||
abc: '123456'
|
||||
//,test: '新的 test2'
|
||||
//,token: '新的 token2'
|
||||
}
|
||||
, scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增
|
||||
, height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
|
||||
//,url: '404'
|
||||
//,page: {curr: 1, limit: 30} // 重新指向分页
|
||||
})
|
||||
break
|
||||
case 'reloadData-deep':
|
||||
// 数据重载 - 参数叠加
|
||||
table.reloadData('test-table-index', {
|
||||
where: {
|
||||
abc: 123
|
||||
, test: '新的 test1'
|
||||
}
|
||||
}, true)
|
||||
break
|
||||
}
|
||||
layer.msg('可观察 Network 请求参数的变化')
|
||||
}
|
||||
})
|
||||
|
||||
// 更多测试
|
||||
dropdown.render({
|
||||
elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
, data: [{
|
||||
id: 'add',
|
||||
title: '添加'
|
||||
}, {
|
||||
id: 'update',
|
||||
title: '编辑'
|
||||
}, {
|
||||
id: 'delete',
|
||||
title: '删除'
|
||||
}]
|
||||
//菜单被点击的事件
|
||||
, click: function (obj) {
|
||||
var checkStatus = table.checkStatus(id)
|
||||
var data = checkStatus.data // 获取选中的数据
|
||||
switch (obj.id) {
|
||||
case 'add':
|
||||
layer.open({
|
||||
title: '添加',
|
||||
type: 1,
|
||||
area: ['80%', '80%'],
|
||||
content: '<div style="padding: 16px;">自定义表单元素</div>'
|
||||
})
|
||||
break
|
||||
case 'update':
|
||||
if (data.length !== 1) return layer.msg('请选择一行')
|
||||
layer.open({
|
||||
title: '编辑',
|
||||
type: 1,
|
||||
area: ['80%', '80%'],
|
||||
content: '<div style="padding: 16px;">自定义表单元素</div>'
|
||||
})
|
||||
break
|
||||
case 'delete':
|
||||
if (data.length === 0) {
|
||||
return layer.msg('请选择一行')
|
||||
}
|
||||
layer.msg('delete event')
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
, error: function (res, msg) {
|
||||
console.log(res, msg)
|
||||
}
|
||||
})
|
||||
|
||||
// 工具栏事件
|
||||
table.on('toolbar(test-table-index)', function (obj) {
|
||||
var id = obj.config.id
|
||||
var checkStatus = table.checkStatus(id)
|
||||
var othis = lay(this)
|
||||
switch (obj.event) {
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data
|
||||
layer.alert(layui.util.escape(JSON.stringify(data)))
|
||||
break
|
||||
case 'getData':
|
||||
var getData = table.getData(id)
|
||||
console.log(getData)
|
||||
layer.alert(layui.util.escape(JSON.stringify(getData)))
|
||||
break
|
||||
case 'isAll':
|
||||
layer.msg(checkStatus.isAll ? '全选' : '未全选')
|
||||
break
|
||||
case 'multi-row':
|
||||
table.reload('test-table-index', {
|
||||
// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
|
||||
lineStyle: 'height: 95px;'
|
||||
})
|
||||
layer.msg('即通过设置 lineStyle 参数可开启多行')
|
||||
break
|
||||
case 'default-row':
|
||||
table.reload('test-table-index', {
|
||||
lineStyle: null // 恢复单行
|
||||
})
|
||||
layer.msg('已设为单行')
|
||||
break
|
||||
case 'LAYTABLE_TIPS':
|
||||
layer.alert('Table for layui-v' + layui.v)
|
||||
break
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
//触发单元格工具事件
|
||||
table.on('tool(test-table-index)', function (obj) { // 双击 toolDouble
|
||||
var data = obj.data
|
||||
//console.log(obj)
|
||||
if (obj.event === 'del') {
|
||||
layer.confirm('真的删除行么', function (index) {
|
||||
obj.del()
|
||||
layer.close(index)
|
||||
})
|
||||
} else if (obj.event === 'edit') {
|
||||
layer.open({
|
||||
title: '编辑',
|
||||
type: 1,
|
||||
area: ['80%', '80%'],
|
||||
content: '<div style="padding: 16px;">自定义表单元素</div>'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//触发表格复选框选择
|
||||
table.on('checkbox(test-table-index)', function (obj) {
|
||||
console.log(obj)
|
||||
})
|
||||
|
||||
//触发表格单选框选择
|
||||
table.on('radio(test-table-index)', function (obj) {
|
||||
console.log(obj)
|
||||
})
|
||||
|
||||
// 行单击事件
|
||||
table.on('row(test-table-index)', function (obj) {
|
||||
//console.log(obj);
|
||||
//layer.closeAll('tips');
|
||||
})
|
||||
// 行双击事件
|
||||
table.on('rowDouble(test-table-index)', function (obj) {
|
||||
console.log(obj)
|
||||
})
|
||||
|
||||
// 单元格编辑事件
|
||||
table.on('edit(test-table-index)', function (obj) {
|
||||
var field = obj.field //得到字段
|
||||
, value = obj.value //得到修改后的值
|
||||
, data = obj.data //得到所在行所有键值
|
||||
|
||||
var update = {}
|
||||
update[field] = value
|
||||
obj.update(update)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
<title>设置初始排序 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>设置初始排序</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置初始排序</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-initSort"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-initSort'
|
||||
, height: 313
|
||||
, url: './res/json/table/user.js'
|
||||
, initSort: {
|
||||
field: 'wealth'
|
||||
, type: 'desc'
|
||||
}
|
||||
, cols: [[
|
||||
{ field: 'id', title: 'ID', width: 80 }
|
||||
, { field: 'username', title: '用户名', width: 80 }
|
||||
, { field: 'score', title: '评分', width: 80, sort: true }
|
||||
, { field: 'wealth', title: '财富', sort: true, minWidth: 150 }
|
||||
]]
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,67 +0,0 @@
|
||||
<title>行事件 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>行事件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">行事件</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<table class="layui-hide" id="test-table-onrow" lay-filter="test-table-onrow"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var admin = layui.admin
|
||||
, table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-onrow'
|
||||
, url: './res/json/table/demo.js'
|
||||
, cols: [[
|
||||
{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true }
|
||||
, { field: 'username', title: '用户名', width: 120 }
|
||||
, {
|
||||
field: 'email', title: '邮箱', width: 150, templet: function (res) {
|
||||
return '<em>' + res.email + '</em>'
|
||||
}
|
||||
}
|
||||
, { field: 'sex', title: '性别', width: 80, sort: true }
|
||||
, { field: 'city', title: '城市', width: 100 }
|
||||
, { field: 'sign', title: '签名' }
|
||||
, { field: 'experience', title: '积分', width: 80, sort: true }
|
||||
, { field: 'ip', title: 'IP', width: 120 }
|
||||
, { field: 'logins', title: '登入次数', width: 100, sort: true }
|
||||
, { field: 'joinTime', title: '加入时间', width: 120 }
|
||||
]]
|
||||
, page: true
|
||||
})
|
||||
|
||||
//行单击事件（单击事件为：rowDouble）
|
||||
table.on('row(test-table-onrow)', function (obj) {
|
||||
var data = obj.data
|
||||
|
||||
layer.alert(layui.util.escape(JSON.stringify(data)), {
|
||||
title: '当前行数据：'
|
||||
})
|
||||
|
||||
//标注选中样式
|
||||
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click')
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,65 +0,0 @@
|
||||
<title>解析任意数据格式 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>解析任意数据格式</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">解析任意数据格式</div>
|
||||
<div class="layui-card-body">
|
||||
<blockquote class="layui-elem-quote layui-text">
|
||||
尽管本示例中的原始数据：<a href="./res/json/table/demo3.js" target="_blank">./res/json/table/demo3.js</a>，并不符合
|
||||
table 组件默认规定的数据格式，但从 layui 2.4.0 开始，新增的 parseData 回调可以将原始的任意格式的数据重新解析成
|
||||
table 组件规定的数据格式。具体可以点击上方查看代码。
|
||||
</blockquote>
|
||||
|
||||
<table class="layui-hide" id="test-table-parseData" lay-filter="test-table-parseData"></table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var admin = layui.admin
|
||||
, table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-parseData'
|
||||
, url: './res/json/table/demo3.js'
|
||||
, toolbar: true
|
||||
, title: '用户数据表'
|
||||
, totalRow: true
|
||||
, cellMinWidth: 120
|
||||
, cols: [[
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true, totalRowText: '合计行' }
|
||||
, { field: 'username', title: '用户名', edit: 'text' }
|
||||
, { field: 'experience', title: '积分', sort: true, totalRow: true }
|
||||
, { field: 'logins', title: '登入次数', sort: true, totalRow: true }
|
||||
]]
|
||||
, page: true
|
||||
, response: {
|
||||
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
|
||||
}
|
||||
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
|
||||
return {
|
||||
'code': res.status, //解析接口状态
|
||||
'msg': res.message, //解析提示文本
|
||||
'count': res.total, //解析数据长度
|
||||
'data': res.rows.item //解析数据列表
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,69 +0,0 @@
|
||||
<title>开启单选框 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>开启单选框</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启单选框</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-radio" lay-filter="test-table-radio"></table>
|
||||
|
||||
<script type="text/html" id="test-table-radio-toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var admin = layui.admin
|
||||
, table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-radio'
|
||||
, url: './res/json/table/user.js'
|
||||
, toolbar: '#test-table-radio-toolbarDemo'
|
||||
, cols: [[
|
||||
{ type: 'radio' }
|
||||
, { field: 'id', width: 80, title: 'ID', sort: true }
|
||||
, { field: 'username', width: 80, title: '用户名' }
|
||||
, { field: 'sex', width: 80, title: '性别', sort: true }
|
||||
, { field: 'city', width: 80, title: '城市' }
|
||||
, { field: 'sign', title: '签名', minWidth: 100 }
|
||||
, { field: 'experience', width: 80, title: '积分', sort: true }
|
||||
, { field: 'score', width: 80, title: '评分', sort: true }
|
||||
, { field: 'classify', width: 80, title: '职业' }
|
||||
, { field: 'wealth', width: 135, title: '财富', sort: true }
|
||||
]]
|
||||
, page: true
|
||||
})
|
||||
|
||||
//头工具栏事件
|
||||
table.on('toolbar(test-table-radio)', function (obj) {
|
||||
var checkStatus = table.checkStatus(obj.config.id) //获取选中行状态
|
||||
switch (obj.event) {
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data //获取选中行数据
|
||||
layer.alert(layui.util.escape(JSON.stringify(data)))
|
||||
break
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,56 +0,0 @@
|
||||
<title>自定义分页 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>自定义分页</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">自定义分页</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-resetPage"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var admin = layui.admin
|
||||
, table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-resetPage'
|
||||
, url: './res/json/table/user.js'
|
||||
, page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
||||
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||||
//,curr: 5 //设定初始在第 5 页
|
||||
, groups: 1 //只显示 1 个连续页码
|
||||
, first: false //不显示首页
|
||||
, last: false //不显示尾页
|
||||
|
||||
}
|
||||
, cols: [[
|
||||
{ field: 'id', width: 80, title: 'ID', sort: true }
|
||||
, { field: 'username', width: 100, title: '用户名' }
|
||||
, { field: 'sex', width: 80, title: '性别', sort: true }
|
||||
, { field: 'city', width: 80, title: '城市' }
|
||||
, { field: 'sign', title: '签名', minWidth: 150 }
|
||||
, { field: 'experience', width: 80, title: '积分', sort: true }
|
||||
, { field: 'score', width: 80, title: '评分', sort: true }
|
||||
, { field: 'classify', width: 80, title: '职业' }
|
||||
, { field: 'wealth', width: 135, title: '财富', sort: true }
|
||||
]]
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,87 +0,0 @@
|
||||
<title>数据表格的重载 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>数据表格的重载</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">数据表格的重载</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
搜索ID：
|
||||
<div class="layui-inline">
|
||||
<input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off">
|
||||
</div>
|
||||
<button class="layui-btn" data-type="reload">搜索</button>
|
||||
</div>
|
||||
|
||||
<table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
|
||||
|
||||
<blockquote class="layui-elem-quote">此处由于是静态模拟数据，所以搜索后重载的结果没变，这并非是
|
||||
BUG。实际使用时改成真实接口并根据搜索的字段筛选出对应的数据即可。
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
//方法级渲染
|
||||
table.render({
|
||||
elem: '#test-table-reload'
|
||||
, url: './res/json/table/user.js'
|
||||
, cols: [[
|
||||
{ checkbox: true, fixed: true }
|
||||
, { field: 'id', title: 'ID', width: 80, sort: true, fixed: true }
|
||||
, { field: 'username', title: '用户名', width: 80 }
|
||||
, { field: 'sex', title: '性别', width: 80, sort: true }
|
||||
, { field: 'city', title: '城市', width: 80 }
|
||||
, { field: 'sign', title: '签名' }
|
||||
, { field: 'experience', title: '积分', sort: true, width: 80 }
|
||||
, { field: 'score', title: '评分', sort: true, width: 80 }
|
||||
, { field: 'classify', title: '职业', width: 80 }
|
||||
, { field: 'wealth', title: '财富', sort: true, width: 135 }
|
||||
]]
|
||||
, page: true
|
||||
, height: 315
|
||||
})
|
||||
|
||||
var $ = layui.$, active = {
|
||||
reload: function () {
|
||||
var demoReload = $('#test-table-demoReload')
|
||||
|
||||
//执行重载
|
||||
table.reload('test-table-reload', {
|
||||
page: {
|
||||
curr: 1 //重新从第 1 页开始
|
||||
}
|
||||
, where: {
|
||||
key: {
|
||||
id: demoReload.val()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.test-table-reload-btn .layui-btn').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,307 +0,0 @@
|
||||
<title>静态表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>静态表格</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">默认风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>三十功名尘与土，八千里路云和月</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">行边框风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-skin="line">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>三十功名尘与土，八千里路云和月</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">列边框风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-even="" lay-skin="row">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>三十功名尘与土，八千里路云和月</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">无边框风格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-even="" lay-skin="nob">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>出场时间</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>汉族</td>
|
||||
<td>1989-10-14</td>
|
||||
<td>人生似修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>汉族</td>
|
||||
<td>1920-09-30</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Helen Keller</td>
|
||||
<td>拉丁美裔</td>
|
||||
<td>1880-06-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>汉族</td>
|
||||
<td>1103-北宋崇宁二年</td>
|
||||
<td>三十功名尘与土，八千里路云和月</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏族（汉族）</td>
|
||||
<td>公元前-372年</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">其它尺寸</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table" lay-size="lg">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>许闲心</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sentsin</td>
|
||||
<td>2016-11-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>许闲心</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sentsin</td>
|
||||
<td>2016-11-27</td>
|
||||
<td> Life is either a daring adventure or nothing.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'])
|
||||
</script>
|
||||
@@ -1,61 +0,0 @@
|
||||
<title>设置单元格样式 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>设置单元格样式</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置单元格样式</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-table-style"></table>
|
||||
|
||||
<script type="text/html" id="test-table-usernameTpl">
|
||||
<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
|
||||
</script>
|
||||
<script type="text/html" id="test-table-sexTpl">
|
||||
{{# if(d.sex === '女'){ }}
|
||||
<span style="color: #F581B1;">{{ d.sex }}</span>
|
||||
{{# } else { }}
|
||||
{{ d.sex }}
|
||||
{{# } }}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
table.render({
|
||||
elem: '#test-table-style'
|
||||
, url: './res/json/table/user.js'
|
||||
, height: 310
|
||||
, cols: [[
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true }
|
||||
, { field: 'username', title: '用户名', width: 80, templet: '#usernameTpl' }
|
||||
, { field: 'sex', title: '性别', width: 80, sort: true, templet: '#sexTpl' }
|
||||
, { field: 'city', title: '城市', width: 80 }
|
||||
, { field: 'sign', title: '签名' }
|
||||
, { field: 'experience', title: '积分', width: 80, sort: true, style: 'background-color: #eee;' }
|
||||
, { field: 'score', title: '评分', width: 80, sort: true }
|
||||
, { field: 'classify', title: '职业', width: 80, style: 'background-color: #16baaa; color: #fff;' }
|
||||
, { field: 'wealth', title: '财富', width: 135, sort: true }
|
||||
]]
|
||||
, page: true
|
||||
, skin: 'row'
|
||||
, even: true
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,99 +0,0 @@
|
||||
<title>复杂表头 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>复杂表头</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">复杂表头</div>
|
||||
<div class="layui-card-body">
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>常用两级表头</legend>
|
||||
</fieldset>
|
||||
|
||||
<table class="layui-table" lay-data="{width:800, page: true, limit: 6, limits:[6]}"
|
||||
lay-filter="test-table-thead1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
||||
<th lay-data="{field:'username', width:150}" rowspan="2">联系人</th>
|
||||
<th lay-data="{align:'center'}" colspan="3">地址</th>
|
||||
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
|
||||
<th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#test-table-thead-barDemo'}"
|
||||
rowspan="2">操作
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th lay-data="{field:'province', width:120}">省</th>
|
||||
<th lay-data="{field:'city', width:120}">市</th>
|
||||
<th lay-data="{field:'zone', width:200}">区</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>更多级表头（可以无限极）</legend>
|
||||
</fieldset>
|
||||
<table class="layui-table" lay-data="{cellMinWidth: 80, page: true}" lay-filter="test-table-thead1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>
|
||||
<th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>
|
||||
<th lay-data="{align:'center'}" colspan="5">地址1</th>
|
||||
<th lay-data="{align:'center'}" colspan="2">地址2</th>
|
||||
<th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#test-table-thead-barDemo'}"
|
||||
rowspan="3">操作
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th lay-data="{field:'province'}" rowspan="2">省</th>
|
||||
<th lay-data="{field:'city'}" rowspan="2">市</th>
|
||||
<th lay-data="{align:'center'}" colspan="3">详细</th>
|
||||
<th lay-data="{field:'province'}" rowspan="2">省</th>
|
||||
<th lay-data="{field:'city'}" rowspan="2">市</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th lay-data="{field:'street'}" rowspan="2">街道</th>
|
||||
<th lay-data="{field:'address'}">小区</th>
|
||||
<th lay-data="{field:'house'}">单元</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<script type="text/html" id="test-table-thead-barDemo">
|
||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
|
||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
|
||||
</script>
|
||||
|
||||
<br>
|
||||
<blockquote class="layui-elem-quote">注：上述例子读取的均是静态模拟数据</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
table.init('test-table-thead1', {
|
||||
url: './res/json/table/demo2.js'
|
||||
})
|
||||
|
||||
table.init('test-table-thead2', {
|
||||
url: './res/json/table/demo2.js'
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,73 +0,0 @@
|
||||
<title>转化静态表格 - 数据表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>数据表格</cite></a>
|
||||
<a><cite>转化静态表格</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">转化静态表格</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-btn-group test-table-btn" style="margin-bottom: 10px;">
|
||||
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
|
||||
</div>
|
||||
|
||||
<table lay-filter="parse-table-demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th lay-data="{field:'username', width:200}">昵称</th>
|
||||
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
|
||||
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>张三1</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>人生就像是一场修行 A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三2</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行 B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三3</td>
|
||||
<td>2016-11-30</td>
|
||||
<td>人生就像是一场修行 C</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
var $ = layui.$, active = {
|
||||
parseTable: function () {
|
||||
table.init('parse-table-demo', { //转化静态表格
|
||||
//height: 'full-500'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$('.test-table-btn .layui-btn').on('click', function () {
|
||||
var type = $(this).data('type')
|
||||
active[type] ? active[type].call(this) : ''
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,188 +0,0 @@
|
||||
<title>选项卡组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>选项卡</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="component-tabs">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">默认风格</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">网站设置</li>
|
||||
<li>用户管理</li>
|
||||
<li>权限分配</li>
|
||||
<li>商品管理</li>
|
||||
<li>订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
1. 高度默认自适应，也可以随意固宽。
|
||||
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
||||
</div>
|
||||
<div class="layui-tab-item">内容2</div>
|
||||
<div class="layui-tab-item">内容3</div>
|
||||
<div class="layui-tab-item">内容4</div>
|
||||
<div class="layui-tab-item">内容5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">简洁风格</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">网站设置</li>
|
||||
<li>用户管理</li>
|
||||
<li>权限分配</li>
|
||||
<li>商品管理</li>
|
||||
<li>订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
你也可以 tab 事件
|
||||
</div>
|
||||
<div class="layui-tab-item">内容2</div>
|
||||
<div class="layui-tab-item">内容3</div>
|
||||
<div class="layui-tab-item">内容4</div>
|
||||
<div class="layui-tab-item">内容5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">卡片风格</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab layui-tab-card">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">网站设置</li>
|
||||
<li>用户管理</li>
|
||||
<li>权限分配</li>
|
||||
<li>商品管理</li>
|
||||
<li>订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。
|
||||
</div>
|
||||
<div class="layui-tab-item">2</div>
|
||||
<div class="layui-tab-item">3</div>
|
||||
<div class="layui-tab-item">4</div>
|
||||
<div class="layui-tab-item">5</div>
|
||||
<div class="layui-tab-item">6</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-tab" lay-filter="demo" lay-allowclose="true">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this" lay-id="11">网站设置</li>
|
||||
<li lay-id="22">用户管理</li>
|
||||
<li lay-id="33">权限分配</li>
|
||||
<li lay-id="44">商品管理</li>
|
||||
<li lay-id="55">订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">内容1</div>
|
||||
<div class="layui-tab-item">内容2</div>
|
||||
<div class="layui-tab-item">内容3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn site-demo-active" data-type="tabAdd">新增一个项</button>
|
||||
<button class="layui-btn site-demo-active" data-type="tabDelete">删除：用户管理</button>
|
||||
<button class="layui-btn site-demo-active" data-type="tabChange">切换到：权限分配</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">记录状态</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this" lay-id="11">网站设置</li>
|
||||
<li lay-id="22">用户管理</li>
|
||||
<li lay-id="33">权限分配</li>
|
||||
<li lay-id="44">商品管理</li>
|
||||
<li lay-id="55">订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content" style="height: 165px;">
|
||||
<div class="layui-tab-item layui-show">
|
||||
点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
|
||||
</div>
|
||||
<div class="layui-tab-item">内容2</div>
|
||||
<div class="layui-tab-item">内容3</div>
|
||||
<div class="layui-tab-item">内容4</div>
|
||||
<div class="layui-tab-item">内容5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
element.render()
|
||||
|
||||
element.on('tab(component-tabs-brief)', function (obj) {
|
||||
layer.msg(obj.index + '：' + this.innerHTML)
|
||||
})
|
||||
|
||||
/* 触发事件 */
|
||||
var active = {
|
||||
tabAdd: function () {
|
||||
/* 新增一个Tab项 */
|
||||
element.tabAdd('demo', {
|
||||
title: '新选项' + (Math.random() * 1000 | 0) /* 用于演示 */
|
||||
, content: '内容' + (Math.random() * 1000 | 0)
|
||||
, id: new Date().getTime() /* 实际使用一般是规定好的id，这里以时间戳模拟下 */
|
||||
})
|
||||
}
|
||||
, tabDelete: function (othis) {
|
||||
/* 删除指定Tab项 */
|
||||
element.tabDelete('demo', '22')
|
||||
othis.addClass('layui-btn-disabled')
|
||||
}
|
||||
, tabChange: function () {
|
||||
/* 切换到指定Tab项 */
|
||||
element.tabChange('demo', '33')
|
||||
}
|
||||
}
|
||||
|
||||
$('#component-tabs .site-demo-active').on('click', function () {
|
||||
var othis = $(this), type = othis.data('type')
|
||||
active[type] ? active[type].call(this, othis) : ''
|
||||
})
|
||||
|
||||
/* Hash地址的定位 */
|
||||
var layid = router.hash.replace(/^#layid=/, '')
|
||||
layid && element.tabChange('component-tabs-hash', layid)
|
||||
|
||||
element.on('tab(component-tabs-hash)', function (elem) {
|
||||
location.hash = '/' + layui.router().path.join('/') + '#layid=' + $(this).attr('lay-id')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,126 +0,0 @@
|
||||
<title>时间线</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>时间线</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
#LAY-component-timeline .layui-card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid" id="LAY-component-timeline">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">常规时间线</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<ul class="layui-timeline">
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">12月28日</h3>
|
||||
<p>
|
||||
一直以来，layui 秉承无偿开源的初心，虔诚致力于服务各层次前后端 Web
|
||||
开发者，在商业横飞的当今时代，这一信念从未动摇。即便身单力薄，仍然重拾决心，埋头造轮，以尽可能地填补产品本身的缺口。在过去的一段的时间，我一直在寻求持久之道，已维持你眼前所见的一切。而
|
||||
layuiAdmin 是我们尝试解决的手段之一。我相信真正有爱于 layui 生态的你，定然不会错过这一拥抱吧。
|
||||
</p>
|
||||
<p><br>子曰：君子不用防，小人防不住。请务必通过官网正规渠道，获得 <a
|
||||
href="http://www.baidu.com#/admin/" target="_blank">layuiAdmin</a>！</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">12月25日</h3>
|
||||
<p>又是一年 <em>“圣诞节”</em>，2018 向我们正在走来</p>
|
||||
<ul>
|
||||
<li>叮叮当，叮叮当，铃儿响叮当</li>
|
||||
<li>今晚滑雪多快乐，我们坐在雪橇上</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">12月24日</h3>
|
||||
<p>
|
||||
美丽的夜晚，都是祈祷的人们。<br>他们等待着第二天，收到圣诞老人的礼物。<br><br>
|
||||
</p>
|
||||
<blockquote class="layui-elem-quote">平安夜，天赐平安。愿真善美的事物都能永恒。
|
||||
</blockquote>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">过去</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">简约时间线</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<ul class="layui-timeline">
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
2018年，layui 5.0 发布，并发展成为中国最受欢迎的前端 UI 框架（期望）
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">2016年，layui 首个版本发布</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">2015年，layui 孵化</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,183 +0,0 @@
|
||||
<title>穿梭框组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>穿梭框组件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">基础效果</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-transfer-demo1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">定义标题及数据源</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-transfer-demo2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">初始右侧数据集合</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-transfer-demo3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">显示搜索框</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-transfer-demo4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">数据格式解析</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-transfer-demo5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">穿梭时的回调</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-transfer-demo6"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">实例调用</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
|
||||
<button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
|
||||
</div>
|
||||
<div id="test-transfer-demo7"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'transfer', 'layer', 'util'], function () {
|
||||
var $ = layui.$
|
||||
, transfer = layui.transfer
|
||||
, layer = layui.layer
|
||||
, util = layui.util
|
||||
|
||||
//模拟数据
|
||||
var data1 = [
|
||||
{ 'value': '1', 'title': '李白' }
|
||||
, { 'value': '2', 'title': '杜甫' }
|
||||
, { 'value': '3', 'title': '苏轼' }
|
||||
, { 'value': '4', 'title': '李清照' }
|
||||
, { 'value': '5', 'title': '鲁迅', 'disabled': true }
|
||||
, { 'value': '6', 'title': '巴金' }
|
||||
, { 'value': '7', 'title': '冰心' }
|
||||
, { 'value': '8', 'title': '矛盾' }
|
||||
, { 'value': '9', 'title': '张三' }
|
||||
]
|
||||
|
||||
, data2 = [
|
||||
{ 'value': '1', 'title': '瓦罐汤' }
|
||||
, { 'value': '2', 'title': '油酥饼' }
|
||||
, { 'value': '3', 'title': '炸酱面' }
|
||||
, { 'value': '4', 'title': '串串香', 'disabled': true }
|
||||
, { 'value': '5', 'title': '豆腐脑' }
|
||||
, { 'value': '6', 'title': '驴打滚' }
|
||||
, { 'value': '7', 'title': '北京烤鸭' }
|
||||
, { 'value': '8', 'title': '烤冷面' }
|
||||
, { 'value': '9', 'title': '毛血旺', 'disabled': true }
|
||||
, { 'value': '10', 'title': '肉夹馍' }
|
||||
, { 'value': '11', 'title': '臊子面' }
|
||||
, { 'value': '12', 'title': '凉皮' }
|
||||
, { 'value': '13', 'title': '羊肉泡馍' }
|
||||
, { 'value': '14', 'title': '冰糖葫芦', 'disabled': true }
|
||||
, { 'value': '15', 'title': '狼牙土豆' }
|
||||
]
|
||||
|
||||
//基础效果
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo1'
|
||||
, data: data1
|
||||
})
|
||||
|
||||
//定义标题及数据源
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo2'
|
||||
, title: ['候选文人', '获奖文人'] //自定义标题
|
||||
, data: data1
|
||||
//,width: 150 //定义宽度
|
||||
, height: 210 //定义高度
|
||||
})
|
||||
|
||||
//初始右侧数据
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo3'
|
||||
, data: data2
|
||||
, value: ['1', '3', '5', '7', '9', '11']
|
||||
})
|
||||
|
||||
//显示搜索框
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo4'
|
||||
, data: data1
|
||||
, title: ['文本墨客', '获奖文人']
|
||||
, showSearch: true
|
||||
})
|
||||
|
||||
//数据格式解析
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo5'
|
||||
, parseData: function (res) {
|
||||
return {
|
||||
'value': res.id //数据值
|
||||
, 'title': res.name //数据标题
|
||||
, 'disabled': res.disabled //是否禁用
|
||||
, 'checked': res.checked //是否选中
|
||||
}
|
||||
}
|
||||
, data: [
|
||||
{ 'id': '1', 'name': '李白' }
|
||||
, { 'id': '2', 'name': '杜甫' }
|
||||
, { 'id': '3', 'name': '张三' }
|
||||
]
|
||||
, height: 150
|
||||
})
|
||||
|
||||
//穿梭时的回调
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo6'
|
||||
, data: data1
|
||||
, onchange: function (obj, index) {
|
||||
var arr = ['左边', '右边']
|
||||
layer.alert('来自 <strong>' + arr[index] + '</strong> 的数据：' + JSON.stringify(obj)) //获得被穿梭时的数据
|
||||
}
|
||||
})
|
||||
|
||||
//实例调用
|
||||
transfer.render({
|
||||
elem: '#test-transfer-demo7'
|
||||
, data: data1
|
||||
, id: 'key123' //定义唯一索引
|
||||
})
|
||||
//批量办法定事件
|
||||
util.event('lay-demoTransferActive', {
|
||||
getData: function (othis) {
|
||||
var getData = transfer.getData('key123') //获取右侧数据
|
||||
layer.alert(layui.util.escape(JSON.stringify(getData)))
|
||||
}
|
||||
, reload: function () {
|
||||
//实例重载
|
||||
transfer.reload('key123', {
|
||||
title: ['文人', '喜欢的文人']
|
||||
, value: ['2', '5', '9']
|
||||
, showSearch: true
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,429 +0,0 @@
|
||||
<title>树形组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>树形组件</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<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">
|
||||
<button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
|
||||
</div>
|
||||
<div id="test-tree-demo1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">常规用法</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">无连接线风格</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">仅节点左侧图标控制收缩</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">手风琴模式</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">点击节点新窗口跳转</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo6"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启复选框</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo7"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开启节点操作图标</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="test-tree-demo8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'tree', 'util'], function () {
|
||||
var tree = layui.tree
|
||||
, layer = layui.layer
|
||||
, util = layui.util
|
||||
|
||||
//模拟数据
|
||||
, data = [{
|
||||
title: '一级1'
|
||||
, id: 1
|
||||
, field: 'name1'
|
||||
, checked: true
|
||||
, spread: true
|
||||
, children: [{
|
||||
title: '二级1-1 可允许跳转'
|
||||
, id: 3
|
||||
, field: 'name11'
|
||||
, href: 'https://www.baidu.com#/'
|
||||
, children: [{
|
||||
title: '三级1-1-3'
|
||||
, id: 23
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '四级1-1-3-1'
|
||||
, id: 24
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '五级1-1-3-1-1'
|
||||
, id: 30
|
||||
, field: ''
|
||||
}, {
|
||||
title: '五级1-1-3-1-2'
|
||||
, id: 31
|
||||
, field: ''
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: '三级1-1-1'
|
||||
, id: 7
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '四级1-1-1-1 可允许跳转'
|
||||
, id: 15
|
||||
, field: ''
|
||||
, href: 'https://www.baidu.com#/doc/'
|
||||
}]
|
||||
}, {
|
||||
title: '三级1-1-2'
|
||||
, id: 8
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '四级1-1-2-1'
|
||||
, id: 32
|
||||
, field: ''
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: '二级1-2'
|
||||
, id: 4
|
||||
, spread: true
|
||||
, children: [{
|
||||
title: '三级1-2-1'
|
||||
, id: 9
|
||||
, field: ''
|
||||
, disabled: true
|
||||
}, {
|
||||
title: '三级1-2-2'
|
||||
, id: 10
|
||||
, field: ''
|
||||
}]
|
||||
}, {
|
||||
title: '二级1-3'
|
||||
, id: 20
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '三级1-3-1'
|
||||
, id: 21
|
||||
, field: ''
|
||||
}, {
|
||||
title: '三级1-3-2'
|
||||
, id: 22
|
||||
, field: ''
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: '一级2'
|
||||
, id: 2
|
||||
, field: ''
|
||||
, spread: true
|
||||
, children: [{
|
||||
title: '二级2-1'
|
||||
, id: 5
|
||||
, field: ''
|
||||
, spread: true
|
||||
, children: [{
|
||||
title: '三级2-1-1'
|
||||
, id: 11
|
||||
, field: ''
|
||||
}, {
|
||||
title: '三级2-1-2'
|
||||
, id: 12
|
||||
, field: ''
|
||||
}]
|
||||
}, {
|
||||
title: '二级2-2'
|
||||
, id: 6
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '三级2-2-1'
|
||||
, id: 13
|
||||
, field: ''
|
||||
}, {
|
||||
title: '三级2-2-2'
|
||||
, id: 14
|
||||
, field: ''
|
||||
, disabled: true
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: '一级3'
|
||||
, id: 16
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '二级3-1'
|
||||
, id: 17
|
||||
, field: ''
|
||||
, fixed: true
|
||||
, children: [{
|
||||
title: '三级3-1-1'
|
||||
, id: 18
|
||||
, field: ''
|
||||
}, {
|
||||
title: '三级3-1-2'
|
||||
, id: 19
|
||||
, field: ''
|
||||
}]
|
||||
}, {
|
||||
title: '二级3-2'
|
||||
, id: 27
|
||||
, field: ''
|
||||
, children: [{
|
||||
title: '三级3-2-1'
|
||||
, id: 28
|
||||
, field: ''
|
||||
}, {
|
||||
title: '三级3-2-2'
|
||||
, id: 29
|
||||
, field: ''
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
|
||||
//模拟数据1
|
||||
, data1 = [{
|
||||
title: '江西'
|
||||
, id: 1
|
||||
, children: [{
|
||||
title: '南昌'
|
||||
, id: 1000
|
||||
, children: [{
|
||||
title: '青山湖区'
|
||||
, id: 10001
|
||||
}, {
|
||||
title: '高新区'
|
||||
, id: 10002
|
||||
}]
|
||||
}, {
|
||||
title: '九江'
|
||||
, id: 1001
|
||||
}, {
|
||||
title: '赣州'
|
||||
, id: 1002
|
||||
}]
|
||||
}, {
|
||||
title: '广西'
|
||||
, id: 2
|
||||
, children: [{
|
||||
title: '南宁'
|
||||
, id: 2000
|
||||
}, {
|
||||
title: '桂林'
|
||||
, id: 2001
|
||||
}]
|
||||
}, {
|
||||
title: '陕西'
|
||||
, id: 3
|
||||
, children: [{
|
||||
title: '西安'
|
||||
, id: 3000
|
||||
}, {
|
||||
title: '延安'
|
||||
, id: 3001
|
||||
}]
|
||||
}]
|
||||
|
||||
//模拟数据2
|
||||
, data2 = [{
|
||||
title: '早餐'
|
||||
, id: 1
|
||||
, children: [{
|
||||
title: '油条'
|
||||
, id: 5
|
||||
}, {
|
||||
title: '包子'
|
||||
, id: 6
|
||||
}, {
|
||||
title: '豆浆'
|
||||
, id: 7
|
||||
}]
|
||||
}, {
|
||||
title: '午餐'
|
||||
, id: 2
|
||||
, checked: true
|
||||
, children: [{
|
||||
title: '藜蒿炒腊肉'
|
||||
, id: 8
|
||||
}, {
|
||||
title: '西湖醋鱼'
|
||||
, id: 9
|
||||
}, {
|
||||
title: '小白菜'
|
||||
, id: 10
|
||||
}, {
|
||||
title: '海带排骨汤'
|
||||
, id: 11
|
||||
}]
|
||||
}, {
|
||||
title: '晚餐'
|
||||
, id: 3
|
||||
, children: [{
|
||||
title: '红烧肉'
|
||||
, id: 12
|
||||
, fixed: true
|
||||
}, {
|
||||
title: '番茄炒蛋'
|
||||
, id: 13
|
||||
}]
|
||||
}, {
|
||||
title: '夜宵'
|
||||
, id: 4
|
||||
, children: [{
|
||||
title: '小龙虾'
|
||||
, id: 14
|
||||
, checked: true
|
||||
}, {
|
||||
title: '香辣蟹'
|
||||
, id: 15
|
||||
, disabled: true
|
||||
}, {
|
||||
title: '烤鱿鱼'
|
||||
, id: 16
|
||||
}]
|
||||
}]
|
||||
|
||||
//基本演示
|
||||
tree.render({
|
||||
elem: '#test-tree-demo1'
|
||||
, data: data
|
||||
, showCheckbox: true //是否显示复选框
|
||||
, id: 'test-tree-demoId1'
|
||||
, isJump: true //是否允许点击节点时弹出新窗口跳转
|
||||
, click: function (obj) {
|
||||
var data = obj.data //获取当前点击的节点数据
|
||||
layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data))
|
||||
}
|
||||
})
|
||||
|
||||
//按钮事件
|
||||
util.event('lay-demo', {
|
||||
getChecked: function (othis) {
|
||||
var checkedData = tree.getChecked('test-tree-demoId1') //获取选中节点的数据
|
||||
|
||||
layer.alert(layui.util.escape(JSON.stringify(checkedData)), { shade: 0 })
|
||||
console.log(checkedData)
|
||||
}
|
||||
, setChecked: function () {
|
||||
tree.setChecked('test-tree-demoId1', [12, 16]) //勾选指定节点
|
||||
}
|
||||
, reload: function () {
|
||||
//重载实例
|
||||
tree.reload('test-tree-demoId1', {})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
//常规用法
|
||||
tree.render({
|
||||
elem: '#test-tree-demo2' //默认是点击节点可进行收缩
|
||||
, data: data1
|
||||
})
|
||||
|
||||
//无连接线风格
|
||||
tree.render({
|
||||
elem: '#test-tree-demo3'
|
||||
, data: data1
|
||||
, showLine: false //是否开启连接线
|
||||
})
|
||||
|
||||
//仅节点左侧图标控制收缩
|
||||
tree.render({
|
||||
elem: '#test-tree-demo4'
|
||||
, data: data1
|
||||
, onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
|
||||
, click: function (obj) {
|
||||
layer.alert(layui.util.escape(JSON.stringify(obj.data)))
|
||||
}
|
||||
})
|
||||
//手风琴模式
|
||||
tree.render({
|
||||
elem: '#test-tree-demo5'
|
||||
, data: [{
|
||||
title: '优秀'
|
||||
, children: [{
|
||||
title: '80 ~ 90'
|
||||
}, {
|
||||
title: '90 ~ 100'
|
||||
}]
|
||||
}, {
|
||||
title: '良好'
|
||||
, children: [{
|
||||
title: '70 ~ 80'
|
||||
}, {
|
||||
title: '60 ~ 70'
|
||||
}]
|
||||
}, {
|
||||
title: '要努力奥'
|
||||
, children: [{
|
||||
title: '0 ~ 60'
|
||||
}]
|
||||
}]
|
||||
, accordion: true
|
||||
})
|
||||
|
||||
//点击节点新窗口跳转
|
||||
tree.render({
|
||||
elem: '#test-tree-demo6'
|
||||
, data: data
|
||||
, isJump: true //link 为参数匹配
|
||||
})
|
||||
|
||||
//开启复选框
|
||||
tree.render({
|
||||
elem: '#test-tree-demo7'
|
||||
, data: data2
|
||||
, showCheckbox: true
|
||||
})
|
||||
|
||||
//开启节点操作图标
|
||||
tree.render({
|
||||
elem: '#test-tree-demo8'
|
||||
, data: data1
|
||||
, edit: ['add', 'update', 'del'] //操作节点的图标
|
||||
, click: function (obj) {
|
||||
layer.alert(layui.util.escape(JSON.stringify(obj.data)))
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,139 +0,0 @@
|
||||
<title>树形表格</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>树形表格</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">树形表格</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-hide" id="test-treeTable"></table>
|
||||
<script type="text/html" id="TPL-treeTable-demo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="TPL-treeTable-demo-tools">
|
||||
<div class="layui-btn-container">
|
||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
||||
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
|
||||
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i
|
||||
class="layui-icon layui-icon-down"></i></a>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'table'], function () {
|
||||
var table = layui.table
|
||||
|
||||
var treeTable = layui.treeTable
|
||||
var layer = layui.layer
|
||||
var dropdown = layui.dropdown
|
||||
|
||||
// 渲染
|
||||
var inst = treeTable.render({
|
||||
elem: '#test-treeTable',
|
||||
url: './res/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
tree: {
|
||||
/*
|
||||
// 异步加载子节点
|
||||
async: {
|
||||
enable: true,
|
||||
url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
autoParam: ["parentId=id"]
|
||||
}
|
||||
*/
|
||||
},
|
||||
height: 'full-200',
|
||||
toolbar: '#TPL-treeTable-demo',
|
||||
cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' },
|
||||
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
|
||||
{ field: 'name', title: '用户名', width: 180, fixed: 'left' },
|
||||
{ field: 'experience', title: '积分', width: 90, sort: true },
|
||||
{ field: 'sex', title: '性别', width: 80, sort: true },
|
||||
{ field: 'score', title: '评分', width: 80, sort: true },
|
||||
{ field: 'city', title: '城市' },
|
||||
{ fixed: 'right', title: '操作', width: 181, align: 'center', toolbar: '#TPL-treeTable-demo-tools' }
|
||||
]],
|
||||
page: true
|
||||
})
|
||||
// 表头工具栏工具事件
|
||||
treeTable.on('toolbar(' + inst.config.id + ')', function (obj) {
|
||||
var config = obj.config
|
||||
var tableId = config.id
|
||||
var status = treeTable.checkStatus(tableId)
|
||||
// 获取选中行
|
||||
if (obj.event === 'getChecked') {
|
||||
if (!status.data.length) return layer.msg('无选中数据')
|
||||
console.log(status)
|
||||
layer.alert('当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。')
|
||||
}
|
||||
})
|
||||
// 单元格工具事件
|
||||
treeTable.on('tool(' + inst.config.id + ')', function (obj) {
|
||||
var layEvent = obj.event // 获得 lay-event 对应的值
|
||||
var trElem = obj.tr
|
||||
var trData = obj.data
|
||||
var tableId = obj.config.id
|
||||
if (layEvent === 'detail') {
|
||||
layer.msg('查看操作：' + trData.name)
|
||||
} else if (layEvent === 'addChild') {
|
||||
var data = { id: Date.now(), name: '新节点' }
|
||||
var newNode2 = treeTable.addNodes(tableId, {
|
||||
parentIndex: trData['LAY_DATA_INDEX'],
|
||||
index: -1,
|
||||
data: data
|
||||
})
|
||||
} else if (layEvent === 'more') {
|
||||
// 下拉菜单
|
||||
dropdown.render({
|
||||
elem: this, // 触发事件的 DOM 对象
|
||||
show: true, // 外部事件触发即显示
|
||||
align: 'right', // 右对齐弹出
|
||||
data: [
|
||||
{
|
||||
title: '修改积分',
|
||||
id: 'edit'
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
id: 'del'
|
||||
}
|
||||
],
|
||||
click: function (menudata) {
|
||||
if (menudata.id === 'del') {
|
||||
layer.confirm('真的删除行么', function (index) {
|
||||
obj.del() // 等效如下
|
||||
// treeTable.removeNode(tableId, trElem.attr('data-index'))
|
||||
layer.close(index)
|
||||
})
|
||||
} else if (menudata.id === 'edit') {
|
||||
layer.prompt({
|
||||
value: trData.experience,
|
||||
title: '输入新的积分'
|
||||
}, function (value, index) {
|
||||
obj.update({ experience: value }) // 等效如下
|
||||
// treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
|
||||
layer.close(index)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,208 +0,0 @@
|
||||
<title>功能演示一 - 上传组件</title>
|
||||
|
||||
<style>
|
||||
.layui-upload-img {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>上传组件</cite></a>
|
||||
<a><cite>功能演示一</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">普通图片上传</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn" id="test-upload-normal">上传图片</button>
|
||||
<div class="layui-upload-list">
|
||||
<img class="layui-upload-img" id="test-upload-normal-img">
|
||||
<p id="test-upload-demoText"></p>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="layui-elem-quote">
|
||||
为节省服务器开销，以下示例均未配置真实上传接口，所以每次上传都会报提示：请求上传接口出现异常，这属于正常现象。
|
||||
</blockquote>
|
||||
</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-upload">
|
||||
<button type="button" class="layui-btn" id="test-upload-more">多图片上传</button>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
||||
预览图：
|
||||
<div class="layui-upload-list" id="test-upload-more-list"></div>
|
||||
</blockquote>
|
||||
</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 type="button" class="layui-btn" id="test-upload-type1"><i class="layui-icon"></i>上传文件
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" id="test-upload-type2"><i
|
||||
class="layui-icon"></i>只允许压缩文件
|
||||
</button>
|
||||
<button type="button" class="layui-btn" id="test-upload-type3"><i class="layui-icon"></i>上传视频
|
||||
</button>
|
||||
<button type="button" class="layui-btn" id="test-upload-type4"><i class="layui-icon"></i>上传音频
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设定文件大小限制</div>
|
||||
<div class="layui-card-body">
|
||||
<button type="button" class="layui-btn layui-btn-danger" id="test-upload-size">
|
||||
<i class="layui-icon"></i>上传图片
|
||||
</button>
|
||||
<div class="layui-inline layui-word-aux">
|
||||
这里以限制 60KB 为例
|
||||
</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="layui-btn test-upload-demoMore" lay-data="{url: '/a/'}">上传A</button>
|
||||
<button class="layui-btn test-upload-demoMore" lay-data="{url: '/b/', size:5}">上传B</button>
|
||||
<button class="layui-btn test-upload-demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">
|
||||
上传C
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'upload'], function () {
|
||||
var $ = layui.jquery
|
||||
, upload = layui.upload
|
||||
|
||||
//普通图片上传
|
||||
var uploadInst = upload.render({
|
||||
elem: '#test-upload-normal'
|
||||
, url: '/upload/'
|
||||
, before: function (obj) {
|
||||
//预读本地文件示例，不支持ie8
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#test-upload-normal-img').attr('src', result) //图片链接（base64）
|
||||
})
|
||||
}
|
||||
, done: function (res) {
|
||||
//如果上传失败
|
||||
if (res.code > 0) {
|
||||
return layer.msg('上传失败')
|
||||
}
|
||||
//上传成功
|
||||
}
|
||||
, error: function () {
|
||||
//演示失败状态，并实现重传
|
||||
var demoText = $('#test-upload-demoText')
|
||||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>')
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
uploadInst.upload()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//多图片上传
|
||||
upload.render({
|
||||
elem: '#test-upload-more'
|
||||
, url: '/upload/'
|
||||
, multiple: true
|
||||
, before: function (obj) {
|
||||
//预读本地文件示例，不支持ie8
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#test-upload-more-list').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
|
||||
})
|
||||
}
|
||||
, done: function (res) {
|
||||
//上传完毕
|
||||
}
|
||||
})
|
||||
|
||||
//指定允许上传的文件类型
|
||||
upload.render({
|
||||
elem: '#test-upload-type1'
|
||||
, url: '/upload/'
|
||||
, accept: 'file' //普通文件
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
upload.render({ //允许上传的文件后缀
|
||||
elem: '#test-upload-type2'
|
||||
, url: '/upload/'
|
||||
, accept: 'file' //普通文件
|
||||
, exts: 'zip|rar|7z' //只允许上传压缩文件
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
upload.render({
|
||||
elem: '#test-upload-type3'
|
||||
, url: '/upload/'
|
||||
, accept: 'video' //视频
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
upload.render({
|
||||
elem: '#test-upload-type4'
|
||||
, url: '/upload/'
|
||||
, accept: 'audio' //音频
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
//设定文件大小限制
|
||||
upload.render({
|
||||
elem: '#test-upload-size'
|
||||
, url: '/upload/'
|
||||
, size: 60 //限制文件大小，单位 KB
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
//同时绑定多个元素，并将属性设定在元素上
|
||||
upload.render({
|
||||
elem: '.test-upload-demoMore'
|
||||
, before: function () {
|
||||
layer.tips('接口地址：' + this.url, this.item, { tips: 1 })
|
||||
}
|
||||
, done: function (res, index, upload) {
|
||||
var item = this.item
|
||||
console.log(item) //获取当前触发上传的元素，layui 2.1.0 新增
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,187 +0,0 @@
|
||||
<title>功能演示二 - 上传组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>上传组件</cite></a>
|
||||
<a><cite>功能演示二</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">高级应用：制作一个多文件列表</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="test-upload-testList">选择多文件
|
||||
</button>
|
||||
<div class="layui-upload-list">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col width="150">
|
||||
<col width="260">
|
||||
<col width="150">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>文件名</th>
|
||||
<th>大小</th>
|
||||
<th>上传进度</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="test-upload-demoList"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="layui-btn" id="test-upload-testListAction">开始上传</button>
|
||||
</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-upload">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="test-upload-change">选择文件
|
||||
</button>
|
||||
<button type="button" class="layui-btn" id="test-upload-change-action">开始上传</button>
|
||||
</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-upload-drag" id="test-upload-drag">
|
||||
<i class="layui-icon"></i>
|
||||
<p>点击上传，或将文件拖拽到此处</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">绑定原始文件域</div>
|
||||
<div class="layui-card-body">
|
||||
<input type="file" name="file" id="test-upload-primary">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'upload', 'element'], function () {
|
||||
var $ = layui.jquery
|
||||
, upload = layui.upload
|
||||
, element = layui.element
|
||||
|
||||
//多文件列表示例
|
||||
var uploadListIns = upload.render({
|
||||
elem: '#test-upload-testList'
|
||||
, elemList: $('#test-upload-demoList') //列表元素对象
|
||||
, url: 'https://httpbin.org/post'
|
||||
, accept: 'file'
|
||||
, multiple: true
|
||||
, number: 3
|
||||
, auto: false
|
||||
, bindAction: '#test-upload-testListAction'
|
||||
, choose: function (obj) {
|
||||
var that = this
|
||||
var files = this.files = obj.pushFile() //将每次选择的文件追加到文件队列
|
||||
//读取本地文件
|
||||
obj.preview(function (index, file, result) {
|
||||
var tr = $(['<tr id="upload-' + index + '">'
|
||||
, '<td>' + file.name + '</td>'
|
||||
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
|
||||
, '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
|
||||
, '<td>'
|
||||
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
|
||||
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
|
||||
, '</td>'
|
||||
, '</tr>'].join(''))
|
||||
|
||||
//单个重传
|
||||
tr.find('.demo-reload').on('click', function () {
|
||||
obj.upload(index, file)
|
||||
})
|
||||
|
||||
//删除
|
||||
tr.find('.demo-delete').on('click', function () {
|
||||
delete files[index] //删除对应的文件
|
||||
tr.remove()
|
||||
uploadListIns.config.elem.next()[0].value = '' //清空 input file 值，以免删除后出现同名文件不可选
|
||||
})
|
||||
|
||||
that.elemList.append(tr)
|
||||
element.render('progress') //渲染新加的进度条组件
|
||||
})
|
||||
}
|
||||
, done: function (res, index, upload) { //成功的回调
|
||||
var that = this
|
||||
//if(res.code == 0){ //上传成功
|
||||
var tr = that.elemList.find('tr#upload-' + index)
|
||||
, tds = tr.children()
|
||||
tds.eq(3).html('') //清空操作
|
||||
delete this.files[index] //删除文件队列已经上传成功的文件
|
||||
return
|
||||
//}
|
||||
this.error(index, upload)
|
||||
}
|
||||
, allDone: function (obj) { //多文件上传完毕后的状态回调
|
||||
console.log(obj)
|
||||
}
|
||||
, error: function (index, upload) { //错误回调
|
||||
var that = this
|
||||
var tr = that.elemList.find('tr#upload-' + index)
|
||||
, tds = tr.children()
|
||||
tds.eq(3).find('.demo-reload').removeClass('layui-hide') //显示重传
|
||||
}
|
||||
, progress: function (n, elem, e, index) {
|
||||
element.progress('progress-demo-' + index, n + '%') //执行进度条。n 即为返回的进度百分比
|
||||
}
|
||||
})
|
||||
|
||||
//选完文件后不自动上传
|
||||
upload.render({
|
||||
elem: '#test-upload-change'
|
||||
, url: '/upload/'
|
||||
, auto: false
|
||||
//,multiple: true
|
||||
, bindAction: '#test-upload-change-action'
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
//拖拽上传
|
||||
upload.render({
|
||||
elem: '#test-upload-drag'
|
||||
, url: '/upload/'
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
//绑定原始文件域
|
||||
upload.render({
|
||||
elem: '#test-upload-primary'
|
||||
, url: '/upload/'
|
||||
, done: function (res) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,87 +0,0 @@
|
||||
<title>工具模块 - 组件</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>工具模块</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">倒计时</div>
|
||||
<div class="layui-card-body">
|
||||
请选择要计算的日期：
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input" id="test-util-countdown" value="2099-01-01 00:00:00">
|
||||
</div>
|
||||
<blockquote class="layui-elem-quote" style="margin-top: 10px;">
|
||||
<div id="test-util-countdown-ret"></div>
|
||||
</blockquote>
|
||||
</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-inline">
|
||||
<input type="text" class="layui-input" id="test-util-timeago">
|
||||
</div>
|
||||
<span class="layui-word-aux" id="test-util-timeago-ret"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'util', 'laydate', 'layer'], function () {
|
||||
var util = layui.util
|
||||
, laydate = layui.laydate
|
||||
, layer = layui.layer
|
||||
|
||||
//倒计时
|
||||
var thisTimer, setCountdown = function (y, M, d, H, m, s) {
|
||||
var endTime = new Date(y, M || 0, d || 1, H || 0, m || 0, s || 0) //结束日期
|
||||
, serverTime = new Date() //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
|
||||
|
||||
clearTimeout(thisTimer)
|
||||
util.countdown(endTime, serverTime, function (date, serverTime, timer) {
|
||||
var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒'
|
||||
lay('#test-util-countdown-ret').html(str)
|
||||
thisTimer = timer
|
||||
})
|
||||
}
|
||||
setCountdown(2099, 1, 1)
|
||||
|
||||
laydate.render({
|
||||
elem: '#test-util-countdown'
|
||||
, type: 'datetime'
|
||||
, done: function (value, date) {
|
||||
setCountdown(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds)
|
||||
}
|
||||
})
|
||||
|
||||
//某个时间在当前时间的多久前
|
||||
var setTimeAgo = function (y, M, d, H, m, s) {
|
||||
var str = util.timeAgo(new Date(y, M || 0, d || 1, H || 0, m || 0, s || 0))
|
||||
lay('#test-util-timeago-ret').html(str)
|
||||
}
|
||||
|
||||
laydate.render({
|
||||
elem: '#test-util-timeago'
|
||||
, type: 'datetime'
|
||||
, done: function (value, date) {
|
||||
setTimeAgo(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds)
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
该目录存放【组件】的视图文件
|
||||
@@ -1,219 +0,0 @@
|
||||
<title>主页一</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>主页一</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
最近更新
|
||||
<a href="javascript:;/doc/base/changelog.html" class="layui-a-tips">全部更新</a>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs12 layui-col-sm4">
|
||||
<div class="layuiadmin-card-text">
|
||||
<div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a
|
||||
href="javascript:;/doc/modules/flow.html">flow</a></div>
|
||||
<p class="layui-text-center">修复开启 isLazyimg:true 后,
|
||||
图片懒加载但是图片不存在的报错问题</p>
|
||||
<p class="layui-text-bottom"><a
|
||||
href="javascript:;/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm4">
|
||||
<div class="layuiadmin-card-text">
|
||||
<div class="layui-text-top"><i class="layui-icon layui-icon-upload-circle"></i><a
|
||||
href="javascript:;/doc/modules/upload.html">upload</a></div>
|
||||
<p class="layui-text-center">修复开启 size
|
||||
参数后，文件超出规定大小时，提示信息有误的问题</p>
|
||||
<p class="layui-text-bottom"><a href="javascript:;/doc/modules/upload.html">文件上传</a><span>7 天前</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm4">
|
||||
<div class="layuiadmin-card-text">
|
||||
<div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a
|
||||
href="javascript:;/doc/modules/form.html#val">form</a></div>
|
||||
<p class="layui-text-center">增加 form.val(filter,
|
||||
fields)方法，用于给指定表单集合的元素初始赋值</p>
|
||||
<p class="layui-text-bottom"><a href="javascript:;/doc/modules/form.html">表单</a><span>7 天前</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm4">
|
||||
<div class="layuiadmin-card-text">
|
||||
<div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a
|
||||
href="javascript:;/doc/modules/form.html">form</a></div>
|
||||
<p class="layui-text-center">对 select 组件新增上下键（↑ ↓）回车键（Enter）选择功能</p>
|
||||
<p class="layui-text-bottom"><a href="javascript:;/doc/modules/form.html">表单</a><span>7 天前</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm4">
|
||||
<div class="layuiadmin-card-text">
|
||||
<div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a
|
||||
href="javascript:;/doc/modules/form.html">form</a></div>
|
||||
<p class="layui-text-center">优化 switch 开关组件，让其能根据文本自由伸缩宽</p>
|
||||
<p class="layui-text-bottom"><a href="javascript:;/doc/modules/form.html">表单</a><span>7 天前</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm4">
|
||||
<div class="layuiadmin-card-text">
|
||||
<div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a
|
||||
href="javascript:;/doc/modules/form.html">form</a></div>
|
||||
<p class="layui-text-center">修复 checkbox 复选框组件在高分辨屏下出现的样式不雅问题</p>
|
||||
<p class="layui-text-bottom"><a href="javascript:;/doc/modules/form.html">表单</a><span>7 天前</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
src="./res/style/imgs/logo.png"></a></div>
|
||||
<div>
|
||||
<p>张三 在 <a href="javascript:;/vipclub/list/layuiadmin/">讨论区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img
|
||||
src="./res/style/imgs/logo.png"></a></div>
|
||||
<div>
|
||||
<p>张三 在 <a href="javascript:;/vipclub/list/layuiadmin/">讨论区</a> 进行了 <a
|
||||
href="javascript:;/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img
|
||||
src="./res/style/imgs/logo.png"></a></div>
|
||||
<div>
|
||||
<p>张三 将 <a href="javascript:;/">layui</a> 更新至 2.3.0-rc1 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img
|
||||
src="./res/style/imgs/logo.png"></a></div>
|
||||
<div>
|
||||
<p>张三 在 <a href="javascript:;/">Issues 区</a> 发布了 <a
|
||||
href="javascript:;/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img
|
||||
src="./res/style/imgs/logo.png"></a></div>
|
||||
<div>
|
||||
<p>张三 在 <a href="javascript:;/">Issues 区</a> 发布了 <a
|
||||
href="javascript:;/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="layui-status-img"><a href="javascript:;"><img
|
||||
src="./res/style/imgs/logo.png"></a></div>
|
||||
<div>
|
||||
<p>张三 在 <a href="javascript:;/vipclub/list/layuiadmin/">讨论区</a> 进行了 <a
|
||||
href="javascript:;/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">快速开始/便捷导航</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layuiadmin-card-link">
|
||||
<a href="javascript:;">操作一</a>
|
||||
<a href="javascript:;">操作二</a>
|
||||
<a href="javascript:;">操作三</a>
|
||||
<a href="javascript:;">操作四</a>
|
||||
<a href="javascript:;">操作五</a>
|
||||
<a href="javascript:;">操作六</a>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">
|
||||
<i class="layui-icon layui-icon-add-1" style="position: relative; top: -1px;"></i>添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">八卦新闻</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-pageone">
|
||||
<div carousel-item id="LAY-index-pageone">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">重点组件</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layui-row layuiadmin-card-team">
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;/doc/modules/table.html">
|
||||
<span class="layui-team-img"><img src="./res/style/imgs/logo.png"></span>
|
||||
<span>数据表格</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;/doc/modules/layim.html">
|
||||
<span class="layui-team-img"><img src="./res/style/imgs/logo.png"></span>
|
||||
<span>即时通讯</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;/doc/modules/form.html">
|
||||
<span class="layui-team-img"><img src="./res/style/imgs/logo.png"></span>
|
||||
<span>表单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;/doc/modules/layer.html">
|
||||
<span class="layui-team-img"><img src="./res/style/imgs/logo.png"></span>
|
||||
<span>弹出层</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;/doc/modules/upload.html">
|
||||
<span class="layui-team-img"><img src="./res/style/imgs/logo.png"></span>
|
||||
<span>文件上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;/doc/modules/rate.html">
|
||||
<span class="layui-team-img"><img src="./res/style/imgs/logo.png"></span>
|
||||
<span>评分</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('sample', layui.factory('sample'))
|
||||
</script>
|
||||
@@ -1,317 +0,0 @@
|
||||
<title>主页二</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>主页二</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
访问量
|
||||
<span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font">99,777</p>
|
||||
<p>
|
||||
总计访问量
|
||||
<span class="layuiadmin-span-color">88万 <i class="layui-icon"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
下载
|
||||
<span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font">33,555</p>
|
||||
<p>
|
||||
新下载
|
||||
<span class="layuiadmin-span-color">10% <i class="layui-icon"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
点赞
|
||||
<span class="layui-badge layui-bg-green layuiadmin-badge">年</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
|
||||
<p class="layuiadmin-big-font">999,777</p>
|
||||
<p>
|
||||
总赞
|
||||
<span class="layuiadmin-span-color">*** <i class="layui-icon layui-icon-heart"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
活跃用户
|
||||
<span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
|
||||
<p class="layuiadmin-big-font">66,777</p>
|
||||
<p>
|
||||
最近一个月
|
||||
<span class="layuiadmin-span-color">15% <i class="layui-icon"></i></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
访问量
|
||||
<div class="layui-btn-group layuiadmin-btn-group">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">去年</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-xs">今年</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-sm8">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-pagetwo">
|
||||
<div carousel-item id="LAY-index-pagetwo">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4">
|
||||
<div class="layuiadmin-card-list">
|
||||
<p class="layuiadmin-normal-font">月访问数</p>
|
||||
<span>同上期增长</span>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
|
||||
<div class="layui-progress-bar" lay-percent="30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layuiadmin-card-list">
|
||||
<p class="layuiadmin-normal-font">月下载数</p>
|
||||
<span>同上期增长</span>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
|
||||
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layuiadmin-card-list">
|
||||
<p class="layuiadmin-normal-font">月点赞数</p>
|
||||
<span>同上期增长</span>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
|
||||
<div class="layui-progress-bar" lay-percent="25%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">用户留言</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="layuiadmin-card-status layuiadmin-home2-usernote">
|
||||
<li>
|
||||
<h3>张三</h3>
|
||||
<p>作为 layui 官方原创的高质量管理系统模板，layuiAdmin
|
||||
已经逐步成为后端工程师开发管理系统的首选界面模板。</p>
|
||||
<span>5月30日 00:00</span>
|
||||
<a href="javascript:;" layadmin-event="replyNote" data-id="7"
|
||||
class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>诸葛亮</h3>
|
||||
<p>
|
||||
皓首匹夫！苍髯老贼！你枉活九十有六，一生未立寸功，只会摇唇鼓舌！助曹为虐！一条断脊之犬，还敢在我军阵前狺狺狂吠，我从未见过有如此厚颜无耻之人！</p>
|
||||
<span>5月02日 00:00</span>
|
||||
<a href="javascript:;" layadmin-event="replyNote" data-id="5"
|
||||
class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>张三</h3>
|
||||
<p>
|
||||
你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！</p>
|
||||
<span>5月11日 00:00</span>
|
||||
<a href="javascript:;" layadmin-event="replyNote" data-id="6"
|
||||
class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>杜甫</h3>
|
||||
<p>人才虽高，不务学问，不能致圣。刘向十日画一水，五日画一石。</p>
|
||||
<span>4月11日 00:00</span>
|
||||
<a href="javascript:;" layadmin-event="replyNote" data-id="2"
|
||||
class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>鲁迅</h3>
|
||||
<p>路本是无所谓有和无的，走的人多了，就没路了。。</p>
|
||||
<span>4月28日 00:00</span>
|
||||
<a href="javascript:;" layadmin-event="replyNote" data-id="4"
|
||||
class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>张爱玲</h3>
|
||||
<p>
|
||||
于千万人之中遇到你所要遇到的人，于千万年之中，时间的无涯的荒野中，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话好说，唯有轻轻的问一声：“噢，原来你也在这里？”</p>
|
||||
<span>4月11日 00:00</span>
|
||||
<a href="javascript:;" layadmin-event="replyNote" data-id="1"
|
||||
class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm8">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">本周活跃用户列表</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table layuiadmin-page-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户名</th>
|
||||
<th>最后登录时间</th>
|
||||
<th>状态</th>
|
||||
<th>获得赞</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="first">张三</span></td>
|
||||
<td><i class="layui-icon layui-icon-log"> 11:20</i></td>
|
||||
<td><span>在线</span></td>
|
||||
<td>22 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="second">张三</span></td>
|
||||
<td><i class="layui-icon layui-icon-log"> 10:40</i></td>
|
||||
<td><span>在线</span></td>
|
||||
<td>21 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="third">张三</span></td>
|
||||
<td><i class="layui-icon layui-icon-log"> 01:30</i></td>
|
||||
<td><i>离线</i></td>
|
||||
<td>66 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td><i class="layui-icon layui-icon-log"> 21:18</i></td>
|
||||
<td><i>离线</i></td>
|
||||
<td>45 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td><i class="layui-icon layui-icon-log"> 09:30</i></td>
|
||||
<td><span>在线</span></td>
|
||||
<td>21 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td><i class="layui-icon layui-icon-log"> 21:18</i></td>
|
||||
<td><i>在线</i></td>
|
||||
<td>45 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td><i class="layui-icon layui-icon-log"> 09:30</i></td>
|
||||
<td><span>在线</span></td>
|
||||
<td>21 <i class="layui-icon layui-icon-praise"></i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">项目进展</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<table id="LAY-home-homepage2"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">访客地区分布</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm4">
|
||||
<table class="layui-table layuiadmin-page-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>地区</th>
|
||||
<th>人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>浙江</td>
|
||||
<td>62310</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>上海</td>
|
||||
<td>59190</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>广东</td>
|
||||
<td>55891</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>北京</td>
|
||||
<td>51919</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>山东</td>
|
||||
<td>39231</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>湖北</td>
|
||||
<td>37109</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="layui-col-sm8">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-pagethree">
|
||||
<div carousel-item id="LAY-index-pagethree">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('sample', layui.factory('sample'))
|
||||
</script>
|
||||
@@ -1,99 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>layer iframe 示例</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="../../../../start/layui/css/layui.css" media="all">
|
||||
<style>
|
||||
body {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #999;
|
||||
padding: 5px 10px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input class="layui-input" placeholder="标记" id="LAY_mark">
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-primary" data-type="auto">让层自适应iframe</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="parentPopup">在父层弹出一个层</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="setParent">给父页面传值</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="close">在内部关闭iframe</button>
|
||||
</div>
|
||||
|
||||
<script src="../../../../start/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use('layer', function () {
|
||||
var $ = layui.$
|
||||
, layer = layui.layer
|
||||
, index = parent.layer.getFrameIndex(window.name) //获取窗口索引
|
||||
|
||||
var active = {
|
||||
//让层自适应iframe
|
||||
auto: function () {
|
||||
$('body').append('插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。')
|
||||
parent.layer.iframeAuto(index)
|
||||
}
|
||||
|
||||
//在父层弹出一个层
|
||||
, parentPopup: function () {
|
||||
parent.layer.msg('Hi, man', { shade: 0.3 })
|
||||
}
|
||||
|
||||
//给父页面传值
|
||||
, setParent: function () {
|
||||
var id = '#LAY_layer_iframe_demo'
|
||||
, mark = $('#LAY_mark')
|
||||
, val = mark.val()
|
||||
|
||||
if (val === '') {
|
||||
mark.focus()
|
||||
parent.layer.msg('请填写标记')
|
||||
return true
|
||||
}
|
||||
|
||||
parent.layer.msg('您将标记 [ ' + val + ' ] 成功传送给了父窗口')
|
||||
parent.layui.$(id).text('我被改变了')
|
||||
parent.layer.tips('Look here', id, {
|
||||
time: 5000
|
||||
})
|
||||
parent.layer.close(index)
|
||||
}
|
||||
|
||||
|
||||
//在内部关闭iframe
|
||||
, close: function (set) {
|
||||
parent.layer.close(index)
|
||||
}
|
||||
}
|
||||
|
||||
$('.layui-btn-container .layui-btn').on('click', function () {
|
||||
var othis = $(this)
|
||||
, type = othis.data('type')
|
||||
active[type] && active[type].call(this)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,2 +0,0 @@
|
||||
<title>Bing</title>
|
||||
<iframe src="//cn.bing.com/" frameborder="0" class="layadmin-iframe"></iframe>
|
||||
@@ -1,3 +0,0 @@
|
||||
|
||||
尽管 layuiAdmin 采用的是单页面应用开发模式，但有时你可能需要 iframe 嵌入一个页面，layuiAdmin 对此做了支持。
|
||||
该目录存放的就是 iframe 页面的视图文件。
|
||||
@@ -1,258 +1,104 @@
|
||||
<!--
|
||||
Name: 主页模板
|
||||
Author: 耗子
|
||||
Date: 2022-11-30
|
||||
-->
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div id="address1" class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div style="background: #fff;" class="layui-colla-content layui-show">
|
||||
<div class="text" style="overflow: hidden;height: 22px;">
|
||||
<div class="layui-carousel" id="home_ad" lay-filter="home_ad">
|
||||
<div carousel-item="">
|
||||
<a style="background: #fff;" href="https://hzbk.net"
|
||||
title="耗子博客" target="_blank"><i class="layui-icon layui-icon-release"></i> 耗子博客</a>
|
||||
<a style="background: #fff;" href="https://weavatar.com"
|
||||
title="WeAvatar" target="_blank"><i class="layui-icon layui-icon-release"></i>
|
||||
WeAvatar - 互联网公共头像服务</a>
|
||||
<a style="background: #fff;" href="https://wepublish.cn"
|
||||
title="WePublish" target="_blank"><i class="layui-icon layui-icon-release"></i>
|
||||
WePublish - WordPress的本土化版本</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="monitor1" class="layui-col-md6">
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">资源使用</div>
|
||||
<div class="layui-card-body layadmin-takerates">
|
||||
<div class="layui-progress" lay-showPercent="yes" lay-filter="home_cpu">
|
||||
<h3 id="home_cpu">CPU信息加载中</h3>
|
||||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showPercent="yes" lay-filter="home_mem">
|
||||
<h3 id="home_mem">内存信息加载中</h3>
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="monitor2" class="layui-col-md3">
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">系统负载</div>
|
||||
<div class="layui-card-body layadmin-takerates">
|
||||
<div class="layui-progress" lay-showPercent="yes" lay-filter="uptime_1">
|
||||
<h3>近1分钟</h3>
|
||||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showPercent="yes" lay-filter="uptime_5">
|
||||
<h3>近5分钟</h3>
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
实时流量
|
||||
<span class="layui-badge layui-bg-blue layuiadmin-badge">发送 / 接收</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p style="text-align: center;"><b id="home_net_now">获取中...</b></p>
|
||||
</div>
|
||||
<div class="layui-card-header">
|
||||
累计流量
|
||||
<span class="layui-badge layui-bg-blue layuiadmin-badge">发送 / 接收</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p style="text-align: center;"><b id="home_net_total">获取中...</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">快捷方式</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">应用</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-shortcut" lay-anim="">
|
||||
<div carousel-item="">
|
||||
<ul class="layui-row layui-col-space10 layui-this">
|
||||
<script type="text/html" template lay-url="/api/panel/info/getHomePlugins">
|
||||
@{{# layui.each(d.data, function(index, item){ }}
|
||||
<li class="layui-col-xs4 layui-col-md2 layui-col-sm4">
|
||||
<a lay-href="/plugin/@{{ item.slug }}">
|
||||
<i class="layui-icon layui-icon-engine"></i>
|
||||
<cite>@{{ item.name }}</cite>
|
||||
</a>
|
||||
</li>
|
||||
@{{# }); }}
|
||||
@{{# if(d.data.length === 0){ }}
|
||||
这里好像啥也没有...
|
||||
@{{# } }}
|
||||
</script>
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-shortcut">
|
||||
<div carousel-item>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="home/homepage1">
|
||||
<i class="layui-icon layui-icon-console"></i>
|
||||
<cite>主页一</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="home/homepage2">
|
||||
<i class="layui-icon layui-icon-chart"></i>
|
||||
<cite>主页二</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="component/layer/list">
|
||||
<i class="layui-icon layui-icon-template-1"></i>
|
||||
<cite>弹层</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="/senior/im/">
|
||||
<i class="layui-icon layui-icon-chat"></i>
|
||||
<cite>聊天</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="component/progress/index">
|
||||
<i class="layui-icon layui-icon-find-fill"></i>
|
||||
<cite>进度条</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="app/workorder/list">
|
||||
<i class="layui-icon layui-icon-survey"></i>
|
||||
<cite>工单</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="user/user/list">
|
||||
<i class="layui-icon layui-icon-user"></i>
|
||||
<cite>用户</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/system/website">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>设置</cite>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs3">
|
||||
<a lay-href="set/user/info">
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<cite>我的资料</cite>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">待办事项</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-backlog">
|
||||
<div carousel-item>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs6">
|
||||
<a lay-href="app/content/comment" class="layadmin-backlog-body">
|
||||
<h3>待审评论</h3>
|
||||
<p><cite>66</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a lay-href="app/forum/list" class="layadmin-backlog-body">
|
||||
<h3>待审帖子</h3>
|
||||
<p><cite>12</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a lay-href="template/goodslist" class="layadmin-backlog-body">
|
||||
<h3>待审商品</h3>
|
||||
<p><cite>99</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});"
|
||||
class="layadmin-backlog-body">
|
||||
<h3>待发货</h3>
|
||||
<p><cite>20</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-row layui-col-space10">
|
||||
<li class="layui-col-xs6">
|
||||
<a href="javascript:;" class="layadmin-backlog-body">
|
||||
<h3>待审友情链接</h3>
|
||||
<p><cite style="color: #FF5722;">5</cite></p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-dataview">
|
||||
<div carousel-item id="LAY-index-dataview">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
<!--<div></div>-->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">访客地区分布</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm4">
|
||||
<table class="layui-table layuiadmin-page-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>地区</th>
|
||||
<th>人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>浙江</td>
|
||||
<td>62310</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>上海</td>
|
||||
<td>59190</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>广东</td>
|
||||
<td>55891</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>北京</td>
|
||||
<td>51919</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>山东</td>
|
||||
<td>39231</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>湖北</td>
|
||||
<td>37109</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="layui-col-sm8">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-pagethree-home">
|
||||
<div carousel-item id="LAY-index-pagethree-home">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-tab layui-tab-brief layadmin-latestData">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">今日热搜</li>
|
||||
<li>今日热帖</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<table id="LAY-index-topSearch"></table>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<table id="LAY-index-topCard"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -261,137 +107,201 @@
|
||||
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">版本信息</div>
|
||||
<div class="layui-card-header">基本信息</div>
|
||||
<div class="layui-card-body layui-text layadmin-version">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="100">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>页面模式</td>
|
||||
<td>
|
||||
<script type="text/html" template>
|
||||
{{ layui.admin.mode === 'spa' ? '单页面' : layui.admin.mode }}
|
||||
</script>
|
||||
<td>系统信息</td>
|
||||
<td id="home_os_name">
|
||||
获取中...
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
<td>
|
||||
<script type="text/html" template>
|
||||
v{{ layui.admin.v }}
|
||||
</script>
|
||||
<td>面板版本</td>
|
||||
<td id="home_panel_version">
|
||||
获取中...
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Layui</td>
|
||||
<td>
|
||||
<script type="text/html" template>
|
||||
v{{ layui.v }}
|
||||
</script>
|
||||
<td>运行时间</td>
|
||||
<td id="home_uptime">
|
||||
获取中...
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主要特色</td>
|
||||
<td>单页面 / 响应式 / 清爽 / 极简</td>
|
||||
<td>操作</td>
|
||||
<td>
|
||||
<button id="update_panel" class="layui-btn layui-btn-xs">更新</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">效果报告</div>
|
||||
<div class="layui-card-body layadmin-takerates">
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长"
|
||||
lay-offset="-15"></span>）</h3>
|
||||
<div class="layui-progress-bar" lay-percent="65%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降"
|
||||
lay-offset="-15"></span>）</h3>
|
||||
<div class="layui-progress-bar" lay-percent="32%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进度占用</div>
|
||||
<div class="layui-card-body layadmin-takerates">
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>CPU使用率</h3>
|
||||
<div class="layui-progress-bar" lay-percent="58%"></div>
|
||||
</div>
|
||||
<div class="layui-progress" lay-showPercent="yes">
|
||||
<h3>内存占用率</h3>
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">项目进展</div>
|
||||
<div class="layui-card-body" style="padding: 22px 15px;">
|
||||
<table id="LAY-home-homepage-console"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">产品动态</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-carousel layadmin-carousel layadmin-news" data-autoplay="true" data-anim="fade"
|
||||
lay-filter="news">
|
||||
<div carousel-item>
|
||||
<div><a href="#" class="layui-bg-red">layuiAdmin 快速上手文档</a></div>
|
||||
<div><a href="#" class="layui-bg-green">layuiAdmin 技术问答专区</a></div>
|
||||
<div><a href="#" class="layui-bg-blue">layuiAdmin 模板官网</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
模板心语
|
||||
<i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>
|
||||
关于面板
|
||||
<i class="layui-icon layui-icon-tips" lay-tips="你干嘛，哎哟！" lay-offset="5"></i>
|
||||
</div>
|
||||
<div class="layui-card-body layui-text layadmin-text">
|
||||
<blockquote class="layui-elem-quote">
|
||||
<p>所谓“单页版”，即 SPA（单页面应用系统）开发模式，也就是所有的页面动作都是在一个宿主页面中完成，通常用于前后端分离。其中视图层全权由前端把控，数据一律走
|
||||
Ajax 异步请求。layuiAdmin 内部实现了一套基于 location.hash
|
||||
的路由和模板机制，这使得你可以很轻松地实现界面的跳转与渲染。另外注意的是，接口鉴权不再适用于传统的
|
||||
session 模式，一般需要采用
|
||||
JWT。总体来说，刚开始使用会相对有些复杂，但使用习惯后，项目会更易维护。</p>
|
||||
<p>子曰：君子不用防，小人防不住。</p>
|
||||
<p>请尊重知识产权，尊重他人劳动成果。</p>
|
||||
<p style="color: red;">开发组祝大家2023新年快乐！新的一年永无Bug，永不宕机！</p>
|
||||
</blockquote>
|
||||
<blockquote class="layui-elem-quote">
|
||||
<p>欢迎您使用耗子Linux面板。如遇到问题/Bug，可通过 <a
|
||||
href="https://jq.qq.com/?_wv=1027&k=I1oJKSTH">Q群12370907</a> / <a
|
||||
target="_blank" href="https://pd.qq.com/s/fyol46wfy">QQ频道</a> 寻求帮助</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
//加载 modules 目录下的对应模块
|
||||
/*
|
||||
var home_timer;
|
||||
var uptime_1 = '获取中', uptime_5 = '获取中', uptime_15 = '获取中';
|
||||
|
||||
小贴士：
|
||||
这里 console 模块对应 的 console.js 并不会重复加载，
|
||||
然而该页面的视图则是重新插入到容器，那如何保证能重新来控制视图？有两种方式：
|
||||
1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use
|
||||
2): 直接在 layui.use 方法的回调中书写业务代码，即:
|
||||
layui.use('console', function(){
|
||||
//同 console.js 中的 layui.define 回调中的代码
|
||||
});
|
||||
function refresh_home_info() {
|
||||
layui.use(['index', 'jquery', 'admin'], function () {
|
||||
let $ = layui.jquery
|
||||
, admin = layui.admin
|
||||
, element = layui.element;
|
||||
|
||||
这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。
|
||||
let device = layui.device();
|
||||
let cpu_info;
|
||||
admin.req({
|
||||
url: "/api/panel/info/getNowMonitor"
|
||||
, method: 'get'
|
||||
, success: function (result) {
|
||||
if (result.code !== 0) {
|
||||
console.log('耗子Linux面板：系统资源信息获取失败，接口返回' + result);
|
||||
layer.msg('系统资源获取失败，请刷新重试！')
|
||||
return false;
|
||||
}
|
||||
element.progress('home_cpu', result.data.cpu_use);
|
||||
element.progress('home_mem', result.data.mem_use_p);
|
||||
element.progress('uptime_1', result.data.uptime_1_p);
|
||||
element.progress('uptime_5', result.data.uptime_5_p);
|
||||
uptime_1 = result.data.uptime_1;
|
||||
uptime_5 = result.data.uptime_5;
|
||||
uptime_15 = result.data.uptime_15;
|
||||
// 判断一下移动设备不显示CPU型号，放不下。。。
|
||||
if (device.mobile) {
|
||||
cpu_info = result.data.cpu_info.physical + 'CPU ' + result.data.cpu_info.cores + '核心 ' + result.data.cpu_info.siblings + '线程';
|
||||
} else {
|
||||
cpu_info = result.data.cpu_info.name + ' ' + result.data.cpu_info.physical + 'CPU ' + result.data.cpu_info.cores + '核心 ' + result.data.cpu_info.siblings + '线程';
|
||||
}
|
||||
$('#home_net_total').html(result.data.tx_total + ' / ' + result.data.rx_total);
|
||||
$('#home_net_now').html(result.data.tx_now + '/s / ' + result.data.rx_now + '/s');
|
||||
$('#home_cpu').text(cpu_info);
|
||||
$('#home_mem').text('使用' + result.data.mem_use + 'MB / ' + '总计' + result.data.mem_total + 'MB');
|
||||
element.render('progress');
|
||||
}
|
||||
, error: function (xhr, status, error) {
|
||||
console.log('耗子Linux面板：ajax请求出错，错误' + error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
layui.use('console', layui.factory('console'))
|
||||
// 先执行一次
|
||||
refresh_home_info();
|
||||
// 然后设置个定时器3s一次刷新
|
||||
clearInterval(home_timer);
|
||||
home_timer = setInterval(refresh_home_info, 3000);
|
||||
// 获取系统信息，这部分信息无需更新。
|
||||
layui.use(['index', 'jquery', 'admin', 'carousel'], function () {
|
||||
let $ = layui.jquery
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, carousel = layui.carousel;
|
||||
carousel.render({
|
||||
elem: '#home_ad'
|
||||
, width: '100%'
|
||||
, height: '200px'
|
||||
, anim: 'fade'
|
||||
, arrow: 'none'
|
||||
, indicator: 'none'
|
||||
});
|
||||
admin.req({
|
||||
url: "/api/panel/info/getSystemInfo"
|
||||
, method: 'get'
|
||||
, success: function (result) {
|
||||
if (result.code !== 0) {
|
||||
console.log('耗子Linux面板：系统信息获取失败，接口返回' + result);
|
||||
layer.msg('系统信息获取失败，请刷新重试！')
|
||||
return false;
|
||||
}
|
||||
$('#home_os_name').text(result.data.os_name);
|
||||
$('#home_panel_version').text(result.data.panel_version);
|
||||
$('#home_uptime').text('已不间断运行 ' + result.data.uptime + ' 天');
|
||||
}
|
||||
, error: function (xhr, status, error) {
|
||||
console.log('耗子Linux面板：ajax请求出错，错误' + error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 监听鼠标悬停到uptime上的事件
|
||||
// 用于显示1分钟、5分钟、15分钟的负载
|
||||
layui.use(['jquery', 'layer'], function () {
|
||||
let $ = layui.jquery
|
||||
, layer = layui.layer
|
||||
, admin = layui.admin;
|
||||
$('#monitor2').hover(function () {
|
||||
layer.tips('1分钟负载：' + uptime_1 + '<br>5分钟负载：' + uptime_5 + '<br>15分钟负载：' + uptime_15, '#monitor2', {
|
||||
tips: 1,
|
||||
time: 0
|
||||
});
|
||||
}, function () {
|
||||
layer.closeAll('tips');
|
||||
});
|
||||
// 监听更新按钮点击事件
|
||||
$('#update_panel').click(function () {
|
||||
index = layer.msg('正在获取版本信息...', {
|
||||
icon: 16
|
||||
, time: 0
|
||||
});
|
||||
admin.req(
|
||||
{
|
||||
url: '/api/panel/info/checkUpdate'
|
||||
, method: 'get'
|
||||
, success: function (result) {
|
||||
layer.close(index);
|
||||
if (result.code !== 0) {
|
||||
layer.msg('获取版本信息失败，请刷新重试！')
|
||||
return false;
|
||||
}
|
||||
if (result.data.version) {
|
||||
admin.popup({
|
||||
title: '提示'
|
||||
,
|
||||
shade: 0
|
||||
,
|
||||
anim: -1
|
||||
,
|
||||
area: ['400px', '200px']
|
||||
,
|
||||
id: 'layadmin-layer-skin-update-panel'
|
||||
,
|
||||
skin: 'layui-anim layui-anim-upbit'
|
||||
,
|
||||
content: '最新版本：' + result.data.version + '<br><br>更新日志：' + result.data.describe + '<br><br>请在SSH执行<span class="layui-badge-rim">panel update</span>以更新面板！'
|
||||
});
|
||||
} else {
|
||||
layer.msg('当前已是最新版本！')
|
||||
}
|
||||
}
|
||||
, error: function (xhr, status, error) {
|
||||
layer.close(index);
|
||||
layer.msg('获取版本信息失败，请刷新重试！')
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -4,17 +4,7 @@
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="layui-nav-item layadmin-flexible" lay-unselect>
|
||||
<a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
|
||||
<i class="layui-icon layui-icon-shrink-right" id="Panel_app_flexible"></i>
|
||||
</a>
|
||||
</li>
|
||||
<!--<li class="layui-nav-item layui-this layui-hide-xs layui-hide-sm layui-show-md-inline-block">
|
||||
<a lay-href="" title="">
|
||||
控制台
|
||||
</a>
|
||||
</li>-->
|
||||
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
||||
<a href="http://www.baidu.com#/" target="_blank" title="前台">
|
||||
<i class="layui-icon layui-icon-website"></i>
|
||||
<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
@@ -22,21 +12,16 @@
|
||||
<i class="layui-icon layui-icon-refresh-3"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
||||
<input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search"
|
||||
layadmin-event="serach" lay-action="template/search/keywords=">
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
|
||||
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a lay-href="app/message/" layadmin-event="message">
|
||||
<i class="layui-icon layui-icon-notice"></i>
|
||||
|
||||
<!-- 如果有新消息，则显示小圆点 -->
|
||||
<script type="text/html" template lay-url="./res/json/message/new.js">
|
||||
{{# if(d.data.newmsg){ }}
|
||||
<span class="layui-badge-dot"></span>
|
||||
<a lay-href="task" layadmin-event="message">
|
||||
<script type="text/html" template lay-url="/api/panel/task/getStatus">
|
||||
{{# if(d.data){ }}
|
||||
<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
|
||||
{{# } else { }}
|
||||
<i class="layui-icon layui-icon-component"></i>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
@@ -57,44 +42,35 @@
|
||||
<i class="layui-icon layui-icon-screen-full"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<script type="text/html" template lay-url="./res/json/user/session.js"
|
||||
<li style="margin-right: 15px;" class="layui-nav-item" lay-unselect>
|
||||
<script type="text/html" template lay-url="/api/panel/user/getInfo"
|
||||
lay-done="layui.element.render('nav', 'layadmin-layout-right');">
|
||||
<a href="javascript:;">
|
||||
<cite>{{= d.data.username }}</cite>
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a lay-href="set/user/info">基本资料</a></dd>
|
||||
<dd><a lay-href="set/user/password">修改密码</a></dd>
|
||||
<dd><a lay-href="setting">修改密码</a></dd>
|
||||
<hr>
|
||||
<dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
|
||||
<dd lay-href="logout" style="text-align: center;"><a>退出</a></dd>
|
||||
</dl>
|
||||
</script>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
||||
<a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
|
||||
<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 侧边菜单 -->
|
||||
<div class="layui-side layui-side-menu">
|
||||
<div class="layui-side-scroll">
|
||||
<script type="text/html" template lay-url="./res/json/menu.js?v={{= layui.admin.v }}"
|
||||
<script type="text/html" template lay-url="/api/panel/info/getMenu?v={{ layui.cache.version }}"
|
||||
lay-done="layui.element.render('nav', 'layadmin-system-side-menu');" id="TPL_layout">
|
||||
|
||||
<div class="layui-logo" lay-href="">
|
||||
<span>{{ layui.setter.name || '' }}</span>
|
||||
{{ config('panel.name') }}
|
||||
</div>
|
||||
|
||||
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
|
||||
lay-filter="layadmin-system-side-menu">
|
||||
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
|
||||
{{#
|
||||
var path = layui.router().path
|
||||
var path = layui.router().path
|
||||
,pathURL = layui.admin.correctRouter(path.join('/'))
|
||||
,dataName = layui.setter.response.dataName;
|
||||
|
||||
@@ -110,10 +86,8 @@
|
||||
}
|
||||
,url = (item.jump && typeof item.jump === 'string') ? item.jump : item.name;
|
||||
}}
|
||||
<li data-name="{{= item.name || '' }}" data-jump="{{= item.jump || '' }}"
|
||||
class="layui-nav-item {{= classSelected() }}">
|
||||
<a href="javascript:;" {{- hasChildren ? '' : 'lay-href="'+ url +'"' }} lay-tips="{{= item.title
|
||||
}}" lay-direction="2">
|
||||
<li data-name="{{= item.name || '' }}" data-jump="{{= item.jump || '' }}" class="layui-nav-item {{= classSelected() }}">
|
||||
<a href="javascript:;" {{- hasChildren ? '' : 'lay-href="'+ url +'"' }} lay-tips="{{= item.title }}" lay-direction="2">
|
||||
<i class="layui-icon {{= item.icon }}"></i>
|
||||
<cite>{{= item.title }}</cite>
|
||||
</a>
|
||||
@@ -133,11 +107,9 @@
|
||||
? item2.jump
|
||||
: [item.name, item2.name, ''].join('/');
|
||||
}}
|
||||
<dd data-name="{{= item2.name || '' }}" data-jump="{{= item2.jump || '' }}"
|
||||
{{- classSelected2() ? (
|
||||
'class="'+ classSelected2() +'"') : '' }}>
|
||||
<a href="javascript:;" {{- hasChildren2 ? '' : 'lay-href="'+ url2 +'"' }}>{{= item2.title
|
||||
}}</a>
|
||||
<dd data-name="{{= item2.name || '' }}" data-jump="{{= item2.jump || '' }}"
|
||||
{{- classSelected2() ? ('class="'+ classSelected2() +'"') : '' }}>
|
||||
<a href="javascript:;" {{- hasChildren2 ? '' : 'lay-href="'+ url2 +'"' }}>{{= item2.title }}</a>
|
||||
{{# if(hasChildren2){ }}
|
||||
<dl class="layui-nav-child">
|
||||
{{# layui.each(item2.list, function(index3, item3){
|
||||
@@ -147,11 +119,9 @@
|
||||
? item3.jump
|
||||
: [item.name, item2.name, item3.name].join('/')
|
||||
}}
|
||||
<dd data-name="{{= item3.name || '' }}" data-jump="{{= item3.jump || '' }}"
|
||||
{{- match ?
|
||||
'class="layui-this"' : '' }}>
|
||||
<a href="javascript:;" lay-href="{{= url3 }}" {{- item3.iframe ? 'lay-iframe="true"' :
|
||||
'' }}>{{= item3.title }}</a>
|
||||
<dd data-name="{{= item3.name || '' }}" data-jump="{{= item3.jump || '' }}"
|
||||
{{- match ? 'class="layui-this"' : '' }}>
|
||||
<a href="javascript:;" lay-href="{{= url3 }}" {{- item3.iframe ? 'lay-iframe="true"' : '' }}>{{= item3.title }}</a>
|
||||
</dd>
|
||||
{{# }); }}
|
||||
</dl>
|
||||
@@ -171,7 +141,7 @@
|
||||
<!-- 页面标签 -->
|
||||
<script type="text/html" template lay-done="layui.element.render('nav', 'layadmin-pagetabs-nav')">
|
||||
{{# if(layui.setter.pageTabs){ }}
|
||||
<div class="layadmin-pagetabs" id="Panel_app_tabs">
|
||||
<div class="layadmin-pagetabs" id="LAY_app_tabs">
|
||||
<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
|
||||
<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
|
||||
<div class="layui-icon layadmin-tabs-control layui-icon-down">
|
||||
@@ -187,7 +157,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
|
||||
<ul class="layui-tab-title" id="Panel_app_tabsheader">
|
||||
<ul class="layui-tab-title" id="LAY_app_tabsheader">
|
||||
<li lay-id="/"><i class="layui-icon layui-icon-home"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -197,7 +167,7 @@
|
||||
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="layui-body" id="Panel_app_body">
|
||||
<div class="layui-body" id="LAY_app_body">
|
||||
<div class="layadmin-tabsbody-item layui-show"></div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
<title>柱状图</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>高级</cite></a>
|
||||
<a><cite>Echarts集成</cite></a>
|
||||
<a><cite>柱状图</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">标准柱状图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-normcol">
|
||||
<div carousel-item id="LAY-index-normcol">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">堆积柱状图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-heapcol">
|
||||
<div carousel-item id="LAY-index-heapcol">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">不等距柱形图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-diffcol">
|
||||
<div carousel-item id="LAY-index-diffcol">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">彩虹柱形图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-colorline">
|
||||
<div carousel-item id="LAY-index-colorline">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">标准条形图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-normbar">
|
||||
<div carousel-item id="LAY-index-normbar">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">堆积条形图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-heapbar">
|
||||
<div carousel-item id="LAY-index-heapbar">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">旋风条形图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-windline">
|
||||
<div carousel-item id="LAY-index-windline">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('senior', layui.factory('senior'))
|
||||
</script>
|
||||
@@ -1,102 +0,0 @@
|
||||
<title>折线图</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>高级</cite></a>
|
||||
<a><cite>Echarts集成</cite></a>
|
||||
<a><cite>折线图</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">标准折线图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-normline">
|
||||
<div carousel-item id="LAY-index-normline">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">堆积折线图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-heapline">
|
||||
<div carousel-item id="LAY-index-heapline">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">不等距折线图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-diffline">
|
||||
<div carousel-item id="LAY-index-diffline">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">堆积面积图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-heaparea">
|
||||
<div carousel-item id="LAY-index-heaparea">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">面积图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-area">
|
||||
<div carousel-item id="LAY-index-area">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">对数轴</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-logline">
|
||||
<div carousel-item id="LAY-index-logline">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('senior', layui.factory('senior'))
|
||||
</script>
|
||||
@@ -1,34 +0,0 @@
|
||||
<title>地图</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>高级</cite></a>
|
||||
<a><cite>Echarts集成</cite></a>
|
||||
<a><cite>地图</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">地图</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
|
||||
lay-filter="LAY-index-plat">
|
||||
<div carousel-item id="LAY-index-plat">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('senior', layui.factory('senior'))
|
||||
</script>
|
||||
@@ -1,472 +0,0 @@
|
||||
<title>社交聊天</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>高级</cite></a>
|
||||
<a><cite>通讯系统</cite></a>
|
||||
<a><cite>WebIM UI</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<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" id="LAY-layim-demo">
|
||||
<button class="layui-btn layui-btn-primary" data-type="chat">自定义会话</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="message">接受好友的消息</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="messageAudio">接受音频消息</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="messageVideo">接受视频消息</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="messageTemp">接受临时会话消息</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-primary" data-type="add">申请好友</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="addqun">申请加群</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="addFriend">同意好友</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="addGroup">增加群组到主面板</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="removeFriend">删除主面板好友</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="removeGroup">删除主面板群组</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="layui-btn layui-btn-primary" data-type="setGray">置灰离线好友</button>
|
||||
<button class="layui-btn layui-btn-primary" data-type="unGray">取消好友置灰</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.config({
|
||||
layimPath: layui.cache.base + 'layim/', //配置 layim.js 所在目录
|
||||
layimResPath: layui.cache.base + 'layim/res/' //layim 资源文件所在目录
|
||||
}).use(['layim'], function () {
|
||||
var layim = layui.layim
|
||||
|
||||
// 演示自动回复
|
||||
var autoReplay = [
|
||||
'模拟消息 1',
|
||||
'模拟消息 2',
|
||||
'模拟消息 3',
|
||||
'模拟消息 4',
|
||||
'模拟消息 5',
|
||||
'模拟消息 6',
|
||||
'模拟消息 7',
|
||||
'模拟消息 8',
|
||||
'模拟消息 9'
|
||||
]
|
||||
|
||||
//基础配置
|
||||
layim.config({
|
||||
//初始化接口
|
||||
init: {
|
||||
url: layui.setter.paths.base + 'json/layim/getList.js'
|
||||
, data: {}
|
||||
}
|
||||
|
||||
//查看群员接口
|
||||
, members: {
|
||||
url: layui.setter.paths.base + 'json/layim/getMembers.js'
|
||||
, data: {}
|
||||
}
|
||||
|
||||
//上传图片接口
|
||||
, uploadImage: {
|
||||
url: '' //（返回的数据格式见下文）
|
||||
, type: '' //默认post
|
||||
}
|
||||
|
||||
//上传文件接口
|
||||
, uploadFile: {
|
||||
url: '' //（返回的数据格式见下文）
|
||||
, type: '' //默认post
|
||||
}
|
||||
|
||||
, isAudio: true
|
||||
, isVideo: true
|
||||
|
||||
//扩展工具栏
|
||||
, tool: [{
|
||||
alias: 'code'
|
||||
, title: '代码'
|
||||
, icon: ''
|
||||
}]
|
||||
|
||||
// 更多参数见 layim 文档
|
||||
|
||||
, msgbox: layui.cache.layimResPath + 'html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
|
||||
, find: layui.cache.layimResPath + 'html/find.html' //发现页面地址，若不开启，剔除该项即可
|
||||
, chatLog: layui.cache.layimResPath + 'html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可
|
||||
|
||||
})
|
||||
|
||||
//事件 - 在线状态的切换事件
|
||||
layim.on('online', function (data) {
|
||||
//console.log(data);
|
||||
})
|
||||
|
||||
//事件 - 签名修改
|
||||
layim.on('sign', function (value) {
|
||||
//console.log(value);
|
||||
})
|
||||
|
||||
//事件 - 自定义工具栏点击，以添加代码为例
|
||||
layim.on('tool(code)', function (insert) {
|
||||
layer.prompt({
|
||||
title: '插入代码'
|
||||
, formType: 2
|
||||
, shade: 0
|
||||
}, function (text, index) {
|
||||
layer.close(index)
|
||||
insert('[pre class=layui-code]' + text + '[/pre]') //将内容插入到编辑器
|
||||
})
|
||||
})
|
||||
|
||||
//事件 - layim建立就绪
|
||||
layim.on('ready', function (res) {
|
||||
|
||||
//console.log(res.mine);
|
||||
|
||||
layim.msgbox(5) //模拟消息盒子有新消息，实际使用时，一般是动态获得
|
||||
|
||||
// 向主面板添加群组
|
||||
layim.addList({
|
||||
type: 'group'
|
||||
, avatar: 'http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg'
|
||||
, groupname: '前端开发'
|
||||
, id: '12333333'
|
||||
, members: 0
|
||||
})
|
||||
|
||||
// 向主面板添加好友（如果检测到该 socket）
|
||||
layim.addList({
|
||||
type: 'friend'
|
||||
, avatar: layim.cache().base.defaultAvatar // 这里赋值默认头像，实际使用时请改成正式头像地址
|
||||
, username: '测试222'
|
||||
, groupid: 2
|
||||
, id: '1233333312121212'
|
||||
, remark: 'remark'
|
||||
})
|
||||
|
||||
setTimeout(function () {
|
||||
//接受消息（如果检测到该socket）
|
||||
|
||||
//临时会话的消息，即消息发送者不在好友列表上
|
||||
/*
|
||||
layim.getMessage({
|
||||
username: "Hi"
|
||||
,avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
|
||||
,id: "10000111"
|
||||
,type: "friend"
|
||||
,cid: Math.random()*100000|0 //模拟消息id
|
||||
,content: "临时："+ new Date().getTime()
|
||||
});*/
|
||||
|
||||
//好友的消息
|
||||
layim.getMessage({
|
||||
username: '测试1'
|
||||
, avatar: ''
|
||||
, id: '100001'
|
||||
, type: 'friend'
|
||||
, cid: Math.random() * 100000 | 0 //模拟消息 id，会赋值在li的data-cid上，以便完成一些消息的操作（如撤回），可不填
|
||||
, content: '这是模拟接受的一段测试消息。标记：' + new Date().getTime()
|
||||
})
|
||||
|
||||
}, 1500)
|
||||
})
|
||||
|
||||
//事件 - 发送消息
|
||||
layim.on('sendMessage', function (data) {
|
||||
var To = data.to
|
||||
//console.log(data);
|
||||
|
||||
if (To.type === 'friend') {
|
||||
layim.setChatStatus('<span style="color:#FF5722;">对方正在输入…</span>')
|
||||
}
|
||||
|
||||
//演示自动回复
|
||||
setTimeout(function () {
|
||||
var obj = {}
|
||||
if (To.type === 'group') {
|
||||
obj = {
|
||||
username: '模拟群员 ' + (Math.random() * 100 | 0)
|
||||
, avatar: layim.cache().base.defaultAvatar // 这里赋值默认头像，实际使用时请改成正式头像地址
|
||||
, id: To.id
|
||||
, type: To.type
|
||||
, content: autoReplay[Math.random() * 9 | 0]
|
||||
}
|
||||
} else {
|
||||
obj = {
|
||||
username: To.name
|
||||
, avatar: To.avatar
|
||||
, id: To.id
|
||||
, type: To.type
|
||||
, content: autoReplay[Math.random() * 9 | 0]
|
||||
}
|
||||
layim.setChatStatus('<span style="color:#FF5722;">在线</span>')
|
||||
}
|
||||
layim.getMessage(obj)
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
//事件 - 查看群员
|
||||
layim.on('members', function (data) {
|
||||
//console.log(data);
|
||||
})
|
||||
|
||||
//事件 - 聊天窗口的切换
|
||||
layim.on('chatChange', function (res) {
|
||||
var type = res.data.type
|
||||
//console.log(res.data.id)
|
||||
if (type === 'friend') {
|
||||
//模拟标注好友状态
|
||||
//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
|
||||
} else if (type === 'group') {
|
||||
//模拟系统消息
|
||||
layim.getMessage({
|
||||
system: true
|
||||
, id: res.data.id
|
||||
, type: 'group'
|
||||
, content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
//事件 - 更换背景
|
||||
layim.on('setSkin', function (filename, src) {
|
||||
console.log(filename)
|
||||
})
|
||||
|
||||
// 面板外的操作示例事件
|
||||
layui.use('util', function (util) {
|
||||
util.on('data-type', {
|
||||
chat: function () {
|
||||
//自定义会话
|
||||
layim.chat({
|
||||
name: '小测试'
|
||||
, type: 'friend'
|
||||
, avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
|
||||
, id: 1008612
|
||||
})
|
||||
layer.msg('即：会话对象不必非要在右下角主面板中')
|
||||
}
|
||||
, message: function () {
|
||||
//制造好友消息
|
||||
layim.getMessage({
|
||||
username: '测试1'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, id: '100001'
|
||||
, type: 'friend'
|
||||
, content: '这是一条测试内容。演示标记：' + new Date().getTime()
|
||||
, timestamp: new Date().getTime()
|
||||
})
|
||||
}
|
||||
, messageAudio: function () {
|
||||
//接受音频消息
|
||||
layim.getMessage({
|
||||
username: '测试1'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, id: '100001'
|
||||
, type: 'friend'
|
||||
, content: 'audio[//unpkg.com/outeres/audio/test.mp3]'
|
||||
, timestamp: new Date().getTime()
|
||||
})
|
||||
}
|
||||
, messageVideo: function () {
|
||||
//接受视频消息
|
||||
layim.getMessage({
|
||||
username: '测试1'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, id: '100001'
|
||||
, type: 'friend'
|
||||
, content: 'video[http://www.w3school.com.cn//i/movie.ogg]'
|
||||
, timestamp: new Date().getTime()
|
||||
})
|
||||
}
|
||||
, messageTemp: function () {
|
||||
//接受临时会话消息
|
||||
layim.getMessage({
|
||||
username: '测试X'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, id: '198909151014'
|
||||
, type: 'friend'
|
||||
, content: '临时：' + new Date().getTime()
|
||||
})
|
||||
}
|
||||
, add: function () {
|
||||
//实际使用时数据由动态获得
|
||||
layim.add({
|
||||
type: 'friend'
|
||||
, username: '测试Y'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, submit: function (group, remark, index) {
|
||||
layer.msg('好友申请已发送，请等待对方确认', {
|
||||
icon: 1
|
||||
, shade: 0.5
|
||||
}, function () {
|
||||
layer.close(index)
|
||||
})
|
||||
|
||||
//通知对方
|
||||
/*
|
||||
$.post('/im-applyFriend/', {
|
||||
uid: info.uid
|
||||
,from_group: group
|
||||
,remark: remark
|
||||
}, function(res){
|
||||
if(res.status != 0){
|
||||
return layer.msg(res.msg);
|
||||
}
|
||||
|
||||
layer.msg('好友申请已发送，请等待对方确认', {
|
||||
icon: 1
|
||||
,shade: 0.5
|
||||
}, function(){
|
||||
layer.close(index);
|
||||
});
|
||||
});
|
||||
*/
|
||||
}
|
||||
})
|
||||
}
|
||||
, addqun: function () {
|
||||
layim.add({
|
||||
type: 'group'
|
||||
, username: '测试群组1'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, group: layim.cache().friend
|
||||
, submit: function (group, remark, index) {
|
||||
layer.msg('申请已发送，请等待管理员确认', {
|
||||
icon: 1
|
||||
, shade: 0.5
|
||||
}, function () {
|
||||
layer.close(index)
|
||||
})
|
||||
|
||||
//通知对方
|
||||
/*
|
||||
$.post('/im-applyGroup/', {
|
||||
uid: info.uid
|
||||
,from_group: group
|
||||
,remark: remark
|
||||
}, function(res){
|
||||
|
||||
});
|
||||
*/
|
||||
}
|
||||
})
|
||||
}
|
||||
, addFriend: function () {
|
||||
var user = {
|
||||
type: 'friend'
|
||||
, id: 1234560
|
||||
, username: '测试A' //好友昵称，若申请加群，参数为：groupname
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png' //头像
|
||||
, sign: '测试内容'
|
||||
}
|
||||
layim.setFriendGroup({
|
||||
type: user.type
|
||||
, username: user.username
|
||||
, avatar: user.avatar
|
||||
, group: layim.cache().friend //获取好友列表数据
|
||||
, submit: function (group, index) {
|
||||
//一般在此执行Ajax和WS，以通知对方已经同意申请
|
||||
//……
|
||||
|
||||
//同意后，将好友追加到主面板
|
||||
layim.addList({
|
||||
type: user.type
|
||||
, username: user.username
|
||||
, avatar: user.avatar
|
||||
, groupid: group //所在的分组id
|
||||
, id: user.id //好友ID
|
||||
, sign: user.sign //好友签名
|
||||
})
|
||||
|
||||
layer.close(index)
|
||||
}
|
||||
})
|
||||
}
|
||||
, addGroup: function () {
|
||||
layer.msg('已成功把[测试群组33]添加到群组里', {
|
||||
icon: 1
|
||||
})
|
||||
//增加一个群组
|
||||
layim.addList({
|
||||
type: 'group'
|
||||
, avatar: '//unpkg.com/outeres/demo/avatar/0.png'
|
||||
, groupname: '测试群组33'
|
||||
, id: '12333333'
|
||||
, members: 0
|
||||
})
|
||||
}
|
||||
, removeFriend: function () {
|
||||
layer.msg('已成功删除[测试2]', {
|
||||
icon: 1
|
||||
})
|
||||
//删除一个好友
|
||||
layim.removeList({
|
||||
id: 100001222
|
||||
, type: 'friend'
|
||||
})
|
||||
}
|
||||
, removeGroup: function () {
|
||||
layer.msg('已成功删除[测试群组33]', {
|
||||
icon: 1
|
||||
})
|
||||
//删除一个群组
|
||||
layim.removeList({
|
||||
id: 12333333
|
||||
, type: 'group'
|
||||
})
|
||||
}
|
||||
//置灰离线好友
|
||||
, setGray: function () {
|
||||
layim.setFriendStatus(168168, 'offline')
|
||||
|
||||
layer.msg('已成功将好友[测试4]置灰', {
|
||||
icon: 1
|
||||
})
|
||||
}
|
||||
//取消好友置灰
|
||||
, unGray: function () {
|
||||
layim.setFriendStatus(168168, 'online')
|
||||
|
||||
layer.msg('成功取消好友[测试4]置灰状态', {
|
||||
icon: 1
|
||||
})
|
||||
}
|
||||
//移动端版本
|
||||
, mobile: function () {
|
||||
var device = layui.device()
|
||||
var mobileHome = 'mobile.html'
|
||||
if (device.android || device.ios) {
|
||||
return location.href = mobileHome
|
||||
}
|
||||
var index = layer.open({
|
||||
type: 2
|
||||
, title: '移动版演示'
|
||||
, content: mobileHome
|
||||
, area: ['375px', '667px']
|
||||
, shadeClose: true
|
||||
, scrollbar: false
|
||||
, shade: 0.8
|
||||
, end: function () {
|
||||
layer.close(index + 2)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
该目录存放【高级】的视图文件
|
||||
@@ -1,69 +0,0 @@
|
||||
<title>邮件服务</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>设置</cite></a>
|
||||
<a><cite>邮件服务</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">邮件服务 - 模板</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-form" wid100 lay-filter="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">SMTP 服务器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="smtp_server" placeholder="smtp.domain.com" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">如：smtp.163.com</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">SMTP 端口号</label>
|
||||
<div class="layui-input-inline" style="width: 80px;">
|
||||
<input type="text" name="cache" lay-verify="number" value="25" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">一般为 25 或 465</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发件人邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="send_email" value="" placeholder="name@domain.com"
|
||||
lay-verify="email" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">发件人昵称</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="send_nickname" value="" placeholder="nickname"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="send_nickname" value="" placeholder="password"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="set_system_email">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('set', layui.factory('set'))
|
||||
</script>
|
||||
@@ -1,96 +0,0 @@
|
||||
<title>网站设置</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>设置</cite></a>
|
||||
<a><cite>网站设置</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">网站设置</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
|
||||
<div class="layui-form" wid100 lay-filter="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">网站名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="sitename" value="" placeholder="Name" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">网站域名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="domain" lay-verify="url" placeholder="domain.com" value=""
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">缓存时间</label>
|
||||
<div class="layui-input-inline" style="width: 80px;">
|
||||
<input type="text" name="cache" lay-verify="number" value="0" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline layui-input-company">分钟</div>
|
||||
<div class="layui-form-mid layui-word-aux">本地开发一般推荐设置为 0，线上环境建议设置为 10。
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">最大文件上传</label>
|
||||
<div class="layui-input-inline" style="width: 80px;">
|
||||
<input type="text" name="cache" lay-verify="number" value="2048" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline layui-input-company">KB</div>
|
||||
<div class="layui-form-mid layui-word-aux">提示：1 M = 1024 KB</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上传文件类型</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="cache" value="png|gif|jpg|jpeg|zip|rar" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">首页标题</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="title" class="layui-textarea" placeholder="title"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">META 关键词</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="keywords" class="layui-textarea"
|
||||
placeholder="多个关键词用英文状态 , 号分割"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">META 描述</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="description" class="layui-textarea"
|
||||
placeholder="description"></textarea>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">版权信息</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="copyright" class="layui-textarea" placeholder="©"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="set_website">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('set', layui.factory('set'))
|
||||
</script>
|
||||
@@ -1,102 +0,0 @@
|
||||
<title>设置我的资料</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>设置</cite></a>
|
||||
<a><cite>我的资料</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">设置我的资料</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
|
||||
<div class="layui-form" lay-filter="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">我的角色</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="role" lay-verify="">
|
||||
<option value="1" selected>超级管理员</option>
|
||||
<option value="2" disabled>普通管理员</option>
|
||||
<option value="3" disabled>审核员</option>
|
||||
<option value="4" disabled>编辑人员</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" value="张三" readonly class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">昵称</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="nickname" value="tester" lay-verify="nickname"
|
||||
autocomplete="off" placeholder="请输入昵称" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">性别</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked>
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">头像</label>
|
||||
<div class="layui-input-inline">
|
||||
<input name="avatar" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址"
|
||||
value="https://unpkg.com/outeres@0.0.5/demo/000.jpg" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline layui-btn-container" style="width: auto;">
|
||||
<button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
|
||||
<i class="layui-icon"></i>上传图片
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="cellphone" value="" lay-verify="phone" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="email" value="" lay-verify="email" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">备注</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('set', layui.factory('set'))
|
||||
</script>
|
||||
@@ -1,56 +0,0 @@
|
||||
<title>设置我的密码</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>设置</cite></a>
|
||||
<a><cite>我的密码</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">修改密码</div>
|
||||
<div class="layui-card-body" pad15>
|
||||
|
||||
<div class="layui-form" lay-filter="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">当前密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="oldPassword" lay-verify="required" lay-verType="tips"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">新密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="pass" lay-verType="tips"
|
||||
autocomplete="off" id="LAY_password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">6到16个字符</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">确认新密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="repassword" lay-verify="repass" lay-verType="tips"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="setmypass">确认修改</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use('set', layui.factory('set'))
|
||||
</script>
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
该目录存放【设置】的视图文件
|
||||
@@ -1,17 +0,0 @@
|
||||
<div class="layui-card-header">版本</div>
|
||||
<div class="layui-card-body layui-text layadmin-about">
|
||||
<blockquote class="layui-elem-quote" style="border: none;">
|
||||
<script type="text/html" template>
|
||||
<p>当前版本：v{{ layui.admin.v }}</p>
|
||||
</script>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="layui-card-header">关于</div>
|
||||
<div class="layui-card-body layui-text layadmin-about">
|
||||
<blockquote class="layui-elem-quote" style="border: none;">
|
||||
一套纯静态的 HTML 网页界面模板，以开源免费的 layui 基础组件和页面模板 Demo 为组成，没有任何后端程序及数据库存储等服务端代码。
|
||||
<br><br>开发者使用该网页模板，可省去前端的大量工作，从而更高效地开发 Web 应用系统。
|
||||
<br><br>该模板受国家计算机软件著作权保护（登记号：2018SR410669），禁止公开及传播模板源文件、盗版及非法倒卖等，违者将自行承担相应的法律责任。
|
||||
</blockquote>
|
||||
</div>
|
||||
@@ -1,21 +0,0 @@
|
||||
<!-- 更多面板的模板 -->
|
||||
<div class="layadmin-menu-list">
|
||||
<div class="layui-card-header" layadmin-event="about">
|
||||
<a href="javascript:;">
|
||||
<i class="layui-icon layui-icon-about" style="font-size: 20px;"></i>
|
||||
获得产品
|
||||
</a>
|
||||
</div>
|
||||
<div class="layui-card-header" layadmin-event="theme">
|
||||
<a href="javascript:;">
|
||||
<i class="layui-icon layui-icon-theme"></i>
|
||||
设置主题
|
||||
</a>
|
||||
</div>
|
||||
<div class="layui-card-header" layadmin-event="note">
|
||||
<a href="javascript:;">
|
||||
<i class="layui-icon layui-icon-note"></i>
|
||||
本地便签
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,43 +0,0 @@
|
||||
<!-- 主题设置模板 -->
|
||||
|
||||
<script type="text/html" template lay-done="layui.data.theme();">
|
||||
{{#
|
||||
var local = layui.data(layui.setter.tableName)
|
||||
,theme = local.theme || {}
|
||||
,themeColorIndex = parseInt((theme && theme.color) ? theme.color.index : 0) || 0;
|
||||
}}
|
||||
|
||||
<div class="layui-card-header">
|
||||
配色方案
|
||||
</div>
|
||||
<div class="layui-card-body layadmin-setTheme">
|
||||
<ul class="layadmin-setTheme-color">
|
||||
{{# layui.each(layui.setter.theme.color, function(index, item){ }}
|
||||
<li layadmin-event="setTheme" data-index="{{ index }}" data-alias="{{ item.alias }}"
|
||||
{{ index=== themeColorIndex ?
|
||||
'class="layui-this"' : '' }} title="{{ item.alias }}">
|
||||
<div class="layadmin-setTheme-header" style="background-color: {{ item.header }};"></div>
|
||||
<div class="layadmin-setTheme-side" style="background-color: {{ item.main }};">
|
||||
<div class="layadmin-setTheme-logo" style="background-color: {{ item.logo }};"></div>
|
||||
</div>
|
||||
</li>
|
||||
{{# }); }}
|
||||
</ul>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
layui.data.theme = function () {
|
||||
layui.use('form', function () {
|
||||
var form = layui.form
|
||||
, admin = layui.admin
|
||||
|
||||
//隐藏开关
|
||||
form.on('switch(system-theme-sideicon)', function () {
|
||||
admin.theme({
|
||||
hideSideIcon: this.checked
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,3 +0,0 @@
|
||||
|
||||
注意：
|
||||
该目录存放的是 layuiAdmin 的系统模板碎片，很多界面需要依赖到它，请勿剔除。
|
||||
@@ -1,47 +0,0 @@
|
||||
<title>标题</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>组件</cite></a>
|
||||
<a><cite>XXX</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
|
||||
</style>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">YYY</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">ZZZ</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,43 +0,0 @@
|
||||
<title>忘记密码</title>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>模板</cite></a>
|
||||
<a><cite>忘记密码</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 这段样式只是用于演示 */
|
||||
.layadmin-trailer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layadmin-trailer">
|
||||
即将开放
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, router = layui.router()
|
||||
|
||||
})
|
||||
</script>
|
||||
@@ -1,70 +1,101 @@
|
||||
<title>登入页面</title>
|
||||
<script type="text/html" template>
|
||||
<link rel="stylesheet" href="/res/adminui/src/css/login.css?v={{ layui.admin.v }}" media="all">
|
||||
</script>
|
||||
|
||||
<div class="layui-card layadmin-header">
|
||||
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||
<a lay-href="">主页</a>
|
||||
<a><cite>模板</cite></a>
|
||||
<a><cite>登入</cite></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">说明：正式登入页面将在 beta3 开放</div>
|
||||
<div class="layui-card-body" style="padding: 30px; 15px">
|
||||
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
|
||||
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label for="L_email" class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="L_email" name="email" required lay-verify="email" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="L_pass" class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" id="L_pass" name="pass" required lay-verify="required" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label for="L_vercode" class="layui-form-label">人类验证</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="L_vercode" name="vercode" required lay-verify="required"
|
||||
placeholder="请回答后面的问题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">
|
||||
<span style="color: #c00;">layui 怎么念？</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-filter="template-user-login" lay-submit>立即登录</button>
|
||||
<span style="padding-left:20px;">
|
||||
<a href="/user/forget">忘记密码？</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layadmin-user-login-main">
|
||||
<div class="layadmin-user-login-box layadmin-user-login-header">
|
||||
<h2 id="login-panel-name">{{ config('panel.name') }}</h2>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username"
|
||||
for="username"></label>
|
||||
<input type="text" name="username" id="username" lay-verify="required" placeholder="用户名"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password"
|
||||
for="password"></label>
|
||||
<input type="password" name="password" id="password" lay-verify="required"
|
||||
placeholder="密码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" style="margin-bottom: 20px;">
|
||||
{{--<input type="checkbox" name="remember" id="remember" lay-skin="primary" title="记住我">--}}
|
||||
<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=I1oJKSTH" class="layadmin-user-jump-change layadmin-link"
|
||||
style="margin-top: 7px;">忘记密码？</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="panel-login-submit">登 入</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-trans layadmin-user-login-footer">
|
||||
|
||||
<p>耗子Linux面板 © 耗子 All Rights Reserved</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin', 'form'], function () {
|
||||
var $ = layui.$
|
||||
layui.use(['admin', 'form', 'user'], function () {
|
||||
let $ = layui.$
|
||||
, setter = layui.setter
|
||||
, admin = layui.admin
|
||||
, element = layui.element
|
||||
, form = layui.form
|
||||
, router = layui.router()
|
||||
, search = router.search;
|
||||
|
||||
form.on('submit(template-user-login)', function (obj) {
|
||||
layer.msg('将得到的数据提交给服务端：<br>' + JSON.stringify(obj.field))
|
||||
console.log(obj)
|
||||
})
|
||||
// 判断并清除定时器
|
||||
if (typeof home_timer !== 'undefined') {
|
||||
clearInterval(home_timer);
|
||||
}
|
||||
if (typeof install_plugin_timer !== 'undefined') {
|
||||
clearInterval(install_plugin_timer);
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
form.render();
|
||||
|
||||
//提交
|
||||
form.on('submit(panel-login-submit)', function (obj) {
|
||||
|
||||
// 判断obj.field.remember是否存在
|
||||
if (obj.field.remember) {
|
||||
obj.field.remember = 1;
|
||||
} else {
|
||||
obj.field.remember = 0;
|
||||
}
|
||||
admin.req({
|
||||
url: '/api/panel/user/login'
|
||||
, data: obj.field
|
||||
, method: 'post'
|
||||
, done: function (res) {
|
||||
// 请求成功后，写入 access_token
|
||||
layui.data(setter.tableName, {
|
||||
key: setter.request.tokenName
|
||||
, value: res.data.access_token
|
||||
});
|
||||
|
||||
// 登入成功的提示与跳转
|
||||
layer.msg('登录成功', {
|
||||
offset: '15px'
|
||||
, icon: 1
|
||||
, time: 1000
|
||||
}, function () {
|
||||
/**
|
||||
* 可能是LayuiAdmin的bug，如果直接跳转到主页，会出现表格无法获取access_token的问题
|
||||
* 所以这里强制刷新到主页
|
||||
* location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
|
||||
*/
|
||||
location.href = '/';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
36
public/res/views/template/user/logout.html
Normal file
36
public/res/views/template/user/logout.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<script type="text/html" template>
|
||||
<link rel="stylesheet" href="/res/adminui/src/css/login.css?v={{ layui.admin.v }}" media="all">
|
||||
</script>
|
||||
|
||||
|
||||
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
|
||||
|
||||
<div class="layadmin-user-login-main">
|
||||
<div class="layadmin-user-login-box layadmin-user-login-header">
|
||||
<h2>已退出登录</h2>
|
||||
<p>页面即将自动跳转</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-trans layadmin-user-login-footer">
|
||||
|
||||
<p>耗子Linux面板 © 耗子 All Rights Reserved</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['admin'], function () {
|
||||
let admin = layui.admin
|
||||
// 判断并清除定时器
|
||||
if (typeof home_timer !== 'undefined') {
|
||||
clearInterval(home_timer)
|
||||
}
|
||||
if (typeof install_plugin_timer !== 'undefined') {
|
||||
clearInterval(install_plugin_timer)
|
||||
}
|
||||
setTimeout(function () {
|
||||
admin.exit()
|
||||
window.location = '/'
|
||||
}, 3000)
|
||||
})
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user