lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-11-24 16:43:14 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
贤心
2021-05-08 06:31:19 +08:00
parent 726cdd9ba5
commit aeebdc4223
36 changed files with 1175 additions and 820 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/all.html
View File

@@ -81,8 +81,8 @@ layui.use(function(){
,util = layui.util
,laydate = layui.laydate;
layer.msg('hello');
layer.closeAll();
layer.msg('hello layui');
//layer.closeAll();
//自动测试
(function(run){

2
examples/button.html
View File

@@ -24,7 +24,7 @@ body{padding: 10px;}
<div class="layui-btn-container">
<a href="" class="layui-btn layui-btn-primary">原始按钮</a>
<a href="" class="layui-btn">默认按钮</a>
<div class="layui-btn">默认按钮</div>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>

276
examples/element.html
View File

@@ -131,8 +131,8 @@ body{padding:20px;}
<br><br>
<blockquote class="layui-elem-quote">Layui正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote"> Layui 正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm"> Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架</blockquote>
<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格</legend>
@@ -165,270 +165,6 @@ body{padding:20px;}
灰色分割线
<hr class="layui-bg-gray">
<br><br>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</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="">大数据<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
</li>
</ul>
<br>
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd>
<a href="javascript:;">选项3</a>
</dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<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>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</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="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" 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="">跳转菜单</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="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br><br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<br><br>
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</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 class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</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 class="layui-tab" lay-filter="test" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
</ul>
</div>
@@ -438,14 +174,6 @@ body{padding:20px;}
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('tab(test)', function(data){
console.log(this, data);
});
element.on('nav(test)', function(elem){
console.log(elem)
});
element.on('collapse(test)', function(data){
console.log(data);
});

208
examples/element.nav.html Normal file
View File

@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>导航 - 常用元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
</style>
</head>
<body>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item">
<a href="javascript:;">方案</a>
<dl class="layui-nav-child layui-nav-child-c">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
<dl class="layui-nav-child layui-nav-child-r">
<dd><a href="">Your organizations</a></dd>
<dd><a href="">Settings</a></dd>
<hr>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
</ul>
<br>
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item layui-this"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<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>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</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="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" 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="">跳转菜单</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="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br><br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<br><br><br><br><br><br>
<script src="../src/layui.js"></script>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('nav(test)', function(elem){
console.log(elem)
});
});
</script>
</body>
</html>

109
examples/element.tab.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>选项卡 - 常用元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
</style>
</head>
<body>
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</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 class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</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 class="layui-tab" lay-filter="test" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
</ul>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('tab(test)', function(data){
console.log(this, data);
});
});
</script>
</body>
</html>

26
examples/flow.html
View File

@@ -25,17 +25,17 @@ img{width: 500px; height: 300px;}
</div>
<div class="demo" style="height: 200px; overflow: auto;">
<img lay-src="http://s16.mogucdn.com/p2/160919/upload_493j665e50b0i0g8j61iie6f5aa5c_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x531.jpg">
<img lay-src="http://s10.mogucdn.com/p2/160918/oj_4hge1j47hl5ie0fljd6d07ha3kj2l_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160914/iz_2lcjk0lbl8la70448hj0jg0l8gde5_305x330.jpg">
<img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg">
<img lay-src="http://s8.mogucdn.com/p1/160721/iz_ifqtszjqgazdsmtfhezdambqgyyde_305x330.jpg">
<img lay-src="http://s18.mogucdn.com/p2/160919/upload_4dh1hfflhi031ll1akh49i5aeldjl_183x213.png">
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_16e3b4d04ck34g1fb61d5llj47526_175x170.png">
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_132fe83d4gi1jb6gehc8ibcl6944e_175x170.png">
<div class="demo" style="height: 300px; overflow: auto;">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/error.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
</div>
@@ -55,7 +55,7 @@ layui.use('flow', function(){
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page < 3);
}, 500);
@@ -72,7 +72,7 @@ layui.use('flow', function(){
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page < 3);
}, 500);

19
examples/laydate.html
View File

@@ -121,12 +121,14 @@ layui.use('laydate', function(laydate){
//双控件
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime'
,type: 'date'
,trigger: 'click'
//,lang: 'en'
//,theme: 'grid'
,range: true //开启日期范围，默认使用“_”分割
//,value: '2021-03-27 00:00:00 - 2021-02-27 00:00:00'
,range: true //开启日期范围，默认使用“-”分割
,min: 0
,max: 7
//,value: '2021-05-08 - 2021-03-27'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@@ -140,9 +142,9 @@ layui.use('laydate', function(laydate){
elem: '#test2'
//,format: 'yyyy年MM月dd日'
,value: new Date(1534766888000)
,isInitValue: false
//,isInitValue: false
,format: 'yyyy/MM/dd'
,min: 7
//,max: 0
//,min: '2016-10-14'
//,max: -1
@@ -153,12 +155,15 @@ layui.use('laydate', function(laydate){
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
,change: function(value){
console.log(value);
}
});
//年选择器
laydate.render({
elem: '#test3'
,type: 'year'
,type: 'month'
//,range: true
//,trigger: 'click'
,done: function(value, date, endDate){
@@ -172,7 +177,7 @@ layui.use('laydate', function(laydate){
//年月选择器
laydate.render({
elem: '#test4'
,type: 'month'
,type: 'time'
,range: true
,trigger: 'click'
//,max: -30

32
examples/layer.html
View File

@@ -44,6 +44,13 @@ body{padding: 100px;}
</div>
<script>
var LAYUI_GLOBAL = {
//path: '../src/'
//,layerPath: '../release/layer/src/'
};
</script>
<script src="../src/layui.js"></script>
<!-- layer 独立版调试 -->
@@ -55,15 +62,20 @@ var runTest = function(run, $, layer){
if(!run) return;
var timer = setInterval(function(){
location.reload();
//location.reload();
}, 1000);
layer.alert(123);
$.ajax({
url: './all.html'
,beforeSend: function(){
layer.load();
//layer.ready(function(){
//layer.load();
//});
}
,success: function(){
return;
layer.closeAll('loading', function(){
setTimeout(function(){
if($('.layui-layer-loading').length){
@@ -117,18 +129,28 @@ layui.use('layer', function(){
});
}
,test3: function(){
layer.msg('玩命提示中');
layer.msg('提示中');
}
,test4: function(){
layer.tips('Hi，我是一个小提示', this, {tips: 1});
}
,test5: function(){
layer.open({
title:'更新论坛信息',
title:'自定义页面层',
type: 1,
skin: 'layui-layer-rim',
area: ['1000px', '580px'],
content: $('#test11111')
content: 'asas',
maxmin: true,
minStack: false, //最小化不堆叠在左下角
id: 'page1', //定义 ID，防止重复弹出
min: function(layero, index){
layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0});
return false;
}
});
}
,test6: function(){

67
examples/admin.html → examples/layout-admin.html
View File

@@ -5,19 +5,24 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 大布局 - Layui</title>
<title>layout 管理系统大布局 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layout demo</div>
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">nav 1</a></li>
<li class="layui-nav-item"><a href="">nav 2</a></li>
<li class="layui-nav-item"><a href="">nav 3</a></li>
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
@@ -26,19 +31,27 @@
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">set 1</a></dd>
<dd><a href="">set 2</a></dd>
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">Sign out</a></li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
@@ -84,7 +97,7 @@
</li>
<li>
该页面只是简单的管理系统的界面基础布局示例，并不是一整套界面布局方案，您可以关注基于 layui 的通用型管理系统界面模板解决方案：
<a href="https://www.layui.com/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
<a href="/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
</li>
<li>
layui 之所以赢得如此多人的青睐，更多是在于它“前后界面兼备”的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统的界面需求。
@@ -93,18 +106,21 @@
</ul>
</blockquote>
<br>
<a href="/doc/element/layout.html#admin" target="_blank" class="layui-btn">查看该布局代码</a>
<br><br><br>
<div class="layui-card layui-panel">
<div class="layui-card-header">
下面是充数内容，为的是出现滚动条
</div>
<div class="layui-card-body">
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真划到了底部呀
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
</div>
</div>
<br><br>
</div>
</div>
@@ -116,9 +132,30 @@
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>

0
examples/layout.html → examples/layout-grid.html
View File

3
examples/table-test.html
View File

@@ -90,9 +90,6 @@ layui.use(['table'], function(){
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
,page: {
}
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false

18
examples/table.html
View File

@@ -207,7 +207,8 @@ layui.use(['table', 'dropdown'], function(){
//全局设定某参数
table.set({
where: {
token: '默认 token 参数'
token: '全局的 token'
,access: '全局的 access'
}
//,defaultToolbar: ['filter']
,limit: 30
@@ -264,12 +265,12 @@ layui.use(['table', 'dropdown'], function(){
}
,headers: {headers_token: 'sasasas'}
,where: {
test: '初始 test 参数'
,token: '初始 token'
,where: $.extend({}, table.config.where, {
test: '渲染的 test'
,token: '渲染的 token'
,key: 'experience'
,order: 'asc'
}
})
,done: function(){
//下拉菜单
@@ -325,7 +326,8 @@ layui.use(['table', 'dropdown'], function(){
//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var config = obj.config;
var checkStatus = table.checkStatus(config.id);
switch(obj.event){
case 'add':
layer.msg('添加');
@@ -353,7 +355,7 @@ layui.use(['table', 'dropdown'], function(){
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v);
layer.alert(config.title || 'Table for layui-v'+ layui.v);
break;
case 'reload':
//深度重载
@@ -361,7 +363,7 @@ layui.use(['table', 'dropdown'], function(){
where: {
abc: 123
,test: '新的 test1'
,test: '重载的 test'
}
,page: {curr: 5, limit: 20}
,cols: ins1.config.cols

59
examples/upload.html
View File

@@ -45,7 +45,7 @@ hr{margin: 30px 0;}
<thead>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>上传进度</th>
<th>操作</th>
</thead>
<tbody id="demoList"></tbody>
@@ -56,34 +56,38 @@ hr{margin: 30px 0;}
<hr>
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon">&#xe67c;</i>换个样式</button>
<div class="layui-btn-container">
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon">&#xe67c;</i>换个样式</button>
<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe67c;</i>上传视频</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传音频</button>
<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe67c;</i>上传视频</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传音频</button>
</div>
<hr>
<button class="layui-btn testm" lay-data="{url: '/a/'}">参数设在元素上</button>
<button class="layui-btn testm" lay-data="{url: '/b/', accept: 'file',size:5}">参数设在元素上</button>
<div class="layui-btn-container">
<button class="layui-btn testm" lay-data="{url: '/a/'}">参数设在元素上</button>
<button class="layui-btn testm" lay-data="{url: '/b/', accept: 'file',size:5}">参数设在元素上</button>
</div>
<hr>
<div class="layui-upload">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal" id="test6">选择文件</button>
<button type="button" class="layui-btn" id="test7">开始上传</button>
</div>
<hr><br>
<div class="layui-upload-drag" id="test9">
<div class="layui-upload-drag" id="test8">
<i class="layui-icon">&#xe67c;</i>
<p>点击上传，或将文件拖拽到此处</p>
</div>
<hr><br>
绑定原始文件域：<input type="file" name="file" id="test8">
绑定原始文件域：<input type="file" name="file" id="test9">
<script src="../src/layui.js"></script>
<script>
@@ -136,8 +140,8 @@ layui.use(['upload', 'element'], function(){
element.progress('demo', '0%');
}
,progress: function(n, index, e){
console.log(n + '%', index, e); //获取进度百分比
,progress: function(n, elem, res, index){
console.log(n + '%', elem, res); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
}
});
@@ -152,7 +156,6 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test2'
,url: ''
,multiple: true
,number: 3
,size: 1024
@@ -174,7 +177,7 @@ layui.use(['upload', 'element'], function(){
var demoListView = $('#demoList');
var uploadListIns = upload.render({
elem: '#testList'
,url: ''
,url: 'http://httpbin.org/post'
,accept: 'file'
,multiple: true
,number: 3
@@ -188,10 +191,10 @@ layui.use(['upload', 'element'], function(){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td><div class="layui-progress" lay-filter="progress-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
,'<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(''));
@@ -208,17 +211,18 @@ layui.use(['upload', 'element'], function(){
});
demoListView.append(tr);
element.render('progress');
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
//if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
}
//}
this.error(index, upload);
}
,allDone: function(obj){
@@ -227,9 +231,12 @@ layui.use(['upload', 'element'], function(){
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){
console.log(n);
element.progress('progress-'+ index, n + '%'); //进度条
}
});
@@ -289,10 +296,10 @@ layui.use(['upload', 'element'], function(){
,auto: false
//,multiple: true
,bindAction: '#test7'
,choose: function(obj){
,choose1: function(obj){
var that = this;
obj.preview(function(index, file){
console.log(file.name)
console.log(file.name);
obj.resetFile(index, file, '123.jpg');
});
}
@@ -306,7 +313,7 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test8'
,url: ''
,url: 'http://httpbin.org/post'
,done: function(res){
console.log(res);
}
@@ -314,12 +321,14 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test9'
,url: 'http://httpbin.org/post'
,url: ''
,done: function(res){
console.log(res);
}
});
});
</script>
</body>