update
This commit is contained in:
贤心
parent
726cdd9ba5
commit
aeebdc4223
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"main": "dist/layui.js",
|
||||
"version": "2.6.5",
|
||||
"version": "2.6.6",
|
||||
"homepage": "https://github.com/sentsin/layui",
|
||||
"authors": [
|
||||
"sentsin <xu@sentsin.com>"
|
||||
|
||||
2
dist/css/layui.css
vendored
2
dist/css/layui.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/modules/laydate/default/laydate.css
vendored
2
dist/css/modules/laydate/default/laydate.css
vendored
File diff suppressed because one or more lines are too long
7
dist/layui.js
vendored
7
dist/layui.js
vendored
File diff suppressed because one or more lines are too long
@ -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){
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
208
examples/element.nav.html
Normal 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
109
examples/element.tab.html
Normal 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>
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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(){
|
||||
|
||||
@ -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>
|
||||
@ -90,9 +90,6 @@ layui.use(['table'], function(){
|
||||
,title: '用户数据表'
|
||||
,url: 'json/table/demo1.json'
|
||||
//,size: 'lg'
|
||||
,page: {
|
||||
|
||||
}
|
||||
|
||||
//,autoSort: false //是否自动排序。如果否，则由服务端排序
|
||||
//,loading: false
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon"></i>上传文件</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon"></i>换个样式</button>
|
||||
|
||||
<button type="button" class="layui-btn" id="test4"><i class="layui-icon"></i>上传视频</button>
|
||||
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传音频</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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"></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>
|
||||
|
||||
14
gulpfile.js
14
gulpfile.js
@ -1,6 +1,6 @@
|
||||
|
||||
/**
|
||||
layui Build
|
||||
/*!
|
||||
* layui Build
|
||||
*/
|
||||
|
||||
var pkg = require('./package.json');
|
||||
@ -27,7 +27,7 @@ var argv = require('minimist')(process.argv.slice(2), {
|
||||
|
||||
//注释
|
||||
,note = [
|
||||
'/** <%= pkg.realname %> v<%= pkg.version %> | Released under the <%= pkg.license %> license */\n <%= js %>'
|
||||
'/*! <%= pkg.realname %> v<%= pkg.version %> | Released under the <%= pkg.license %> license */\n <%= js %>'
|
||||
,{pkg: pkg, js: ';'}
|
||||
]
|
||||
|
||||
@ -54,7 +54,11 @@ var argv = require('minimist')(process.argv.slice(2), {
|
||||
]
|
||||
,dir = destDir(ver);
|
||||
|
||||
return gulp.src(src).pipe(uglify())
|
||||
return gulp.src(src).pipe(uglify({
|
||||
output: {
|
||||
ascii_only: true //escape Unicode characters in strings and regexps
|
||||
}
|
||||
}))
|
||||
.pipe(concat('layui.js', {newLine: ''}))
|
||||
.pipe(header.apply(null, note))
|
||||
.pipe(gulp.dest('./'+ dir));
|
||||
@ -150,7 +154,7 @@ gulp.task('laydate', function(){
|
||||
|
||||
//注释
|
||||
,notes = [
|
||||
'/** \n @Name：<%= title %> \n @License: <%= license %> \n */ \n\n'
|
||||
'/*! \n * <%= title %> \n * <%= license %> Licensed \n */ \n\n'
|
||||
,{title: 'layDate 日期与时间组件', license: 'MIT'}
|
||||
];
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "layui",
|
||||
"realname": "layui",
|
||||
"version": "2.6.5",
|
||||
"description": "Classic modular front-end component library",
|
||||
"version": "2.6.6",
|
||||
"description": "Classic modular front-end ui component library",
|
||||
"main": "dist/layui.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
|
||||
@ -258,7 +258,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-layout-admin .layui-body{position: absolute; top: 60px; padding-bottom: 44px;}
|
||||
.layui-layout-admin .layui-main{width: auto; margin: 0 15px;}
|
||||
.layui-layout-admin .layui-footer{position: fixed; left: 200px; right: 0; bottom: 0; z-index: 990; height: 44px; line-height: 44px; padding: 0 15px; box-shadow: -1px 0 4px rgb(0 0 0 / 12%); background-color: #FAFAFA;}
|
||||
.layui-layout-admin .layui-logo{position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #009688; font-size: 16px;}
|
||||
.layui-layout-admin .layui-logo{position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #009688; font-size: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);}
|
||||
.layui-layout-admin .layui-header .layui-nav{background: none;}
|
||||
.layui-layout-left{position: absolute !important; left: 200px; top: 0;}
|
||||
.layui-layout-right{position: absolute !important; right: 0; top: 0;}
|
||||
@ -573,13 +573,15 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-text ul li{margin-top: 5px; list-style-type: disc;}
|
||||
.layui-text em,
|
||||
.layui-word-aux{color: #999 !important; padding-left: 5px !important; padding-right: 5px !important;}
|
||||
.layui-text p{margin: 10px 0;}
|
||||
.layui-text p:first-child{margin-top: 0;}
|
||||
|
||||
/* 字体大小及颜色 */
|
||||
.layui-font-12{font-size: 12px;}
|
||||
.layui-font-14{font-size: 14px;}
|
||||
.layui-font-16{font-size: 16px;}
|
||||
.layui-font-18{font-size: 18px;}
|
||||
.layui-font-20{font-size: 20px;}
|
||||
.layui-font-12{font-size: 12px !important;;}
|
||||
.layui-font-14{font-size: 14px !important;}
|
||||
.layui-font-16{font-size: 16px !important;}
|
||||
.layui-font-18{font-size: 18px !important;}
|
||||
.layui-font-20{font-size: 20px !important;}
|
||||
|
||||
.layui-font-red{color: #FF5722 !important;} /*赤*/
|
||||
.layui-font-orange{color: #FFB800!important;} /*橙*/
|
||||
@ -597,7 +599,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
|
||||
*/
|
||||
|
||||
.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; padding: 0 18px; border: 1px solid transparent; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; border: 1px solid transparent; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-btn:hover{opacity: 0.8; filter:alpha(opacity=80); color: #fff;}
|
||||
.layui-btn:active{opacity: 1; filter:alpha(opacity=100);}
|
||||
.layui-btn+.layui-btn{margin-left: 10px;}
|
||||
@ -618,7 +620,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
/* 暖色 */.layui-btn-warm{background-color: #FFB800;}
|
||||
/* 警告 */.layui-btn-danger{background-color: #FF5722;}
|
||||
/* 选中 */.layui-btn-checked{background-color: #5FB878;}
|
||||
/* 禁用 */.layui-btn-disabled,.layui-btn-disabled:hover,.layui-btn-disabled:active{border-color: #eee; background-color: #FBFBFB; color: #d2d2d2; cursor: not-allowed; opacity: 1;}
|
||||
/* 禁用 */.layui-btn-disabled, .layui-btn-disabled:hover, .layui-btn-disabled:active{border-color: #eee !important; background-color: #FBFBFB !important; color: #d2d2d2 !important; cursor: not-allowed !important; opacity: 1;}
|
||||
|
||||
/* 大型 */.layui-btn-lg{height: 44px; line-height: 44px; padding: 0 25px; font-size: 16px;}
|
||||
/* 小型 */.layui-btn-sm{height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px;}
|
||||
@ -754,7 +756,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.layui-form-item .layui-form-label{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.layui-form-item .layui-inline{display: block; margin-right: 0; margin-bottom: 20px; clear: both;}
|
||||
.layui-form-item .layui-inline:after{content:'\20'; clear:both; display:block; height:0;}
|
||||
.layui-form-item .layui-input-inline{display: block; float: none; left: -3px; width: auto; margin: 0 0 10px 112px; }
|
||||
.layui-form-item .layui-input-inline{display: block; float: none; left: -3px; width: auto !important; margin: 0 0 10px 112px; }
|
||||
.layui-form-item .layui-input-inline+.layui-form-mid{margin-left: 110px; top: -5px; padding: 0;}
|
||||
.layui-form-item .layui-form-checkbox{margin-right: 5px; margin-bottom: 5px;}
|
||||
}
|
||||
@ -936,7 +938,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
.laytable-cell-numbers{padding: 0; text-align: center;}
|
||||
|
||||
.layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;}
|
||||
.layui-table-body .layui-none{line-height: 26px; padding: 15px; text-align: center; color: #999;}
|
||||
.layui-table-body .layui-none{line-height: 26px; padding: 30px 15px; text-align: center; color: #999;}
|
||||
.layui-table-fixed{position: absolute; left: 0; top: 0; z-index: 101;}
|
||||
.layui-table-fixed .layui-table-body{overflow: hidden;}
|
||||
.layui-table-fixed-l{box-shadow: 0 -1px 8px rgba(0,0,0,.08);}
|
||||
@ -993,7 +995,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
/** 文件上传 **/
|
||||
.layui-upload-file{display: none!important; opacity: .01; filter: Alpha(opacity=1);}
|
||||
.layui-upload-list{margin: 10px 0;}
|
||||
.layui-upload-choose{padding: 0 10px; color: #999;}
|
||||
.layui-upload-choose{max-width: 200px; padding: 0 10px; color: #999; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.layui-upload-drag{position: relative; display: inline-block; padding: 30px; border: 1px dashed #e2e2e2; background-color: #fff; text-align: center; cursor: pointer; color: #999;}
|
||||
.layui-upload-drag .layui-icon{font-size: 50px; color: #009688;}
|
||||
.layui-upload-drag[lay-over]{border-color: #009688}
|
||||
@ -1001,6 +1003,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-upload-iframe{position: absolute; width: 0; height: 0; border: 0; visibility: hidden}
|
||||
.layui-upload-wrap{position: relative; display: inline-block; vertical-align: middle;}
|
||||
.layui-upload-wrap .layui-upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;}
|
||||
.layui-btn-container .layui-upload-choose{padding-left: 0;}
|
||||
|
||||
|
||||
/* 基础菜单元素 */
|
||||
@ -1008,7 +1011,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-menu *{box-sizing: border-box;}
|
||||
.layui-menu li,
|
||||
.layui-menu-body-title a{padding: 5px 15px;}
|
||||
.layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 22px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
|
||||
.layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
|
||||
.layui-menu li:hover{background-color: #F6F6F6; }
|
||||
|
||||
.layui-menu-item-parent:hover>.layui-menu-body-panel{display: block; animation-name: layui-fadein; animation-duration: 0.3s; animation-fill-mode: both; animation-delay:.2s;}
|
||||
@ -1063,60 +1066,42 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
|
||||
|
||||
|
||||
/** 穿梭框 **/
|
||||
.layui-transfer-box,
|
||||
.layui-transfer-header,
|
||||
.layui-transfer-search{border-width: 0; border-style: solid; border-color: #eee}
|
||||
.layui-transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;}
|
||||
.layui-transfer-box .layui-form-checkbox{width: 100%; margin: 0 !important;}
|
||||
.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 10px; border-bottom-width: 1px;}
|
||||
.layui-transfer-search{position:relative; padding: 10px; border-bottom-width: 1px;}
|
||||
.layui-transfer-search .layui-input{height: 32px; padding-left: 30px; font-size: 12px;}
|
||||
.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; margin-top: -8px; color: #666;}
|
||||
.layui-transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;}
|
||||
.layui-transfer-active .layui-btn{display: block; margin: 0; padding: 0 15px; background-color: #5FB878; border-color: #5FB878; color: #fff;}
|
||||
.layui-transfer-active .layui-btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;}
|
||||
.layui-transfer-active .layui-btn:first-child{margin-bottom: 15px;}
|
||||
.layui-transfer-active .layui-btn .layui-icon{margin: 0; font-size: 14px !important;}
|
||||
.layui-transfer-data{padding: 5px 0; overflow: auto;}
|
||||
.layui-transfer-data li{height: 32px; line-height: 32px; padding: 0 10px;}
|
||||
.layui-transfer-data li:hover{background-color: #F6F6F6; transition: .5s all;}
|
||||
.layui-transfer-data .layui-none{padding: 15px 10px; text-align: center; color: #999;}
|
||||
|
||||
|
||||
/** 导航菜单 **/
|
||||
.layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}
|
||||
.layui-nav *{font-size: 14px;}
|
||||
.layui-nav .layui-nav-item{position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; line-height: 60px;}
|
||||
.layui-nav .layui-nav-item a{display: block; padding: 0 20px; color: #fff; color: rgba(255,255,255,.7); transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-nav-bar,
|
||||
.layui-nav .layui-this:after,
|
||||
.layui-nav-tree .layui-nav-itemed:after{position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: #5FB878; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-nav .layui-this:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: #5FB878; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-nav-bar{z-index: 1000;}
|
||||
.layui-nav[lay-bar="disabled"] .layui-nav-bar{display: none;}
|
||||
.layui-nav[lay-bar="disabled"].layui-this:after{}
|
||||
.layui-nav .layui-this a
|
||||
,.layui-nav .layui-nav-item a:hover{color: #fff;}
|
||||
.layui-nav .layui-this:after{content: ""; top: auto; bottom: 0; width: 100%;}
|
||||
.layui-nav .layui-this:after{top: auto; bottom: 0; width: 100%;}
|
||||
.layui-nav-img{width: 30px; height: 30px; margin-right: 10px; border-radius: 50%;}
|
||||
|
||||
.layui-nav .layui-nav-more{content: ""; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-nav .layui-nav-more{position: absolute; top: 50%; right: 3px; margin-top: -4px; border-width: 6px; border-top-style: solid; border-top-color: #fff; border-top-color: rgba(255,255,255,.7);}
|
||||
.layui-nav .layui-nav-more{position: absolute; top: 0; right: 3px; left: auto !important; margin-top: 0; font-size: 12px; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-nav .layui-nav-mored,
|
||||
.layui-nav-itemed > a .layui-nav-more{margin-top: -9px; border-style: dashed; border-color: transparent; border-bottom-style: solid; border-bottom-color: #fff;}
|
||||
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);}
|
||||
|
||||
|
||||
.layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
|
||||
.layui-nav .layui-nav-child a{color: #333;}
|
||||
.layui-nav .layui-nav-child a:hover{background-color: #F6F6F6; color: #5FB878;}
|
||||
.layui-nav-child dd{position: relative;}
|
||||
.layui-nav-child dd.layui-this{background-color: #5FB878; color: #fff;}
|
||||
.layui-nav .layui-nav-child dd.layui-this a{background-color: #5FB878; color: #fff;}
|
||||
.layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #eee; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
|
||||
.layui-nav .layui-nav-child a{color: #666; color: rgba(0,0,0,.8);}
|
||||
.layui-nav .layui-nav-child a:hover{background-color: #F6F6F6; color: rgba(0,0,0,.8);}
|
||||
.layui-nav-child dd{margin: 1px 0; position: relative;}
|
||||
.layui-nav-child dd.layui-this{background-color: #F6F6F6; color: #000;}
|
||||
.layui-nav-child dd.layui-this:after{display: none;}
|
||||
.layui-nav-child-r{left: auto; right: 0;}
|
||||
.layui-nav-child-c{text-align: center;}
|
||||
|
||||
/* 垂直导航菜单 */.layui-nav-tree{width: 200px; padding: 0;}
|
||||
.layui-nav-tree .layui-nav-item{display: block; width: 100%; line-height: 45px;}
|
||||
.layui-nav-tree .layui-nav-item a{position: relative; height: 45px; line-height: 45px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.layui-nav-tree .layui-nav-item a:hover{background-color: #4E5465;}
|
||||
.layui-nav-tree .layui-nav-item{display: block; width: 100%; line-height: 40px;}
|
||||
.layui-nav-tree .layui-nav-item a{position: relative; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.layui-nav-tree .layui-nav-item>a{padding-top: 5px; padding-bottom: 5px;}
|
||||
.layui-nav-tree .layui-nav-more{right: 15px; padding: 6px 0;}
|
||||
.layui-nav-tree .layui-nav-bar{width: 5px; height: 0;}
|
||||
.layui-side .layui-nav-tree .layui-nav-bar{width: 2px;}
|
||||
.layui-nav-tree .layui-this,
|
||||
.layui-nav-tree .layui-this>a,
|
||||
.layui-nav-tree .layui-this>a:hover,
|
||||
@ -1129,25 +1114,16 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-nav-tree .layui-nav-bar{background-color: #009688;}
|
||||
|
||||
.layui-nav-tree .layui-nav-child{position: relative; z-index: 0; top: 0; border: none; box-shadow: none;}
|
||||
.layui-nav-tree .layui-nav-child a{height: 40px; line-height: 40px;}
|
||||
.layui-nav-tree .layui-nav-child dd{margin: 0;}
|
||||
.layui-nav-tree .layui-nav-child a{color: #fff; color: rgba(255,255,255,.7);}
|
||||
.layui-nav-tree .layui-nav-child a:hover,
|
||||
.layui-nav-tree .layui-nav-child{background: none; color: #fff;}
|
||||
.layui-nav-tree .layui-nav-more{right: 10px;}
|
||||
|
||||
.layui-nav-itemed>.layui-nav-child{display: block; padding: 0; background-color: rgba(0,0,0,.3) !important;}
|
||||
.layui-nav-itemed>.layui-nav-child{display: block; background-color: rgba(0,0,0,.3) !important;}
|
||||
.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child{display: block;}
|
||||
|
||||
/* 侧边 */.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
|
||||
|
||||
/* 导航主题色 */.layui-bg-blue .layui-nav-bar,
|
||||
.layui-bg-blue .layui-this:after,
|
||||
.layui-bg-blue .layui-nav-itemed:after{background-color: #93D1FF;}
|
||||
.layui-bg-blue .layui-nav-child dd.layui-this{background-color: #1E9FFF;}
|
||||
.layui-nav-tree.layui-bg-blue .layui-nav-title a,
|
||||
.layui-nav-tree.layui-bg-blue .layui-nav-title a:hover,
|
||||
.layui-bg-blue .layui-nav-itemed>a{background-color: #007DDB !important;}
|
||||
|
||||
|
||||
/** 面包屑 **/
|
||||
.layui-breadcrumb{visibility: hidden; font-size: 0;}
|
||||
@ -1163,7 +1139,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-tab-title{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-tab-title li{position: relative; line-height: 40px; min-width: 65px; padding: 0 15px; text-align: center; cursor: pointer;}
|
||||
.layui-tab-title li a{display: block;}
|
||||
.layui-tab-title li a{display: block; margin: 0 -15px;}
|
||||
.layui-tab-title .layui-this{color: #000;}
|
||||
|
||||
.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;}
|
||||
@ -1298,7 +1274,27 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
/** 代码文本修饰 **/
|
||||
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 12px;}
|
||||
|
||||
/** 评分组件 By star1029 **/
|
||||
/** 穿梭框 **/
|
||||
.layui-transfer-box,
|
||||
.layui-transfer-header,
|
||||
.layui-transfer-search{border-width: 0; border-style: solid; border-color: #eee}
|
||||
.layui-transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;}
|
||||
.layui-transfer-box .layui-form-checkbox{width: 100%; margin: 0 !important;}
|
||||
.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 10px; border-bottom-width: 1px;}
|
||||
.layui-transfer-search{position:relative; padding: 10px; border-bottom-width: 1px;}
|
||||
.layui-transfer-search .layui-input{height: 32px; padding-left: 30px; font-size: 12px;}
|
||||
.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; margin-top: -8px; color: #666;}
|
||||
.layui-transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;}
|
||||
.layui-transfer-active .layui-btn{display: block; margin: 0; padding: 0 15px; background-color: #5FB878; border-color: #5FB878; color: #fff;}
|
||||
.layui-transfer-active .layui-btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;}
|
||||
.layui-transfer-active .layui-btn:first-child{margin-bottom: 15px;}
|
||||
.layui-transfer-active .layui-btn .layui-icon{margin: 0; font-size: 14px !important;}
|
||||
.layui-transfer-data{padding: 5px 0; overflow: auto;}
|
||||
.layui-transfer-data li{height: 32px; line-height: 32px; padding: 0 10px;}
|
||||
.layui-transfer-data li:hover{background-color: #F6F6F6; transition: .5s all;}
|
||||
.layui-transfer-data .layui-none{padding: 15px 10px; text-align: center; color: #999;}
|
||||
|
||||
/** 评分组件 **/
|
||||
.layui-rate,
|
||||
.layui-rate *{display: inline-block; vertical-align: middle;}
|
||||
.layui-rate{padding: 10px 5px 10px 0; font-size: 0;}
|
||||
@ -1307,7 +1303,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
|
||||
|
||||
/** 颜色选择器 By star1029 **/
|
||||
/** 颜色选择器 **/
|
||||
.layui-colorpicker{width: 26px; height: 26px; border: 1px solid #eee; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-colorpicker:hover{border-color: #d2d2d2;}
|
||||
.layui-colorpicker.layui-colorpicker-lg{width: 34px; height: 34px; line-height: 32px;}
|
||||
@ -1373,7 +1369,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
.layui-slider > span{margin-left: 8px;}
|
||||
}
|
||||
|
||||
/** 树组件 By star1029 **/
|
||||
/** 树组件 **/
|
||||
.layui-tree{line-height: 22px;}
|
||||
.layui-tree .layui-form-checkbox{margin: 0 !important;}
|
||||
.layui-tree-set{width: 100%; position: relative;}
|
||||
@ -1408,7 +1404,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
||||
|
||||
|
||||
/** 动画 **/
|
||||
.layui-anim{-webkit-animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-duration: 0.2s; animation-fill-mode: both;}
|
||||
.layui-anim{-webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both;}
|
||||
.layui-anim.layui-icon{display: inline-block;}
|
||||
.layui-anim-loop{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
|
||||
.layui-trans,
|
||||
|
||||
@ -48,7 +48,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.layui-laydate-header i.laydate-next-y{right: 15px;}
|
||||
.layui-laydate-header i.laydate-next-m{right: 45px;}
|
||||
.laydate-set-ym{width: 100%; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.laydate-set-ym span{padding: 0 5px; cursor: pointer;}
|
||||
.laydate-set-ym span{padding: 0 10px; cursor: pointer;}
|
||||
.laydate-time-text{cursor: default !important;}
|
||||
|
||||
/* 主体结构 */
|
||||
@ -58,15 +58,18 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.layui-laydate-content td{width: 36px; height: 30px; padding: 5px; text-align: center;}
|
||||
.layui-laydate-content th{font-weight: 400;}
|
||||
.layui-laydate-content td{position: relative; cursor: pointer;}
|
||||
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
|
||||
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
|
||||
.laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
|
||||
|
||||
/* 底部结构 */
|
||||
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px 20px;}
|
||||
.layui-laydate-footer span{margin-right: 15px; display: inline-block; cursor: pointer; font-size: 12px;}
|
||||
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px;}
|
||||
.layui-laydate-footer span{display: inline-block; vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #C9C9C9; border-radius: 2px; background-color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s;}
|
||||
.layui-laydate-footer span:hover{color: #5FB878;}
|
||||
.layui-laydate-footer span.layui-laydate-preview{cursor: default; border-color: transparent !important;}
|
||||
.layui-laydate-footer span.layui-laydate-preview:hover{color: #666;}
|
||||
.layui-laydate-footer span:first-child.layui-laydate-preview{padding-left: 0;}
|
||||
.laydate-footer-btns{position: absolute; right: 10px; top: 10px;}
|
||||
.laydate-footer-btns span{height: 26px; line-height: 26px; margin: 0 0 0 -1px; padding: 0 10px; border: 1px solid #C9C9C9; background-color: #fff; white-space: nowrap; vertical-align: top; border-radius: 2px;}
|
||||
.laydate-footer-btns span{margin: 0 0 0 -1px;}
|
||||
|
||||
/* 年月列表 */
|
||||
.layui-laydate-list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff;}
|
||||
@ -77,7 +80,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.laydate-time-list p{position: relative; top: -4px; line-height: 29px;}
|
||||
.laydate-time-list ol{height: 181px; overflow: hidden;}
|
||||
.laydate-time-list>li:hover ol{overflow-y: auto;}
|
||||
.laydate-time-list ol li{width: 130%; padding-left: 33px; line-height: 30px; text-align: left; cursor: pointer;}
|
||||
.laydate-time-list ol li{width: 130%; padding-left: 33px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
|
||||
|
||||
/* 提示 */
|
||||
.layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
|
||||
|
||||
29
src/layui.js
29
src/layui.js
@ -1,9 +1,8 @@
|
||||
|
||||
/*!
|
||||
|
||||
@Name: layui
|
||||
@Description：Classic modular front-end UI framework
|
||||
@License：MIT
|
||||
|
||||
* layui
|
||||
* Classic modular front-end ui framework
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
;!function(win){
|
||||
@ -17,9 +16,12 @@
|
||||
}
|
||||
|
||||
,Layui = function(){
|
||||
this.v = '2.6.5'; //版本号
|
||||
this.v = '2.6.6'; //版本号
|
||||
}
|
||||
|
||||
//识别预先可能定义的指定全局对象
|
||||
,GLOBAL = window.LAYUI_GLOBAL || {}
|
||||
|
||||
//获取 layui 所在目录
|
||||
,getPath = function(){
|
||||
var jsPath = doc.currentScript ? doc.currentScript.src : function(){
|
||||
@ -35,7 +37,7 @@
|
||||
return src || js[last].src;
|
||||
}();
|
||||
|
||||
return config.dir = jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
|
||||
return config.dir = GLOBAL.dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
|
||||
}()
|
||||
|
||||
//异常提示
|
||||
@ -444,7 +446,7 @@
|
||||
//提取 Hash
|
||||
,hash: that.router(function(){
|
||||
return href
|
||||
? ((href.match(/#.+/) || [])[0] || '')
|
||||
? ((href.match(/#.+/) || [])[0] || '/')
|
||||
: location.hash;
|
||||
}())
|
||||
};
|
||||
@ -541,16 +543,21 @@
|
||||
//遍历
|
||||
Layui.prototype.each = function(obj, fn){
|
||||
var key
|
||||
,that = this;
|
||||
,that = this
|
||||
,callFn = function(key, obj){
|
||||
return fn.call(obj[key], key, obj[key])
|
||||
};
|
||||
|
||||
if(typeof fn !== 'function') return that;
|
||||
obj = obj || [];
|
||||
|
||||
if(obj.constructor === Object){
|
||||
for(key in obj){
|
||||
if(fn.call(obj[key], key, obj[key])) break;
|
||||
if(callFn(key, obj)) break;
|
||||
}
|
||||
} else {
|
||||
for(key = 0; key < obj.length; key++){
|
||||
if(fn.call(obj[key], key, obj[key])) break;
|
||||
if(callFn(key, obj)) break;
|
||||
}
|
||||
}
|
||||
return that;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：用于加载所有内置模块
|
||||
@License：MIT
|
||||
|
||||
|
||||
/*!
|
||||
* 用于加载所有内置模块
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define(function(){
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：carousel 轮播模块
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* carousel 轮播模块
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
|
||||
/**
|
||||
|
||||
@Name：code 代码修饰器
|
||||
@License：MIT
|
||||
|
||||
* code 代码修饰器
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：MODULE_DEMO_NAME 模块组件通用结构
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* MODULE_DEMO_NAME 模块组件通用结构
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define([''], function(exports){
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：element 常用元素操作
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* element 常用元素操作
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
@ -37,8 +36,15 @@ layui.define('jquery', function(exports){
|
||||
,titElem = tabElem.children(TITLE)
|
||||
,barElem = titElem.children('.layui-tab-bar')
|
||||
,contElem = tabElem.children('.layui-tab-content')
|
||||
,li = '<li lay-id="'+ (options.id||'') +'"'
|
||||
+(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +'>'+ (options.title||'unnaming') +'</li>';
|
||||
,li = '<li'+ function(){
|
||||
var layAttr = [];
|
||||
layui.each(options, function(key, value){
|
||||
if(/^(title|content)$/.test(key)) return;
|
||||
layAttr.push('lay-'+ key +'="'+ value +'"');
|
||||
});
|
||||
if(layAttr.length > 0) layAttr.unshift(''); //向前插，预留空格
|
||||
return layAttr.join(' ');
|
||||
}() +'>'+ (options.title || 'unnaming') +'</li>';
|
||||
|
||||
barElem[0] ? barElem.before(li) : titElem.append(li);
|
||||
contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
|
||||
@ -83,14 +89,14 @@ layui.define('jquery', function(exports){
|
||||
,elem = $('.'+ ELEM +'[lay-filter='+ filter +']')
|
||||
,elemBar = elem.find('.'+ ELEM +'-bar')
|
||||
,text = elemBar.find('.'+ ELEM +'-text');
|
||||
elemBar.css('width', percent);
|
||||
elemBar.css('width', percent).attr('lay-percent', percent);
|
||||
text.text(percent);
|
||||
return this;
|
||||
};
|
||||
|
||||
var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar'
|
||||
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_MORE = 'layui-nav-more'
|
||||
,NAV_ANIM = 'layui-anim layui-anim-upbit'
|
||||
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_CHILD_C = 'layui-nav-child-c'
|
||||
,NAV_MORE = 'layui-nav-more', NAV_DOWN = 'layui-icon-down', NAV_ANIM = 'layui-anim layui-anim-upbit'
|
||||
|
||||
//基础事件体
|
||||
,call = {
|
||||
@ -163,7 +169,7 @@ layui.define('jquery', function(exports){
|
||||
title.find('li').each(function(){
|
||||
var li = $(this);
|
||||
if(!li.find('.'+CLOSE)[0]){
|
||||
var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">ဆ</i>');
|
||||
var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ CLOSE +'"></i>');
|
||||
close.on('click', call.tabDelete);
|
||||
li.append(close);
|
||||
}
|
||||
@ -298,52 +304,80 @@ layui.define('jquery', function(exports){
|
||||
|
||||
//导航菜单
|
||||
,nav: function(){
|
||||
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, follow = function(bar, nav, index){
|
||||
var othis = $(this), child = othis.find('.'+NAV_CHILD);
|
||||
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, NAV_TITLE = 'layui-nav-title'
|
||||
|
||||
//滑块跟随
|
||||
,follow = function(bar, nav, index){
|
||||
var othis = $(this), child = othis.find('.'+NAV_CHILD);
|
||||
if(nav.hasClass(NAV_TREE)){
|
||||
var thisA = othis.children('.'+ NAV_TITLE);
|
||||
bar.css({
|
||||
top: othis.position().top
|
||||
,height: othis.children('a').outerHeight()
|
||||
top: othis.offset().top - nav.offset().top
|
||||
,height: (thisA[0] ? thisA : othis).outerHeight()
|
||||
,opacity: 1
|
||||
});
|
||||
} else {
|
||||
child.addClass(NAV_ANIM);
|
||||
|
||||
//若居中对齐
|
||||
if(child.hasClass(NAV_CHILD_C)) child.css({
|
||||
left: -(child.outerWidth() - othis.width())/2
|
||||
});
|
||||
|
||||
//滑块定位
|
||||
if(child[0]){
|
||||
bar.css({
|
||||
left: bar.position().left + bar.width()/2
|
||||
,width: 0
|
||||
,opacity: 0
|
||||
});
|
||||
} else { //bar 跟随
|
||||
bar.css({
|
||||
left: othis.position().left + parseFloat(othis.css('marginLeft'))
|
||||
,top: othis.position().top + othis.height() - bar.height()
|
||||
});
|
||||
}
|
||||
|
||||
//渐显滑块并适配宽度
|
||||
timer[index] = setTimeout(function(){
|
||||
bar.css({
|
||||
width: othis.width()
|
||||
,opacity: 1
|
||||
width: child[0] ? 0 : othis.width()
|
||||
,opacity: child[0] ? 0 : 1
|
||||
});
|
||||
}, device.ie && device.ie < 10 ? 0 : TIME);
|
||||
|
||||
//显示子菜单
|
||||
clearTimeout(timeEnd[index]);
|
||||
if(child.css('display') === 'block'){
|
||||
clearTimeout(timerMore[index]);
|
||||
}
|
||||
timerMore[index] = setTimeout(function(){
|
||||
child.addClass(SHOW)
|
||||
child.addClass(SHOW);
|
||||
othis.find('.'+NAV_MORE).addClass(NAV_MORE+'d');
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//遍历导航
|
||||
$(NAV_ELEM + elemFilter).each(function(index){
|
||||
var othis = $(this)
|
||||
,bar = $('<span class="'+ NAV_BAR +'"></span>')
|
||||
,itemElem = othis.find('.'+NAV_ITEM);
|
||||
|
||||
//Hover滑动效果
|
||||
//hover 滑动效果
|
||||
if(!othis.find('.'+NAV_BAR)[0]){
|
||||
othis.append(bar);
|
||||
itemElem.on('mouseenter', function(){
|
||||
(othis.hasClass(NAV_TREE)
|
||||
? itemElem.find('dd,>.'+ NAV_TITLE)
|
||||
: itemElem).on('mouseenter', function(){
|
||||
follow.call(this, bar, othis, index);
|
||||
}).on('mouseleave', function(){
|
||||
if(!othis.hasClass(NAV_TREE)){
|
||||
if(othis.hasClass(NAV_TREE)){
|
||||
bar.css({
|
||||
height: 0
|
||||
,opacity: 0
|
||||
});
|
||||
} else {
|
||||
clearTimeout(timerMore[index]);
|
||||
timerMore[index] = setTimeout(function(){
|
||||
othis.find('.'+NAV_CHILD).removeClass(SHOW);
|
||||
@ -354,13 +388,7 @@ layui.define('jquery', function(exports){
|
||||
othis.on('mouseleave', function(){
|
||||
clearTimeout(timer[index])
|
||||
timeEnd[index] = setTimeout(function(){
|
||||
if(othis.hasClass(NAV_TREE)){
|
||||
bar.css({
|
||||
height: 0
|
||||
,top: bar.position().top + bar.height()/2
|
||||
,opacity: 0
|
||||
});
|
||||
} else {
|
||||
if(!othis.hasClass(NAV_TREE)){
|
||||
bar.css({
|
||||
width: 0
|
||||
,left: bar.position().left + bar.width()/2
|
||||
@ -379,7 +407,7 @@ layui.define('jquery', function(exports){
|
||||
|
||||
//输出小箭头
|
||||
if(child[0] && !thisA.children('.'+NAV_MORE)[0]){
|
||||
thisA.append('<span class="'+ NAV_MORE +'"></span>');
|
||||
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>');
|
||||
}
|
||||
|
||||
thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单
|
||||
|
||||
@ -117,7 +117,7 @@ layui.define('jquery', function(exports){
|
||||
|
||||
/* 始终只加载在当前屏范围内的图片 */
|
||||
if(elemTop >= start && elemTop <= end){
|
||||
if(!item.attr('src')){
|
||||
if(item.attr('lay-src')){
|
||||
var src = item.attr('lay-src');
|
||||
layui.img(src, function(){
|
||||
var next = that.lazyimg.elem.eq(index);
|
||||
@ -126,6 +126,9 @@ layui.define('jquery', function(exports){
|
||||
/* 当前图片加载就绪后，检测下一个图片是否在当前屏 */
|
||||
next[0] && render(next);
|
||||
index++;
|
||||
}, function(){
|
||||
var next = that.lazyimg.elem.eq(index);
|
||||
item.removeAttr('lay-src');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：form 表单组件
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* form 表单组件
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define('layer', function(exports){
|
||||
@ -32,7 +31,7 @@ layui.define('layer', function(exports){
|
||||
,'邮箱格式不正确'
|
||||
]
|
||||
,url: [
|
||||
/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
|
||||
/^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/
|
||||
,'链接格式不正确'
|
||||
]
|
||||
,number: function(value){
|
||||
@ -593,7 +592,7 @@ layui.define('layer', function(exports){
|
||||
var title = radio.title || '';
|
||||
if(typeof othis.next().attr('lay-radio') === 'string'){
|
||||
title = othis.next().html();
|
||||
othis.next().remove();
|
||||
//othis.next().remove();
|
||||
}
|
||||
return title
|
||||
}() +'</div>'
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** lay 基础 DOM 操作 */
|
||||
|
||||
/*! lay 基础 DOM 操作 */
|
||||
|
||||
;!function(){
|
||||
"use strict";
|
||||
@ -318,7 +319,7 @@
|
||||
,isObject = typeof selector === 'object';
|
||||
|
||||
this.each(function(i, item){
|
||||
var nativeDOM = isObject ? [selector] : item.querySelectorAll(selector || null);
|
||||
var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null);
|
||||
for(; index < nativeDOM.length; index++){
|
||||
arr.push(nativeDOM[index]);
|
||||
}
|
||||
@ -428,6 +429,7 @@
|
||||
|
||||
//设置或获取值
|
||||
LAY.prototype.val = function(value){
|
||||
var that = this;
|
||||
return value === undefined ? function(){
|
||||
if(that.length > 0) return that[0].value;
|
||||
}() : this.each(function(index, item){
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
/** layDate 日期与时间控件 */
|
||||
|
||||
/*!
|
||||
* layDate 日期与时间控件
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
;!function(window){
|
||||
"use strict";
|
||||
@ -19,11 +23,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
//识别预先可能定义的指定全局对象
|
||||
,GLOBAL = window.LAYUI_GLOBAL || {}
|
||||
|
||||
//外部调用
|
||||
,laydate = {
|
||||
v: '5.2.1'
|
||||
v: '5.3.0'
|
||||
,config: {} //全局配置项
|
||||
,index: (window.laydate && window.laydate.v) ? 100000 : 0
|
||||
,path: ready.getPath
|
||||
,path: GLOBAL.laydate_dir || ready.getPath
|
||||
|
||||
//设置全局项
|
||||
,set: function(options){
|
||||
@ -42,8 +50,13 @@
|
||||
}
|
||||
|
||||
//操作当前实例
|
||||
,thisDate = function(){
|
||||
var that = this;
|
||||
,thisModule = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,id = options.id;
|
||||
|
||||
thisModule.that[id] = that; //记录当前实例对象
|
||||
|
||||
return {
|
||||
//提示框
|
||||
hint: function(content){
|
||||
@ -56,18 +69,32 @@
|
||||
//字符常量
|
||||
,MOD_NAME = 'laydate', ELEM = '.layui-laydate', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'laydate-disabled', LIMIT_YEAR = [100, 200000]
|
||||
|
||||
,ELEM_STATIC = 'layui-laydate-static', ELEM_LIST = 'layui-laydate-list', ELEM_SELECTED = 'laydate-selected', ELEM_HINT = 'layui-laydate-hint', ELEM_PREV = 'laydate-day-prev', ELEM_NEXT = 'laydate-day-next', ELEM_FOOTER = 'layui-laydate-footer', ELEM_CONFIRM = '.laydate-btns-confirm', ELEM_TIME_TEXT = 'laydate-time-text', ELEM_TIME_BTN = '.laydate-btns-time'
|
||||
,ELEM_STATIC = 'layui-laydate-static', ELEM_LIST = 'layui-laydate-list', ELEM_SELECTED = 'laydate-selected', ELEM_HINT = 'layui-laydate-hint', ELEM_PREV = 'laydate-day-prev', ELEM_NEXT = 'laydate-day-next', ELEM_FOOTER = 'layui-laydate-footer', ELEM_CONFIRM = '.laydate-btns-confirm', ELEM_TIME_TEXT = 'laydate-time-text', ELEM_TIME_BTN = 'laydate-btns-time', ELEM_PREVIEW = 'layui-laydate-preview'
|
||||
|
||||
//组件构造器
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++laydate.index;
|
||||
that.config = lay.extend({}, that.config, laydate.config, options);
|
||||
|
||||
//初始化 id 参数
|
||||
options = that.config;
|
||||
options.id = ('id' in options) ? options.id : that.index;
|
||||
|
||||
//初始化
|
||||
laydate.ready(function(){
|
||||
that.init();
|
||||
});
|
||||
}
|
||||
|
||||
//日期格式字符
|
||||
,dateType = 'yyyy|y|MM|M|dd|d|HH|H|mm|m|ss|s';
|
||||
|
||||
//将日期格式字符转换为数组
|
||||
thisModule.formatArr = function(format){
|
||||
return (format || '').match(new RegExp(dateType + '|.', 'g')) || []
|
||||
};
|
||||
|
||||
/*
|
||||
组件操作
|
||||
*/
|
||||
@ -89,6 +116,7 @@
|
||||
,trigger: 'click' //呼出控件的事件
|
||||
,show: false //是否直接显示，如果设置 true，则默认直接显示控件
|
||||
,showBottom: true //是否显示底部栏
|
||||
,isPreview: true //是否显示值预览
|
||||
,btns: ['clear', 'now', 'confirm'] //右下角显示的按钮，会按照数组顺序排列
|
||||
,lang: 'cn' //语言，只支持cn/en，即中文和英文
|
||||
,theme: 'default' //主题
|
||||
@ -121,6 +149,7 @@
|
||||
,timeout: '结束时间不能早于开始时间<br>请重新选择'
|
||||
,invalidDate: '不在有效日期或时间范围内'
|
||||
,formatError: ['日期格式不合法<br>必须遵循下述格式：<br>', '<br>已为你重置']
|
||||
,preview: '当前选中的结果'
|
||||
}
|
||||
,en: {
|
||||
weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
|
||||
@ -138,6 +167,7 @@
|
||||
,timeout: 'End time cannot be less than start Time<br>Please re-select'
|
||||
,invalidDate: 'Invalid date'
|
||||
,formatError: ['The date format error<br>Must be followed：<br>', '<br>It has been reset']
|
||||
,preview: 'The selected result'
|
||||
}
|
||||
};
|
||||
return text[options.lang] || text['cn'];
|
||||
@ -147,7 +177,6 @@
|
||||
Class.prototype.init = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,dateType = 'yyyy|y|MM|M|dd|d|HH|H|mm|m|ss|s'
|
||||
,isStatic = options.position === 'static'
|
||||
,format = {
|
||||
year: 'yyyy'
|
||||
@ -163,7 +192,15 @@
|
||||
if(!options.elem[0]) return;
|
||||
|
||||
//日期范围分隔符
|
||||
if(options.range === true) options.range = '-';
|
||||
that.rangeStr = options.range ? (typeof options.range === 'string' ? options.range : '-') : '';
|
||||
|
||||
//若 range 参数为数组，则表示为开始日期和结束日期的 input 对象
|
||||
if(options.range && options.range.constructor === Array){
|
||||
that.rangeElem = [
|
||||
lay(options.range[0]),
|
||||
lay(options.range[1])
|
||||
];
|
||||
}
|
||||
|
||||
//若 type 设置非法，则初始化为 date 类型
|
||||
if(!format[options.type]){
|
||||
@ -172,15 +209,12 @@
|
||||
}
|
||||
|
||||
//根据不同 type，初始化默认 format
|
||||
|
||||
if(options.format === format.date){
|
||||
options.format = format[options.type] || format.date;
|
||||
|
||||
}
|
||||
|
||||
|
||||
//将日期格式转化成数组
|
||||
that.format = options.format.match(new RegExp(dateType + '|.', 'g')) || [];
|
||||
that.format = thisModule.formatArr(options.format);
|
||||
|
||||
//生成正则表达式
|
||||
that.EXP_IF = '';
|
||||
@ -200,9 +234,11 @@
|
||||
that.EXP_IF = that.EXP_IF + EXP;
|
||||
that.EXP_SPLIT = that.EXP_SPLIT + '(' + EXP + ')';
|
||||
});
|
||||
//验证日期格式正则
|
||||
that.EXP_IF_ONE = new RegExp('^'+ that.EXP_IF +'$'); //验证单个日期格式
|
||||
that.EXP_IF = new RegExp('^'+ (
|
||||
options.range ?
|
||||
that.EXP_IF + '\\s\\'+ options.range + '\\s' + that.EXP_IF
|
||||
that.EXP_IF + '\\s\\'+ that.rangeStr + '\\s' + that.EXP_IF
|
||||
: that.EXP_IF
|
||||
) +'$');
|
||||
that.EXP_SPLIT = new RegExp('^'+ that.EXP_SPLIT +'$', '');
|
||||
@ -242,10 +278,10 @@
|
||||
if(typeof options[item] === 'number'){ //如果为数字
|
||||
var day = options[item]
|
||||
,time = new Date().getTime()
|
||||
,STAMP = 86400000 //代表一天的时间戳
|
||||
,STAMP = 86400000 //代表一天的毫秒数
|
||||
,thisDate = new Date(
|
||||
day ? (
|
||||
day < STAMP ? time + day*STAMP : day //如果数字小于一天的时间戳，则数字为天数，否则为时间戳
|
||||
day < STAMP ? time + day*STAMP : day //如果数字小于一天的毫秒数，则数字为天数，否则为毫秒数
|
||||
) : time
|
||||
);
|
||||
ymd = [thisDate.getFullYear(), thisDate.getMonth() + 1, thisDate.getDate()];
|
||||
@ -399,8 +435,12 @@
|
||||
lay(divFooter).html(function(){
|
||||
var html = [], btns = [];
|
||||
if(options.type === 'datetime'){
|
||||
html.push('<span lay-type="datetime" class="laydate-btns-time">'+ lang.timeTips +'</span>');
|
||||
html.push('<span lay-type="datetime" class="'+ ELEM_TIME_BTN +'">'+ lang.timeTips +'</span>');
|
||||
}
|
||||
if(!(!options.range && options.type === 'datetime')){
|
||||
html.push('<span class="'+ ELEM_PREVIEW +'" title="'+ lang.preview +'"></span>')
|
||||
}
|
||||
|
||||
lay.each(options.btns, function(i, item){
|
||||
var title = lang.tools[item] || 'btn';
|
||||
if(options.range && item === 'now') return;
|
||||
@ -436,6 +476,9 @@
|
||||
elem.appendChild(style);
|
||||
}
|
||||
|
||||
//记录当前执行的实例索引
|
||||
laydate.thisId = options.id;
|
||||
|
||||
//移除上一个控件
|
||||
that.remove(Class.thisElemDate);
|
||||
|
||||
@ -453,6 +496,8 @@
|
||||
typeof options.ready === 'function' && options.ready(lay.extend({}, options.dateTime, {
|
||||
month: options.dateTime.month + 1
|
||||
}));
|
||||
|
||||
that.preview();
|
||||
};
|
||||
|
||||
//控件移除
|
||||
@ -465,7 +510,8 @@
|
||||
if(!elem.hasClass(ELEM_STATIC)){
|
||||
that.checkDate(function(){
|
||||
elem.remove();
|
||||
delete that.endDate;
|
||||
//delete options.dateTime;
|
||||
//delete that.endDate;
|
||||
});
|
||||
}
|
||||
return that;
|
||||
@ -539,7 +585,16 @@
|
||||
|
||||
,elem = that.bindElem || options.elem[0]
|
||||
,valType = that.isInput(elem) ? 'val' : 'html'
|
||||
,value = that.isInput(elem) ? elem.value : (options.position === 'static' ? '' : elem.innerHTML)
|
||||
,value = function(){
|
||||
//如果传入了开始和结束日期的 input 对象，则将其拼接为日期范围字符
|
||||
if(that.rangeElem){
|
||||
var vals = [that.rangeElem[0].val(), that.rangeElem[1].val()];
|
||||
if(vals[0] && vals[1]){
|
||||
return vals.join(' ' + that.rangeStr + ' ');
|
||||
}
|
||||
}
|
||||
return that.isInput(elem) ? elem.value : (options.position === 'static' ? '' : lay(elem).attr('lay-date'));
|
||||
}()
|
||||
|
||||
//校验日期有效数字
|
||||
,checkValid = function(dateTime){
|
||||
@ -559,6 +614,7 @@
|
||||
var startEnd = ['startTime', 'endTime'];
|
||||
value = (value.match(that.EXP_SPLIT) || []).slice(1);
|
||||
index = index || 0;
|
||||
|
||||
if(options.range){
|
||||
that[startEnd[index]] = that[startEnd[index]] || {};
|
||||
}
|
||||
@ -588,7 +644,7 @@
|
||||
options.range && (that[startEnd[index]].seconds = thisv);
|
||||
}
|
||||
});
|
||||
checkValid(dateTime)
|
||||
checkValid(dateTime);
|
||||
};
|
||||
|
||||
if(fn === 'limit') return checkValid(dateTime), that;
|
||||
@ -598,55 +654,105 @@
|
||||
value = value.replace(/\s+/g, ' ').replace(/^\s|\s$/g, '');
|
||||
}
|
||||
|
||||
//如果开启范围
|
||||
//如果开启范围，则计算结束日期
|
||||
var getEndDate = function(){
|
||||
if(options.range){
|
||||
that.endDate = that.endDate || lay.extend({}, dateTime, function(){
|
||||
that.endDate = that.endDate || lay.extend({}, options.dateTime, function(){
|
||||
var obj = {}
|
||||
,dateTime = options.dateTime
|
||||
,EYM = that.getAsYM(dateTime.year, dateTime.month);
|
||||
|
||||
//初始右侧面板的年月
|
||||
if(options.type === 'year'){
|
||||
obj.year = dateTime.year + 1;
|
||||
} else if(options.type !== 'time'){
|
||||
obj.year = EYM[0];
|
||||
obj.month = EYM[1];
|
||||
}
|
||||
|
||||
//初始右侧面板的时间
|
||||
if(options.type === 'datetime' || options.type === 'time'){
|
||||
obj.hours = 23;
|
||||
obj.minutes = obj.seconds = 59;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}());
|
||||
}
|
||||
};
|
||||
getEndDate();
|
||||
|
||||
if(typeof value === 'string' && value){
|
||||
if(that.EXP_IF.test(value)){ //校验日期格式
|
||||
if(options.range){
|
||||
value = value.split(' '+ options.range +' ');
|
||||
|
||||
value = value.split(' '+ that.rangeStr +' ');
|
||||
lay.each([options.dateTime, that.endDate], function(i, item){
|
||||
initDate(item, value[i], i);
|
||||
});
|
||||
} else {
|
||||
initDate(dateTime, value)
|
||||
initDate(dateTime, value);
|
||||
}
|
||||
} else {
|
||||
//格式不合法
|
||||
that.hint(lang.formatError[0] + (
|
||||
options.range ? (options.format + ' '+ options.range +' ' + options.format) : options.format
|
||||
options.range ? (options.format + ' '+ that.rangeStr +' ' + options.format) : options.format
|
||||
) + lang.formatError[1]);
|
||||
error = true;
|
||||
}
|
||||
} else if(value && value.constructor === Date){ //如果值为日期对象时
|
||||
options.dateTime = that.systemDate(value);
|
||||
} else {
|
||||
//重置开始日期
|
||||
options.dateTime = that.systemDate();
|
||||
|
||||
delete that.startTime;
|
||||
|
||||
//重置结束日期
|
||||
delete that.endDate; //删除原有的结束日期
|
||||
getEndDate(); //并重新获得新的结束日期
|
||||
delete that.endTime;
|
||||
}
|
||||
|
||||
checkValid(dateTime);
|
||||
//从日期范围表单中获取初始值
|
||||
(function(){
|
||||
if(that.rangeElem){
|
||||
var vals = [that.rangeElem[0].val(), that.rangeElem[1].val()]
|
||||
,arrDate = [options.dateTime, that.endDate];
|
||||
lay.each(vals, function(_i, _v){
|
||||
if(that.EXP_IF_ONE.test(_v)){ //校验日期格式
|
||||
initDate(arrDate[_i], _v, _i);
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
//校验日期有效数字
|
||||
checkValid(dateTime);
|
||||
if(options.range) checkValid(that.endDate);
|
||||
|
||||
//如果初始值格式错误，则纠正初始值
|
||||
if(error && value){
|
||||
that.setValue(
|
||||
options.range ? (that.endDate ? that.parse() : '') : that.parse()
|
||||
);
|
||||
}
|
||||
|
||||
//如果当前日期不在设定的最大小日期区间，则自动纠正在可选区域
|
||||
var getDateTime = function(obj){
|
||||
return that.newDate(obj).getTime();
|
||||
};
|
||||
|
||||
//校验主面板是否在可选日期区间
|
||||
if(getDateTime(dateTime) > getDateTime(options.max) || getDateTime(dateTime) < getDateTime(options.min)){
|
||||
dateTime = options.dateTime = lay.extend({}, options.min);
|
||||
}
|
||||
|
||||
//校验右侧面板是否在可选日期区间
|
||||
if(options.range){
|
||||
if(getDateTime(that.endDate) < getDateTime(options.min) || getDateTime(that.endDate) > getDateTime(options.max)){
|
||||
that.endDate = lay.extend({}, options.max);
|
||||
}
|
||||
}
|
||||
|
||||
fn && fn();
|
||||
return that;
|
||||
};
|
||||
@ -674,6 +780,7 @@
|
||||
,options = that.config, timestrap = {}
|
||||
,dateTime = options[index > 41 ? 'endDate' : 'dateTime']
|
||||
,isOut, thisDateTime = lay.extend({}, dateTime, date || {});
|
||||
|
||||
lay.each({
|
||||
now: thisDateTime
|
||||
,min: options.min
|
||||
@ -804,7 +911,6 @@
|
||||
|
||||
//同步按钮可点状态
|
||||
that.setBtnStatus();
|
||||
that.stampRange(index, tds); //标记范围内的日期
|
||||
|
||||
return that;
|
||||
};
|
||||
@ -837,7 +943,8 @@
|
||||
|
||||
if(listYM[0] < 1) listYM[0] = 1;
|
||||
|
||||
if(type === 'year'){ //年列表
|
||||
//生成年列表
|
||||
if(type === 'year'){
|
||||
var yearNum, startY = yearNum = listYM[0] - 7;
|
||||
if(startY < 1) startY = yearNum = 1;
|
||||
lay.each(new Array(15), function(i){
|
||||
@ -859,7 +966,10 @@
|
||||
});
|
||||
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', (yearNum - 8) + '-' + listYM[1])
|
||||
.html((startY + text) + ' - ' + (yearNum - 1 + text));
|
||||
} else if(type === 'month'){ //月列表
|
||||
}
|
||||
|
||||
//生成月列表
|
||||
else if(type === 'month'){
|
||||
lay.each(new Array(12), function(i){
|
||||
var li = lay.elem('li', {
|
||||
'lay-ym': i
|
||||
@ -876,7 +986,10 @@
|
||||
});
|
||||
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])
|
||||
.html(listYM[0] + text);
|
||||
} else if(type === 'time'){ //时间列表
|
||||
}
|
||||
|
||||
//生成时间列表
|
||||
else if(type === 'time'){
|
||||
//检测时分秒状态是否在有效日期时间范围内
|
||||
var setTimeStatus = function(){
|
||||
lay(ul).find('ol').each(function(i, ol){
|
||||
@ -895,15 +1008,17 @@
|
||||
});
|
||||
if(!options.range) that.limit(lay(that.footer).find(ELEM_CONFIRM), that[startEnd], 0, ['hours', 'minutes', 'seconds']);
|
||||
};
|
||||
|
||||
//初始化时间对象
|
||||
if(options.range){
|
||||
if(!that[startEnd]) that[startEnd] = {
|
||||
hours: 0
|
||||
,minutes: 0
|
||||
,seconds: 0
|
||||
};
|
||||
if(!that[startEnd]){
|
||||
that[startEnd] = startEnd === 'startTime' ? dateTime : that.endDate;
|
||||
}
|
||||
} else {
|
||||
that[startEnd] = dateTime;
|
||||
}
|
||||
|
||||
//生成时分秒
|
||||
lay.each([24, 60, 60], function(i, item){
|
||||
var li = lay.elem('li'), childUL = ['<p>'+ lang.time[i] +'</p><ol>'];
|
||||
lay.each(new Array(item), function(ii){
|
||||
@ -919,7 +1034,7 @@
|
||||
if(haveList) elemCont.removeChild(haveList);
|
||||
elemCont.appendChild(ul);
|
||||
|
||||
//年月
|
||||
//年月面板 - 选择事件
|
||||
if(type === 'year' || type === 'month'){
|
||||
//显示切换箭头
|
||||
lay(that.elemMain[index]).addClass('laydate-ym-show');
|
||||
@ -960,20 +1075,26 @@
|
||||
}
|
||||
|
||||
that.setBtnStatus(); //同步按钮可点状态
|
||||
//如果非范围选择，则选中即自动关闭选择器
|
||||
|
||||
//若为月选择器，只有当选择月份时才自动关闭；
|
||||
//若为年选择器，选择年份即自动关闭
|
||||
//且在范围未开启时
|
||||
if(!options.range){
|
||||
//若为月选择器，只有当选择月份时才自动关闭；若为年选择器，选择年份即自动关闭
|
||||
if((options.type === 'month' && type === 'month') || (options.type === 'year' && type === 'year')){
|
||||
that.setValue(that.parse()).remove().done();
|
||||
}
|
||||
that.done(null, 'change');
|
||||
}
|
||||
lay(that.footer).find(ELEM_TIME_BTN).removeClass(DISABLED);
|
||||
|
||||
that.done(null, 'change');
|
||||
lay(that.footer).find('.'+ ELEM_TIME_BTN).removeClass(DISABLED);
|
||||
});
|
||||
} else {
|
||||
} else { //时间选择面板 - 选择事件
|
||||
var span = lay.elem('span', {
|
||||
'class': ELEM_TIME_TEXT
|
||||
}), scroll = function(){ //滚动条定位
|
||||
})
|
||||
|
||||
//滚动条定位
|
||||
,scroll = function(){
|
||||
lay(ul).find('ol').each(function(i){
|
||||
var ol = this
|
||||
,li = lay(ol).find('li')
|
||||
@ -987,10 +1108,13 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
}, haveSpan = lay(elemHeader[2]).find('.'+ ELEM_TIME_TEXT);
|
||||
scroll()
|
||||
span.innerHTML = options.range ? [lang.startTime,lang.endTime][index] : lang.timeTips
|
||||
}
|
||||
,haveSpan = lay(elemHeader[2]).find('.'+ ELEM_TIME_TEXT);
|
||||
|
||||
scroll();
|
||||
span.innerHTML = options.range ? [lang.startTime,lang.endTime][index] : lang.timeTips;
|
||||
lay(that.elemMain[index]).addClass('laydate-time-show');
|
||||
|
||||
if(haveSpan[0]) haveSpan.remove();
|
||||
elemHeader[2].appendChild(span);
|
||||
|
||||
@ -1000,6 +1124,7 @@
|
||||
lay(ol).find('li').on('click', function(){
|
||||
var value = this.innerHTML | 0;
|
||||
if(lay(this).hasClass(DISABLED)) return;
|
||||
|
||||
if(options.range){
|
||||
that[startEnd][hms[i]] = value;
|
||||
} else {
|
||||
@ -1063,34 +1188,17 @@
|
||||
Class.prototype.parse = function(state, date){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,dateTime = date || (state
|
||||
,dateTime = date || (state == 'end'
|
||||
? lay.extend({}, that.endDate, that.endTime)
|
||||
: (options.range ? lay.extend({}, options.dateTime, that.startTime) : options.dateTime))
|
||||
,format = that.format.concat();
|
||||
|
||||
//转义为规定格式
|
||||
lay.each(format, function(i, item){
|
||||
if(/yyyy|y/.test(item)){ //年
|
||||
format[i] = lay.digit(dateTime.year, item.length);
|
||||
} else if(/MM|M/.test(item)){ //月
|
||||
format[i] = lay.digit(dateTime.month + 1, item.length);
|
||||
} else if(/dd|d/.test(item)){ //日
|
||||
format[i] = lay.digit(dateTime.date, item.length);
|
||||
} else if(/HH|H/.test(item)){ //时
|
||||
format[i] = lay.digit(dateTime.hours, item.length);
|
||||
} else if(/mm|m/.test(item)){ //分
|
||||
format[i] = lay.digit(dateTime.minutes, item.length);
|
||||
} else if(/ss|s/.test(item)){ //秒
|
||||
format[i] = lay.digit(dateTime.seconds, item.length);
|
||||
}
|
||||
});
|
||||
,format = laydate.parse(dateTime, that.format, 1);
|
||||
|
||||
//返回日期范围字符
|
||||
if(options.range && !state){
|
||||
return format.join('') + ' '+ options.range +' ' + that.parse(1);
|
||||
if(options.range && state === undefined){
|
||||
return format + ' '+ that.rangeStr +' ' + that.parse('end');
|
||||
}
|
||||
|
||||
return format.join('');
|
||||
return format;
|
||||
};
|
||||
|
||||
//创建指定日期时间对象
|
||||
@ -1110,94 +1218,53 @@
|
||||
Class.prototype.setValue = function(value){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,elem = that.bindElem || options.elem[0]
|
||||
,valType = that.isInput(elem) ? 'val' : 'html'
|
||||
,elem = that.bindElem || options.elem[0];
|
||||
|
||||
//静态展现则不作默认赋值
|
||||
if(options.position === 'static') return;
|
||||
|
||||
value = value || '';
|
||||
|
||||
//绑定的元素是否为 input
|
||||
if(that.isInput(elem)){
|
||||
lay(elem).val(value);
|
||||
} else {
|
||||
//如果 range 传入了开始和结束的 input 对象，则分别对其赋值
|
||||
if(that.rangeElem){
|
||||
that.rangeElem[0].val(value ? that.parse('start') : '');
|
||||
that.rangeElem[1].val(value ? that.parse('end') : '');
|
||||
} else {
|
||||
if(lay(elem).find('*').length === 0){
|
||||
lay(elem).html(value);
|
||||
}
|
||||
lay(elem).attr('lay-date', value);
|
||||
}
|
||||
}
|
||||
|
||||
options.position === 'static' || lay(elem)[valType](value || '');
|
||||
return this;
|
||||
};
|
||||
|
||||
//标记范围内的日期
|
||||
Class.prototype.stampRange = function(index, tds){
|
||||
//预览
|
||||
Class.prototype.preview = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,startTime, endTime;
|
||||
,options = that.config;
|
||||
|
||||
if(!options.range) return;
|
||||
if(!options.isPreview) return;
|
||||
|
||||
startTime = that.newDate(options.dateTime).getTime();
|
||||
endTime = that.newDate(that.endDate).getTime();
|
||||
var elemPreview = lay(that.elem).find('.'+ ELEM_PREVIEW)
|
||||
,value = options.range ? (that.endDate ? that.parse() : '') : that.parse();
|
||||
|
||||
//标记范围样式
|
||||
lay.each(tds, function(i, item){
|
||||
var ymd = lay(item).attr('lay-ymd').split('-')
|
||||
,thisTime = that.newDate({
|
||||
year: ymd[0]
|
||||
,month: ymd[1] - 1
|
||||
,date: ymd[2]
|
||||
}).getTime();
|
||||
|
||||
if(index == 0){
|
||||
if(thisTime > startTime){
|
||||
lay(item).addClass(ELEM_SELECTED);
|
||||
}
|
||||
} else {
|
||||
if(thisTime < endTime){
|
||||
lay(item).addClass(ELEM_SELECTED);
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
if(thisTime === startTime || thisTime === endTime){
|
||||
lay(item).addClass(
|
||||
lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT)
|
||||
? ELEM_SELECTED
|
||||
: THIS
|
||||
);
|
||||
}
|
||||
if(thisTime > startTime && thisTime < endTime){
|
||||
lay(item).addClass(ELEM_SELECTED);
|
||||
}
|
||||
//显示预览
|
||||
elemPreview.html(value).css({
|
||||
'color': '#5FB878'
|
||||
,'font-size': '14px;'
|
||||
});
|
||||
|
||||
return;
|
||||
|
||||
if(options.range && !that.endDate) lay(that.footer).find(ELEM_CONFIRM).addClass(DISABLED);
|
||||
if(!that.endDate) return;
|
||||
|
||||
startTime = that.newDate({
|
||||
year: that.startDate.year
|
||||
,month: that.startDate.month
|
||||
,date: that.startDate.date
|
||||
}).getTime();
|
||||
|
||||
endTime = that.newDate({
|
||||
year: that.endDate.year
|
||||
,month: that.endDate.month
|
||||
,date: that.endDate.date
|
||||
}).getTime();
|
||||
|
||||
if(startTime > endTime) return that.hint(TIPS_OUT);
|
||||
|
||||
lay.each(tds, function(i, item){
|
||||
var ymd = lay(item).attr('lay-ymd').split('-')
|
||||
,thisTime = that.newDate({
|
||||
year: ymd[0]
|
||||
,month: ymd[1] - 1
|
||||
,date: ymd[2]
|
||||
}).getTime();
|
||||
lay(item).removeClass(ELEM_SELECTED + ' ' + THIS);
|
||||
if(thisTime === startTime || thisTime === endTime){
|
||||
lay(item).addClass(
|
||||
lay(item).hasClass(ELEM_PREV) || lay(item).hasClass(ELEM_NEXT)
|
||||
? ELEM_SELECTED
|
||||
: THIS
|
||||
);
|
||||
}
|
||||
if(thisTime > startTime && thisTime < endTime){
|
||||
lay(item).addClass(ELEM_SELECTED);
|
||||
}
|
||||
setTimeout(function(){
|
||||
elemPreview.css({
|
||||
'color': '#666'
|
||||
,'font-size': '12px;'
|
||||
});
|
||||
}, 300);
|
||||
};
|
||||
|
||||
//执行 done/change 回调
|
||||
@ -1214,6 +1281,8 @@
|
||||
});
|
||||
});
|
||||
|
||||
that.preview();
|
||||
|
||||
param = param || [that.parse(), start, end];
|
||||
typeof options[type || 'done'] === 'function' && options[type || 'done'].apply(options, param);
|
||||
|
||||
@ -1249,7 +1318,7 @@
|
||||
,seconds: 0
|
||||
};
|
||||
});
|
||||
that.calendar(null, index);
|
||||
that.calendar(null, index).done(null, 'change');
|
||||
} else if(options.position === 'static'){ //直接嵌套的选中
|
||||
that.calendar().done().done(null, 'change'); //同时执行 done 和 change 回调
|
||||
} else if(options.type === 'date'){
|
||||
@ -1283,16 +1352,17 @@
|
||||
|
||||
//清空、重置
|
||||
,clear: function(){
|
||||
that.setValue('').remove();
|
||||
isStatic && (
|
||||
lay.extend(dateTime, that.firstDate)
|
||||
,that.calendar()
|
||||
)
|
||||
options.range && (
|
||||
delete that.endDate
|
||||
delete options.dateTime
|
||||
,delete that.endDate
|
||||
,delete that.startTime
|
||||
,delete that.endTime
|
||||
);
|
||||
that.setValue('').remove();
|
||||
that.done(['', {}, {}]);
|
||||
}
|
||||
|
||||
@ -1369,7 +1439,7 @@
|
||||
if(addSubYeay('sub')) return;
|
||||
dateTime.year--;
|
||||
that.checkDate('limit').calendar(null, index);
|
||||
options.range || that.done(null, 'change');
|
||||
that.done(null, 'change');
|
||||
}
|
||||
,prevMonth: function(){
|
||||
var YM = that.getAsYM(dateTime.year, dateTime.month, 'sub');
|
||||
@ -1378,7 +1448,7 @@
|
||||
,month: YM[1]
|
||||
});
|
||||
that.checkDate('limit').calendar(null, index);
|
||||
options.range || that.done(null, 'change');
|
||||
that.done(null, 'change');
|
||||
}
|
||||
,nextMonth: function(){
|
||||
var YM = that.getAsYM(dateTime.year, dateTime.month);
|
||||
@ -1387,13 +1457,13 @@
|
||||
,month: YM[1]
|
||||
});
|
||||
that.checkDate('limit').calendar(null, index);
|
||||
options.range || that.done(null, 'change');
|
||||
that.done(null, 'change');
|
||||
}
|
||||
,nextYear: function(){
|
||||
if(addSubYeay()) return;
|
||||
dateTime.year++
|
||||
that.checkDate('limit').calendar(null, index);
|
||||
options.range || that.done(null, 'change');
|
||||
that.done(null, 'change');
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -1406,6 +1476,8 @@
|
||||
//日期选择事件
|
||||
lay(that.elem).on('click', function(e){
|
||||
lay.stope(e);
|
||||
}).on('mousedown', function(e){
|
||||
lay.stope(e);
|
||||
});
|
||||
|
||||
//年月切换
|
||||
@ -1432,7 +1504,7 @@
|
||||
|
||||
that.listYM[i] = [layYM[0] | 0, layYM[1] | 0];
|
||||
that.list(layType, i);
|
||||
lay(that.footer).find(ELEM_TIME_BTN).addClass(DISABLED);
|
||||
lay(that.footer).find('.'+ ELEM_TIME_BTN).addClass(DISABLED);
|
||||
});
|
||||
|
||||
//下一月
|
||||
@ -1484,15 +1556,42 @@
|
||||
showEvent(options.elem, 'bind');
|
||||
showEvent(options.eventElem);
|
||||
|
||||
options.elem[0].eventHandler = true;
|
||||
};
|
||||
|
||||
//记录所有实例
|
||||
thisModule.that = {}; //记录所有实例对象
|
||||
|
||||
//获取当前实例对象
|
||||
thisModule.getThis = function(id){
|
||||
var that = thisModule.that[id];
|
||||
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required');
|
||||
return that;
|
||||
};
|
||||
|
||||
//初始执行
|
||||
ready.run = function(lay){
|
||||
//绑定关闭控件事件
|
||||
lay(document).on('click', function(e){
|
||||
if(e.target === options.elem[0]
|
||||
|| e.target === options.eventElem[0]
|
||||
|| e.target === lay(options.closeStop)[0]){
|
||||
return;
|
||||
}
|
||||
lay(document).on('mousedown', function(e){
|
||||
if(!laydate.thisId) return;
|
||||
var that = thisModule.getThis(laydate.thisId);
|
||||
if(!that) return;
|
||||
|
||||
var options = that.config;
|
||||
|
||||
if(
|
||||
e.target === options.elem[0] ||
|
||||
e.target === options.eventElem[0] ||
|
||||
e.target === lay(options.closeStop)[0]
|
||||
) return;
|
||||
|
||||
that.remove();
|
||||
|
||||
}).on('keydown', function(e){
|
||||
if(!laydate.thisId) return;
|
||||
var that = thisModule.getThis(laydate.thisId);
|
||||
if(!that) return;
|
||||
|
||||
if(e.keyCode === 13){
|
||||
if(lay('#'+ that.elemID)[0] && that.elemID === Class.thisElemDate){
|
||||
e.preventDefault();
|
||||
@ -1503,19 +1602,53 @@
|
||||
|
||||
//自适应定位
|
||||
lay(window).on('resize', function(){
|
||||
if(!laydate.thisId) return;
|
||||
var that = thisModule.getThis(laydate.thisId);
|
||||
if(!that) return;
|
||||
|
||||
if(!that.elem || !lay(ELEM)[0]){
|
||||
return false;
|
||||
}
|
||||
|
||||
that.position();
|
||||
});
|
||||
|
||||
options.elem[0].eventHandler = true;
|
||||
};
|
||||
|
||||
//核心接口
|
||||
laydate.render = function(options){
|
||||
var inst = new Class(options);
|
||||
return thisDate.call(inst);
|
||||
return thisModule.call(inst);
|
||||
};
|
||||
|
||||
//将指定对象转化为日期值
|
||||
laydate.parse = function(dateTime, format, one){
|
||||
dateTime = dateTime || {};
|
||||
|
||||
//如果 format 是字符型，则转换为数组格式
|
||||
if(typeof format === 'string'){
|
||||
format = thisModule.formatArr(format);
|
||||
}
|
||||
|
||||
format = (format || []).concat();
|
||||
|
||||
//转义为规定格式
|
||||
lay.each(format, function(i, item){
|
||||
if(/yyyy|y/.test(item)){ //年
|
||||
format[i] = lay.digit(dateTime.year, item.length);
|
||||
} else if(/MM|M/.test(item)){ //月
|
||||
format[i] = lay.digit(dateTime.month + (one || 0), item.length);
|
||||
} else if(/dd|d/.test(item)){ //日
|
||||
format[i] = lay.digit(dateTime.date, item.length);
|
||||
} else if(/HH|H/.test(item)){ //时
|
||||
format[i] = lay.digit(dateTime.hours, item.length);
|
||||
} else if(/mm|m/.test(item)){ //分
|
||||
format[i] = lay.digit(dateTime.minutes, item.length);
|
||||
} else if(/ss|s/.test(item)){ //秒
|
||||
format[i] = lay.digit(dateTime.seconds, item.length);
|
||||
}
|
||||
});
|
||||
|
||||
return format.join('');
|
||||
};
|
||||
|
||||
//得到某月的最后一天
|
||||
@ -1535,13 +1668,16 @@
|
||||
laydate.ready()
|
||||
,layui.define('lay', function(exports){ //layui 加载
|
||||
laydate.path = layui.cache.dir;
|
||||
ready.run(lay);
|
||||
exports(MOD_NAME, laydate);
|
||||
})
|
||||
) : (
|
||||
(typeof define === 'function' && define.amd) ? define(function(){ //requirejs 加载
|
||||
ready.run(lay);
|
||||
return laydate;
|
||||
}) : function(){ //普通 script 标签加载
|
||||
laydate.ready();
|
||||
ready.run(window.lay);
|
||||
window.laydate = laydate;
|
||||
}()
|
||||
);
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：layer - Web 弹出层组件
|
||||
@License：MIT
|
||||
|
||||
|
||||
/*!
|
||||
* layer - 通用 Web 弹出层组件
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
;!function(window, undefined){
|
||||
@ -21,8 +20,9 @@ var isLayui = window.layui && layui.define, $, win, ready = {
|
||||
}
|
||||
}
|
||||
return src || js[last].src;
|
||||
}();
|
||||
return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
|
||||
}()
|
||||
,GLOBAL = window.LAYUI_GLOBAL || {};
|
||||
return GLOBAL.layer_dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
|
||||
}(),
|
||||
|
||||
config: {}, end: {}, minIndex: 0, minLeft: [],
|
||||
@ -93,7 +93,7 @@ var isLayui = window.layui && layui.define, $, win, ready = {
|
||||
|
||||
//默认内置方法。
|
||||
var layer = {
|
||||
v: '3.4.0',
|
||||
v: '3.5.0',
|
||||
ie: function(){ //ie版本
|
||||
var agent = navigator.userAgent.toLowerCase();
|
||||
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
|
||||
@ -108,6 +108,7 @@ var layer = {
|
||||
layer.path = ready.config.path || layer.path;
|
||||
typeof options.extend === 'string' && (options.extend = [options.extend]);
|
||||
|
||||
//如果设置了路径，则加载样式
|
||||
if(ready.config.path) layer.ready();
|
||||
|
||||
if(!options.extend) return this;
|
||||
@ -203,9 +204,7 @@ var layer = {
|
||||
|
||||
var Class = function(setings){
|
||||
var that = this, creat = function(){
|
||||
layer.ready(function(){
|
||||
that.creat();
|
||||
});
|
||||
};
|
||||
that.index = ++layer.index;
|
||||
that.config.maxWidth = $(win).width() - 15*2; //初始最大宽度：当前屏幕宽，左右留 15px 边距
|
||||
@ -221,6 +220,9 @@ Class.pt = Class.prototype;
|
||||
var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close'];
|
||||
doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06'];
|
||||
|
||||
doms.SHADE = 'layui-layer-shade';
|
||||
doms.MOVE = 'layui-layer-move';
|
||||
|
||||
//默认配置
|
||||
Class.pt.config = {
|
||||
type: 0,
|
||||
@ -235,7 +237,8 @@ Class.pt.config = {
|
||||
zIndex: 19891014,
|
||||
maxWidth: 360,
|
||||
anim: 0,
|
||||
isOutAnim: true,
|
||||
isOutAnim: true, //退出动画
|
||||
minStack: true, //最小化堆叠
|
||||
icon: -1,
|
||||
moveType: 1,
|
||||
resize: true,
|
||||
@ -255,10 +258,10 @@ Class.pt.vessel = function(conType, callback){
|
||||
config.zIndex = zIndex;
|
||||
callback([
|
||||
//遮罩
|
||||
config.shade ? ('<div class="layui-layer-shade" id="layui-layer-shade'+ times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; ') +'"></div>') : '',
|
||||
config.shade ? ('<div class="'+ doms.SHADE +'" id="'+ doms.SHADE + times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; ') +'"></div>') : '',
|
||||
|
||||
//主体
|
||||
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fixed ? '' : ';position:absolute;') +'">'
|
||||
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + ';position:'+ (config.fixed ? 'fixed;' : 'absolute;') +'">'
|
||||
+ (conType && config.type != 2 ? '' : titleHTML)
|
||||
+ '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
|
||||
+ (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
|
||||
@ -279,7 +282,7 @@ Class.pt.vessel = function(conType, callback){
|
||||
}() : '')
|
||||
+ (config.resize ? '<span class="layui-layer-resize"></span>' : '')
|
||||
+ '</div>'
|
||||
], titleHTML, $('<div class="layui-layer-move"></div>'));
|
||||
], titleHTML, $('<div class="'+ doms.MOVE +'" id="'+ doms.MOVE +'"></div>'));
|
||||
return that;
|
||||
};
|
||||
|
||||
@ -345,13 +348,16 @@ Class.pt.creat = function(){
|
||||
}
|
||||
}();
|
||||
}() : body.append(html[1]);
|
||||
$('.layui-layer-move')[0] || body.append(ready.moveElem = moveElem);
|
||||
$('#'+ doms.MOVE)[0] || body.append(ready.moveElem = moveElem);
|
||||
|
||||
that.layero = $('#'+ doms[0] + times);
|
||||
that.shadeo = $('#'+ doms.SHADE + times);
|
||||
|
||||
config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times);
|
||||
}).auto(times);
|
||||
|
||||
//遮罩
|
||||
$('#layui-layer-shade'+ that.index).css({
|
||||
that.shadeo.css({
|
||||
'background-color': config.shade[1] || '#000'
|
||||
,'opacity': config.shade[0] || config.shade
|
||||
});
|
||||
@ -359,7 +365,19 @@ Class.pt.creat = function(){
|
||||
config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]);
|
||||
|
||||
//坐标自适应浏览器窗口尺寸
|
||||
config.type == 4 ? that.tips() : that.offset();
|
||||
config.type == 4 ? that.tips() : function(){
|
||||
that.offset()
|
||||
//首次弹出时，若 css 尚未加载，则等待 css 加载完毕后，重新设定尺寸
|
||||
parseInt(ready.getStyle(document.getElementById(doms.MOVE), 'z-index')) || function(){
|
||||
that.layero.css('visibility', 'hidden');
|
||||
layer.ready(function(){
|
||||
that.offset();
|
||||
that.layero.css('visibility', 'visible');
|
||||
});
|
||||
}();
|
||||
}();
|
||||
|
||||
//如果是固定定位
|
||||
if(config.fixed){
|
||||
win.on('resize', function(){
|
||||
that.offset();
|
||||
@ -689,14 +707,14 @@ Class.pt.callback = function(){
|
||||
|
||||
//点遮罩关闭
|
||||
if(config.shadeClose){
|
||||
$('#layui-layer-shade'+ that.index).on('click', function(){
|
||||
that.shadeo.on('click', function(){
|
||||
layer.close(that.index);
|
||||
});
|
||||
}
|
||||
|
||||
//最小化
|
||||
layero.find('.layui-layer-min').on('click', function(){
|
||||
var min = config.min && config.min(layero);
|
||||
var min = config.min && config.min(layero, that.index);
|
||||
min === false || layer.min(that.index, config);
|
||||
});
|
||||
|
||||
@ -704,11 +722,11 @@ Class.pt.callback = function(){
|
||||
layero.find('.layui-layer-max').on('click', function(){
|
||||
if($(this).hasClass('layui-layer-maxmin')){
|
||||
layer.restore(that.index);
|
||||
config.restore && config.restore(layero);
|
||||
config.restore && config.restore(layero, that.index);
|
||||
} else {
|
||||
layer.full(that.index, config);
|
||||
setTimeout(function(){
|
||||
config.full && config.full(layero);
|
||||
config.full && config.full(layero, that.index);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
@ -755,6 +773,7 @@ Class.pt.openLayer = function(){
|
||||
};
|
||||
};
|
||||
|
||||
//记录宽高坐标，用于还原
|
||||
ready.record = function(layero){
|
||||
var area = [
|
||||
layero.width(),
|
||||
@ -849,11 +868,20 @@ layer.style = function(index, options, limit){
|
||||
|
||||
//最小化
|
||||
layer.min = function(index, options){
|
||||
options = options || {};
|
||||
var layero = $('#'+ doms[0] + index)
|
||||
,shadeo = $('#'+ doms.SHADE + index)
|
||||
,titHeight = layero.find(doms[1]).outerHeight() || 0
|
||||
,left = layero.attr('minLeft') || (181*ready.minIndex)+'px'
|
||||
,position = layero.css('position');
|
||||
,position = layero.css('position')
|
||||
,settings = {
|
||||
width: 180
|
||||
,height: titHeight
|
||||
,position: 'fixed'
|
||||
,overflow: 'hidden'
|
||||
};
|
||||
|
||||
//记录宽高坐标，用于还原
|
||||
ready.record(layero);
|
||||
|
||||
if(ready.minLeft[0]){
|
||||
@ -861,31 +889,33 @@ layer.min = function(index, options){
|
||||
ready.minLeft.shift();
|
||||
}
|
||||
|
||||
layero.attr('position', position);
|
||||
//是否堆叠在左下角
|
||||
if(options.minStack){
|
||||
settings.left = left;
|
||||
settings.top = win.height() - titHeight;
|
||||
layero.attr('minLeft') || ready.minIndex++; //初次执行，最小化操作索引自增
|
||||
layero.attr('minLeft', left);
|
||||
}
|
||||
|
||||
layer.style(index, {
|
||||
width: 180
|
||||
,height: titHeight
|
||||
,left: left
|
||||
,top: win.height() - titHeight
|
||||
,position: 'fixed'
|
||||
,overflow: 'hidden'
|
||||
}, true);
|
||||
layero.attr('position', position);
|
||||
layer.style(index, settings, true);
|
||||
|
||||
layero.find('.layui-layer-min').hide();
|
||||
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
|
||||
ready.rescollbar(index);
|
||||
|
||||
if(!layero.attr('minLeft')){
|
||||
ready.minIndex++;
|
||||
}
|
||||
layero.attr('minLeft', left);
|
||||
//隐藏遮罩
|
||||
shadeo.hide();
|
||||
};
|
||||
|
||||
//还原
|
||||
layer.restore = function(index){
|
||||
var layero = $('#'+ doms[0] + index), area = layero.attr('area').split(',');
|
||||
var type = layero.attr('type');
|
||||
var layero = $('#'+ doms[0] + index)
|
||||
,shadeo = $('#'+ doms.SHADE + index)
|
||||
,area = layero.attr('area').split(',')
|
||||
,type = layero.attr('type');
|
||||
|
||||
//恢复原来尺寸
|
||||
layer.style(index, {
|
||||
width: parseFloat(area[0]),
|
||||
height: parseFloat(area[1]),
|
||||
@ -894,10 +924,14 @@ layer.restore = function(index){
|
||||
position: layero.attr('position'),
|
||||
overflow: 'visible'
|
||||
}, true);
|
||||
|
||||
layero.find('.layui-layer-max').removeClass('layui-layer-maxmin');
|
||||
layero.find('.layui-layer-min').show();
|
||||
layero.attr('type') === 'page' && layero.find(doms[4]).show();
|
||||
ready.rescollbar(index);
|
||||
|
||||
//恢复遮罩
|
||||
shadeo.show();
|
||||
};
|
||||
|
||||
//全屏
|
||||
@ -928,7 +962,6 @@ layer.title = function(name, index){
|
||||
|
||||
//关闭layer总方法
|
||||
layer.close = function(index, callback){
|
||||
layer.ready(function(){
|
||||
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
|
||||
if(!layero[0]) return;
|
||||
var WRAP = 'layui-layer-wrap', remove = function(){
|
||||
@ -961,7 +994,7 @@ layer.close = function(index, callback){
|
||||
layero.addClass('layer-anim '+ closeAnim);
|
||||
}
|
||||
|
||||
$('#layui-layer-moves, #layui-layer-shade' + index).remove();
|
||||
$('#layui-layer-moves, #'+ doms.SHADE + index).remove();
|
||||
layer.ie == 6 && ready.reselect();
|
||||
ready.rescollbar(index);
|
||||
if(layero.attr('minLeft')){
|
||||
@ -976,7 +1009,6 @@ layer.close = function(index, callback){
|
||||
remove();
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//关闭所有层
|
||||
@ -985,7 +1017,6 @@ layer.closeAll = function(type, callback){
|
||||
callback = type;
|
||||
type = null;
|
||||
};
|
||||
layer.ready(function(){
|
||||
var domsElem = $('.'+doms[0]);
|
||||
$.each(domsElem, function(_index){
|
||||
var othis = $(this);
|
||||
@ -994,7 +1025,6 @@ layer.closeAll = function(type, callback){
|
||||
is = null;
|
||||
});
|
||||
if(domsElem.length === 0) typeof callback === 'function' && callback();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/**
|
||||
|
||||
@Name：用于打包聚合版，该文件不会存在于构建后的目录
|
||||
|
||||
|
||||
/*!
|
||||
* 用于打包聚合版，该文件不会存在于构建后的目录
|
||||
*/
|
||||
|
||||
layui.define(function(exports){
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Name：table 表格操作组件
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* layui.table
|
||||
* 数据表格组件
|
||||
*/
|
||||
|
||||
layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
@ -145,7 +144,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
,'</table>'].join('')
|
||||
|
||||
//主模板
|
||||
,TPL_MAIN = ['<div class="layui-form layui-border-box {{d.VIEW_CLASS}}" lay-filter="LAY-table-{{d.index}}" lay-id="{{ d.data.id }}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">'
|
||||
,TPL_MAIN = ['<div class="layui-form layui-border-box {{d.VIEW_CLASS}}{{# if(d.data.className){ }} {{ d.data.className }}{{# } }}" lay-filter="LAY-table-{{d.index}}" lay-id="{{ d.data.id }}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">'
|
||||
|
||||
,'{{# if(d.data.toolbar){ }}'
|
||||
,'<div class="layui-table-tool">'
|
||||
@ -228,7 +227,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++table.index;
|
||||
that.config = $.extend({}, that.config, table.config, options);;
|
||||
that.config = $.extend({}, that.config, table.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/**
|
||||
|
||||
@Title: upload 文件上传组件
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* upload 文件上传组件
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
layui.define('layer' , function(exports){
|
||||
@ -45,7 +44,7 @@ layui.define('layer' , function(exports){
|
||||
}
|
||||
|
||||
//字符常量
|
||||
,MOD_NAME = 'upload', ELEM = '.layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
|
||||
,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
|
||||
|
||||
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag'
|
||||
|
||||
@ -231,10 +230,10 @@ layui.define('layer' , function(exports){
|
||||
opts.xhr = function(){
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
//上传进度
|
||||
xhr.upload.addEventListener("progress", function (e) {
|
||||
if(e.lengthComputable) {
|
||||
var percent = Math.floor((e.loaded/e.total)* 100); //百分比
|
||||
options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , e);
|
||||
xhr.upload.addEventListener("progress", function (obj) {
|
||||
if(obj.lengthComputable){
|
||||
var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比
|
||||
options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index);
|
||||
}
|
||||
});
|
||||
return xhr;
|
||||
@ -458,6 +457,7 @@ layui.define('layer' , function(exports){
|
||||
//设置选择的文本
|
||||
,setChooseText = function(files, filename){
|
||||
var elemFile = that.elemFile
|
||||
,item = options.item ? options.item : options.elem
|
||||
,value = files.length > 1
|
||||
? files.length + '个文件'
|
||||
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
/**
|
||||
|
||||
@Name：util 工具集组件
|
||||
@License：MIT
|
||||
|
||||
/*!
|
||||
* util 工具组件
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$
|
||||
,hint = layui.hint()
|
||||
|
||||
//外部接口
|
||||
,util = {
|
||||
@ -141,8 +140,14 @@ layui.define('jquery', function(exports){
|
||||
|
||||
//转化为日期格式字符
|
||||
,toDateString: function(time, format){
|
||||
//若 null 或空字符，则返回空字符
|
||||
if(time === null || time === '') return '';
|
||||
|
||||
var that = this
|
||||
,date = new Date(time || new Date())
|
||||
,date = new Date(function(){
|
||||
if(!time) return;
|
||||
return isNaN(time) ? time : (typeof time === 'string' ? parseInt(time) : time)
|
||||
}() || new Date())
|
||||
,ymd = [
|
||||
that.digit(date.getFullYear(), 4)
|
||||
,that.digit(date.getMonth() + 1)
|
||||
@ -154,8 +159,9 @@ layui.define('jquery', function(exports){
|
||||
,that.digit(date.getSeconds())
|
||||
];
|
||||
|
||||
format = format || 'yyyy-MM-dd HH:mm:ss';
|
||||
if(!date.getDate()) return hint.error('Invalid Msec for "util.toDateString(Msec)"'), '';
|
||||
|
||||
format = format || 'yyyy-MM-dd HH:mm:ss';
|
||||
return format.replace(/yyyy/g, ymd[0])
|
||||
.replace(/MM/g, ymd[1])
|
||||
.replace(/dd/g, ymd[2])
|
||||
@ -164,19 +170,48 @@ layui.define('jquery', function(exports){
|
||||
.replace(/ss/g, hms[2]);
|
||||
}
|
||||
|
||||
//防 xss 攻击
|
||||
//转义 html，防 xss 攻击
|
||||
,escape: function(html){
|
||||
return String(html || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
|
||||
.replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/'/g, ''').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
//还原转义的 html
|
||||
,unescape: function(str){
|
||||
return String(str || '').replace(/\&/g, '&')
|
||||
.replace(/\</g, '<').replace(/\>/g, '>')
|
||||
.replace(/\'/, '\'').replace(/\"/, '"');
|
||||
}
|
||||
|
||||
//让指定的元素保持在可视区域
|
||||
,toVisibleArea: function(options){
|
||||
options = $.extend({
|
||||
margin: 160 //触发动作的边界值
|
||||
,duration: 200 //动画持续毫秒数
|
||||
,type: 'y' //触发方向，x 水平、y 垂直
|
||||
}, options);
|
||||
|
||||
if(!options.scrollElem[0] || !options.thisElem[0]) return;
|
||||
|
||||
var scrollElem = options.scrollElem //滚动元素
|
||||
,thisElem = options.thisElem //目标元素
|
||||
,vertical = options.type === 'y' //是否垂直方向
|
||||
,SCROLL_NAME = vertical ? 'scrollTop' : 'scrollLeft' //滚动方法
|
||||
,OFFSET_NAME = vertical ? 'top' : 'left' //坐标方式
|
||||
,scrollValue = scrollElem[SCROLL_NAME]() //当前滚动距离
|
||||
,size = scrollElem[vertical ? 'height' : 'width']() //滚动元素的尺寸
|
||||
,scrollOffet = scrollElem.offset()[OFFSET_NAME] //滚动元素所处位置
|
||||
,thisOffset = thisElem.offset()[OFFSET_NAME] - scrollOffet //目标元素当前的所在位置
|
||||
,obj = {};
|
||||
|
||||
//边界满足条件
|
||||
if(thisOffset > size - options.margin || thisOffset < options.margin){
|
||||
obj[SCROLL_NAME] = thisOffset - size/2 + scrollValue
|
||||
scrollElem.animate(obj, options.duration);
|
||||
}
|
||||
}
|
||||
|
||||
//批量事件
|
||||
,event: function(attr, obj, eventType){
|
||||
var _body = $('body');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user