github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: 清理代码多余空白符

2.9.x-stable
贤心 2025-06-18 11:49:26 +08:00
parent 32916cc7da
commit b94720dbdc
34 changed files with 903 additions and 903 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
examples/all.html
View File

@ -12,13 +12,13 @@
<body> <body>
<textarea style=" <textarea style="
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
right:0; right:0;
width: 100px; width: 100px;
background-color:#666; background-color:#666;
z-index:100; z-index:100;
resize: none;"> resize: none;">
</textarea> </textarea>
@ -50,7 +50,7 @@ resize: none;">
<option value="010">北京</option> <option value="010">北京</option>
<option value="021">上海</option> <option value="021">上海</option>
<option value="0571">杭州</option> <option value="0571">杭州</option>
</select> </select>
</div> </div>
</div> </div>
<div class="layui-tab-item"> <div class="layui-tab-item">
@ -77,10 +77,10 @@ layui.use(function(){
,transfer = layui.transfer ,transfer = layui.transfer
,util = layui.util ,util = layui.util
,laydate = layui.laydate; ,laydate = layui.laydate;
layer.msg('hello layui'); layer.msg('hello layui');
//layer.closeAll(); //layer.closeAll();
//自动测试 //自动测试
(function(run){ (function(run){
if(!run) return; if(!run) return;
@ -88,7 +88,7 @@ layui.use(function(){
var timer = setInterval(function(){ var timer = setInterval(function(){
location.reload(); location.reload();
}, 1000); }, 1000);
$.ajax({ $.ajax({
url: './all.html' url: './all.html'
,beforeSend: function(){ ,beforeSend: function(){
@ -106,18 +106,18 @@ layui.use(function(){
} }
}); });
})(0); })(0);
laypage.render({ laypage.render({
elem: 'demo1' elem: 'demo1'
,count: 100 //总页数 ,count: 100 //总页数
}); });
console.log(lay('#footer').html()); console.log(lay('#footer').html());
laydate.render({ laydate.render({
elem: '#date1' elem: '#date1'
}) })
//测试加载非内置模块 //测试加载非内置模块
/* /*
layui.config({ layui.config({
@ -127,8 +127,8 @@ layui.use(function(){
,mod2: 'mod2' ,mod2: 'mod2'
}).use('mod1'); }).use('mod1');
*/ */
//定义标题及数据源 //定义标题及数据源
transfer.render({ transfer.render({
elem: '#test2' elem: '#test2'
@ -147,7 +147,7 @@ layui.use(function(){
//,width: 150 //定义宽度 //,width: 150 //定义宽度
,height: 210 //定义高度 ,height: 210 //定义高度
}); });
//触发事件 //触发事件
util.event('test-active', { util.event('test-active', {
'test-form': function(){ 'test-form': function(){
@ -176,7 +176,7 @@ layui.use(function(){
,'</ul>'].join('') ,'</ul>'].join('')
,success: function(layero){ ,success: function(layero){
layero.find('.layui-layer-content').css('overflow', 'visible'); layero.find('.layui-layer-content').css('overflow', 'visible');
form.render().on('submit(*)', function(data){ form.render().on('submit(*)', function(data){
layer.msg(JSON.stringify(data.field)); layer.msg(JSON.stringify(data.field));
}); });
@ -191,7 +191,7 @@ layui.use(function(){
}); });
} }
}); });
}); });
//})(); //})();
</script> </script>

12
examples/button.html
View File

@ -11,7 +11,7 @@
<div class="layui-container"> <div class="layui-container">
<span>按钮色系：</span> <span>按钮色系：</span>
<hr> <hr>
<div class="layui-btn-container"> <div class="layui-btn-container">
<a href="" class="layui-btn layui-btn-primary">原始按钮</a> <a href="" class="layui-btn layui-btn-primary">原始按钮</a>
<div class="layui-btn">默认按钮</div> <div class="layui-btn">默认按钮</div>
@ -33,7 +33,7 @@
<span>按钮图标：</span> <span>按钮图标：</span>
<hr> <hr>
<div class="layui-btn-container"> <div class="layui-btn-container">
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe603;</i></button> <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button> <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
@ -47,7 +47,7 @@
<span>按钮尺寸：</span> <span>按钮尺寸：</span>
<hr> <hr>
<div class="layui-btn-container"> <div class="layui-btn-container">
<button class="layui-btn layui-btn-lg">大型按钮</button> <button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn">默认按钮</button> <button class="layui-btn">默认按钮</button>
@ -60,7 +60,7 @@
<button class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button> <button class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button> <button class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
</div> </div>
<br><br> <br><br>
<span>按钮圆角：</span> <span>按钮圆角：</span>
@ -74,12 +74,12 @@
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button> <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button> <button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div> </div>
<br><br> <br><br>
<span>按钮图文：</span> <span>按钮图文：</span>
<hr> <hr>
<div class="layui-btn-container"> <div class="layui-btn-container">
<button class="layui-btn layui-btn-big layui-btn-primary layui-btn-radius">大型加圆角</button> <button class="layui-btn layui-btn-big layui-btn-primary layui-btn-radius">大型加圆角</button>
<button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-delete"></i> 删除</button> <button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-delete"></i> 删除</button>

8
examples/carousel.html
View File

@ -67,7 +67,7 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
<script> <script>
layui.use('carousel', function(){ layui.use('carousel', function(){
var carousel = layui.carousel; var carousel = layui.carousel;
// 实例 // 实例
var carInst = carousel.render({ var carInst = carousel.render({
elem: '#test1', elem: '#test1',
@ -85,7 +85,7 @@ layui.use('carousel', function(){
}); });
// carInst.goto(1); // carInst.goto(1);
// 事件 // 事件
/* /*
carousel.on('change(test1)', function(obj) { carousel.on('change(test1)', function(obj) {
@ -100,7 +100,7 @@ layui.use('carousel', function(){
anim: 'fade', anim: 'fade',
height: '120px' height: '120px'
}); });
carousel.render({ carousel.render({
elem: '#test3', elem: '#test3',
// full: true, // full: true,
@ -111,7 +111,7 @@ layui.use('carousel', function(){
anim: 'updown', anim: 'updown',
// full: true // full: true
}); });
// 图片轮播 // 图片轮播
carousel.render({ carousel.render({
elem: '#test4', elem: '#test4',

22
examples/colorpicker.html
View File

@ -21,23 +21,23 @@ body{padding:20px;}
</div> </div>
<div id="test1"></div> <div id="test1"></div>
</div> </div>
<div class="test-box"> <div class="test-box">
<div id="test2"></div> <div id="test2"></div>
</div> </div>
<div class="test-box"> <div class="test-box">
<div id="test3"></div> <div id="test3"></div>
</div> </div>
<div class="test-box"> <div class="test-box">
<div id="test4"></div> <div id="test4"></div>
</div> </div>
<div class="test-box"> <div class="test-box">
<div id="test5"></div> <div id="test5"></div>
</div> </div>
<div class="test-box"> <div class="test-box">
<div id="test6"></div> <div id="test6"></div>
</div> </div>
@ -74,7 +74,7 @@ body{padding:20px;}
console.log('close', color); console.log('close', color);
} }
}); });
colorpicker.render({ colorpicker.render({
elem: '#test2' elem: '#test2'
,color: 'rgba(218, 121, 157, 1)' //设置默认色 ,color: 'rgba(218, 121, 157, 1)' //设置默认色
@ -85,28 +85,28 @@ body{padding:20px;}
console.log(color) console.log(color)
} }
}); });
colorpicker.render({ colorpicker.render({
elem: '#test3' elem: '#test3'
,color: '#000' ,color: '#000'
//,alpha: true //,alpha: true
//,format: 'rgb' //设置输入显示格式为rgb //,format: 'rgb' //设置输入显示格式为rgb
}); });
colorpicker.render({ colorpicker.render({
elem: '#test4' elem: '#test4'
,color: '#06eeb8' ,color: '#06eeb8'
,predefine: true //开启预定义色 ,predefine: true //开启预定义色
,format: 'rgb' ,format: 'rgb'
}); });
colorpicker.render({ colorpicker.render({
elem: '#test5' elem: '#test5'
,color: '#ffd900' ,color: '#ffd900'
,predefine: true ,predefine: true
,size: 'lg' ,size: 'lg'
}); });
colorpicker.render({ colorpicker.render({
elem: '#test6' elem: '#test6'
,color: '#F00' ,color: '#F00'
@ -125,4 +125,4 @@ body{padding:20px;}
}) })
</script> </script>
</body> </body>
</html> </html>

4
examples/element.tab.html
View File

@ -111,7 +111,7 @@ body{padding:20px;}
layui.use(['element', 'form'], function(){ layui.use(['element', 'form'], function(){
var element = layui.element; var element = layui.element;
element.on('tab(test)', function(data){ element.on('tab(test)', function(data){
console.log(this, data); console.log(this, data);
}); });
@ -119,7 +119,7 @@ layui.use(['element', 'form'], function(){
element.on('tabDelete(tabDemo)', function(data){ element.on('tabDelete(tabDemo)', function(data){
console.log(this, data); console.log(this, data);
}); });
}); });
</script> </script>
</body> </body>

64
examples/layout-grid.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@ -28,7 +28,7 @@
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>始终等比例水平排列</legend> <legend>始终等比例水平排列</legend>
</fieldset> </fieldset>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-xs6"> <div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">50%</div> <div class="grid-demo grid-demo-bg1">50%</div>
@ -37,9 +37,9 @@
<div class="grid-demo">50%</div> <div class="grid-demo">50%</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-xs3"> <div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">25%</div> <div class="grid-demo grid-demo-bg1">25%</div>
@ -54,11 +54,11 @@
<div class="grid-demo">25%</div> <div class="grid-demo">25%</div>
</div> </div>
</div> </div>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>移动设备、桌面端的不同展现</legend> <legend>移动设备、桌面端的不同展现</legend>
</fieldset> </fieldset>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-xs12 layui-col-md8"> <div class="layui-col-xs12 layui-col-md8">
<div class="grid-demo grid-demo-bg1">移动设备：100%、桌面：60%</div> <div class="grid-demo grid-demo-bg1">移动设备：100%、桌面：60%</div>
@ -70,11 +70,11 @@
<div class="grid-demo grid-demo-bg2">移动设备：50%、桌面：100%</div> <div class="grid-demo grid-demo-bg2">移动设备：50%、桌面：100%</div>
</div> </div>
</div> </div>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>移动设备、平板、桌面端的不同展现</legend> <legend>移动设备、平板、桌面端的不同展现</legend>
</fieldset> </fieldset>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
<div class="grid-demo grid-demo-bg1">50% | 33.33% | 33.33%</div> <div class="grid-demo grid-demo-bg1">50% | 33.33% | 33.33%</div>
@ -92,7 +92,7 @@
<div class="grid-demo layui-bg-black">33.33% | 50% | 33.33%</div> <div class="grid-demo layui-bg-black">33.33% | 50% | 33.33%</div>
</div> </div>
</div> </div>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>从小屏幕堆叠到桌面水平排列</legend> <legend>从小屏幕堆叠到桌面水平排列</legend>
</fieldset> </fieldset>
@ -135,9 +135,9 @@
<div class="grid-demo">1/12</div> <div class="grid-demo">1/12</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md9"> <div class="layui-col-md9">
<div class="grid-demo grid-demo-bg1">75%</div> <div class="grid-demo grid-demo-bg1">75%</div>
@ -146,9 +146,9 @@
<div class="grid-demo">25%</div> <div class="grid-demo">25%</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md4"> <div class="layui-col-md4">
<div class="grid-demo grid-demo-bg1">33.33%</div> <div class="grid-demo grid-demo-bg1">33.33%</div>
@ -160,9 +160,9 @@
<div class="grid-demo grid-demo-bg1">33.33%</div> <div class="grid-demo grid-demo-bg1">33.33%</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md6"> <div class="layui-col-md6">
<div class="grid-demo grid-demo-bg1">50%</div> <div class="grid-demo grid-demo-bg1">50%</div>
@ -171,7 +171,7 @@
<div class="grid-demo">50%</div> <div class="grid-demo">50%</div>
</div> </div>
</div> </div>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>分栏间隔</legend> <legend>分栏间隔</legend>
</fieldset> </fieldset>
@ -190,9 +190,9 @@
<div class="grid-demo">1/4</div> <div class="grid-demo">1/4</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row layui-col-space5"> <div class="layui-row layui-col-space5">
<div class="layui-col-md4"> <div class="layui-col-md4">
<div class="grid-demo grid-demo-bg1">1/3</div> <div class="grid-demo grid-demo-bg1">1/3</div>
@ -204,9 +204,9 @@
<div class="grid-demo grid-demo-bg1">1/3</div> <div class="grid-demo grid-demo-bg1">1/3</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row layui-col-space10"> <div class="layui-row layui-col-space10">
<div class="layui-col-md9"> <div class="layui-col-md9">
<div class="grid-demo grid-demo-bg1">75%</div> <div class="grid-demo grid-demo-bg1">75%</div>
@ -215,9 +215,9 @@
<div class="grid-demo">25%</div> <div class="grid-demo">25%</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row layui-col-space15"> <div class="layui-row layui-col-space15">
<div class="layui-col-md7"> <div class="layui-col-md7">
<div class="grid-demo grid-demo-bg1">58.33%</div> <div class="grid-demo grid-demo-bg1">58.33%</div>
@ -226,9 +226,9 @@
<div class="grid-demo">41.67%</div> <div class="grid-demo">41.67%</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row layui-col-space20"> <div class="layui-row layui-col-space20">
<div class="layui-col-md4"> <div class="layui-col-md4">
<div class="grid-demo grid-demo-bg1">33.33%</div> <div class="grid-demo grid-demo-bg1">33.33%</div>
@ -240,11 +240,11 @@
<div class="grid-demo">33.33%</div> <div class="grid-demo">33.33%</div>
</div> </div>
</div> </div>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>列偏移</legend> <legend>列偏移</legend>
</fieldset> </fieldset>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md4"> <div class="layui-col-md4">
<div class="grid-demo grid-demo-bg1">33.33%</div> <div class="grid-demo grid-demo-bg1">33.33%</div>
@ -259,9 +259,9 @@
<div class="grid-demo">不偏移</div> <div class="grid-demo">不偏移</div>
</div> </div>
</div> </div>
<br> <br>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md3 layui-col-md-offset3"> <div class="layui-col-md3 layui-col-md-offset3">
<div class="grid-demo grid-demo-bg1">偏移3列</div> <div class="grid-demo grid-demo-bg1">偏移3列</div>
@ -270,11 +270,11 @@
<div class="grid-demo">偏移1列</div> <div class="grid-demo">偏移1列</div>
</div> </div>
</div> </div>
<fieldset class="layui-elem-field layui-field-title"> <fieldset class="layui-elem-field layui-field-title">
<legend>嵌套</legend> <legend>嵌套</legend>
</fieldset> </fieldset>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md5"> <div class="layui-col-md5">
<div class="layui-row grid-demo"> <div class="layui-row grid-demo">
@ -303,7 +303,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="layui-fluid"> <div class="layui-fluid">

36
examples/laypage.html
View File

@ -26,10 +26,10 @@ body{padding: 10px;}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>将一段已知数组分页展示</legend> <legend>将一段已知数组分页展示</legend>
</fieldset> </fieldset>
<div id="demo9"></div> <div id="demo9"></div>
<ul id="biuuu_city_list"></ul> <ul id="biuuu_city_list"></ul>
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
@ -39,13 +39,13 @@ layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage var laypage = layui.laypage
,layer = layui.layer; ,layer = layui.layer;
//总页数低于页码总数 //总页数低于页码总数
laypage.render({ laypage.render({
elem: 'demo0' elem: 'demo0'
,count: 50 //数据总数 ,count: 50 //数据总数
}); });
//总页数大于页码总数 //总页数大于页码总数
laypage.render({ laypage.render({
elem: 'demo1' elem: 'demo1'
@ -54,14 +54,14 @@ layui.use(['laypage', 'layer'], function(){
console.log(obj) console.log(obj)
} }
}); });
//自定义样式 //自定义样式
laypage.render({ laypage.render({
elem: 'demo2' elem: 'demo2'
,count: 100 ,count: 100
,theme: '#1E9FFF' ,theme: '#1E9FFF'
}); });
//自定义首页、尾页、上一页、下一页文本 //自定义首页、尾页、上一页、下一页文本
laypage.render({ laypage.render({
elem: 'demo3' elem: 'demo3'
@ -71,7 +71,7 @@ layui.use(['laypage', 'layer'], function(){
,prev: '<em>←</em>' ,prev: '<em>←</em>'
,next: '<em>→</em>' ,next: '<em>→</em>'
}); });
//不显示首页尾页 //不显示首页尾页
laypage.render({ laypage.render({
elem: 'demo4' elem: 'demo4'
@ -79,7 +79,7 @@ layui.use(['laypage', 'layer'], function(){
,first: false ,first: false
,last: false ,last: false
}); });
//开启HASH //开启HASH
laypage.render({ laypage.render({
elem: 'demo5' elem: 'demo5'
@ -87,7 +87,7 @@ layui.use(['laypage', 'layer'], function(){
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页 ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
,hash: 'fenye' //自定义hash值 ,hash: 'fenye' //自定义hash值
}); });
//只显示上一页、下一页 //只显示上一页、下一页
laypage.render({ laypage.render({
elem: 'demo6' elem: 'demo6'
@ -99,7 +99,7 @@ layui.use(['laypage', 'layer'], function(){
} }
} }
}); });
//完整功能 //完整功能
laypage.render({ laypage.render({
elem: 'demo7' elem: 'demo7'
@ -114,7 +114,7 @@ layui.use(['laypage', 'layer'], function(){
console.log(obj) console.log(obj)
} }
}); });
//自定义排版 //自定义排版
laypage.render({ laypage.render({
elem: 'demo8' elem: 'demo8'
@ -123,11 +123,11 @@ layui.use(['laypage', 'layer'], function(){
//,limits: [100, 200, 300] //,limits: [100, 200, 300]
,limit: 200 ,limit: 200
}); });
//将一段数组分页展示 //将一段数组分页展示
//测试数据 //测试数据
var data = [ var data = [
'北京', '北京',
@ -168,7 +168,7 @@ layui.use(['laypage', 'layer'], function(){
'澳门', '澳门',
'台北' '台北'
]; ];
//调用分页 //调用分页
laypage.render({ laypage.render({
elem: 'demo9' elem: 'demo9'
@ -186,7 +186,7 @@ layui.use(['laypage', 'layer'], function(){
}(); }();
} }
}); });
}); });
</script> </script>
</body> </body>

46
examples/laytpl.html
View File

@ -15,7 +15,7 @@
<body> <body>
<div> <div>
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-xs6 laytpl-demo"> <div class="layui-col-xs6 laytpl-demo">
<div>模板</div> <div>模板</div>
@ -38,12 +38,12 @@
{{# } }} {{# } }}
<span>{{ item.time || '' }}</span> <span>{{ item.time || '' }}</span>
{{ str }} {{ str }}
</li> </li>
{{# }); if(d.items.length === 0){ }} {{# }); if(d.items.length === 0){ }}
无数据 无数据
{{# } }} {{# } }}
</ul> </ul>
<hr> <hr>
</div> </div>
@ -52,7 +52,7 @@
{{ d.content || '' }} {{ d.content || '' }}
{{ }} {{}} {{ }} {{}}
{{ }} {{ }}
\a \a
'12'""""" '12'"""""
"哈''哈" "哈''哈"
@ -60,7 +60,7 @@
<p>渲染时间：{{ layui.util.toDateString(new Date()) }}</p></textarea> <p>渲染时间：{{ layui.util.toDateString(new Date()) }}</p></textarea>
</div> </div>
<div class="layui-col-xs6 laytpl-demo"> <div class="layui-col-xs6 laytpl-demo">
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-xs3">数据</div> <div class="layui-col-xs3">数据</div>
@ -105,12 +105,12 @@
<div class="layui-padding-sm" id="demoView1"></div> <div class="layui-padding-sm" id="demoView1"></div>
</div> </div>
</div> </div>
<script type="type/html" template id="demoTplCommon"> <script type="type/html" template id="demoTplCommon">
公共模板 - {{ d.title }} 公共模板 - {{ d.title }}
</script> </script>
<script type="type/html" template id="demoTplList"> <script type="type/html" template id="demoTplList">
{{# if(d.items && d.items.length > 0){ }} {{# if(d.items && d.items.length > 0){ }}
<ul> <ul>
@ -123,10 +123,10 @@
<script type="type/html" template id="laytplTestTpl"> <script type="type/html" template id="laytplTestTpl">
{{# for(var i = 0; i < d.items.length; i++){ }} {{# for(var i = 0; i < d.items.length; i++){ }}
第{{= d.items[i].index }}个，Name: {{- d.items[i].name }} Number: {{= d.items[i].number }} 第{{= d.items[i].index }}个，Name: {{- d.items[i].name }} Number: {{= d.items[i].number }}
{{# } }} {{# } }}
</script> </script>
</div> </div>
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
@ -135,7 +135,7 @@ layui.use(['laytpl', 'util'], function(){
var laytpl = layui.laytpl; var laytpl = layui.laytpl;
var util = layui.util; var util = layui.util;
var $ = layui.$; var $ = layui.$;
// 获取模板和数据 // 获取模板和数据
var get = function(type){ var get = function(type){
return { return {
@ -149,9 +149,9 @@ layui.use(['laytpl', 'util'], function(){
}() }()
}; };
}; };
var data = get(); var data = get();
// 耗时计算 // 耗时计算
var startTime = new Date().getTime(), timer = function(startTime, title){ var startTime = new Date().getTime(), timer = function(startTime, title){
var endTime = new Date().getTime(); var endTime = new Date().getTime();
@ -172,34 +172,34 @@ layui.use(['laytpl', 'util'], function(){
timer(startTime); timer(startTime);
$('#demoView1').html(view); $('#demoView1').html(view);
}); });
// 编辑 // 编辑
$('.laytpl-demo textarea').on('input', function(){ $('.laytpl-demo textarea').on('input', function(){
var data = get(); var data = get();
if(!data.data) return; if(!data.data) return;
// 计算模板渲染耗时 // 计算模板渲染耗时
var startTime = new Date().getTime(); var startTime = new Date().getTime();
// 若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增） // 若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增）
if(this.id === 'demoTPL1'){ if(this.id === 'demoTPL1'){
thisTpl.parse(data.template, data.data); // 解析模板 thisTpl.parse(data.template, data.data); // 解析模板
} }
// 执行渲染 // 执行渲染
thisTpl.render(data.data, function(view){ thisTpl.render(data.data, function(view){
timer(startTime); timer(startTime);
$('#demoView1').html(view); $('#demoView1').html(view);
}); });
}); });
// 事件 // 事件
util.on({ util.on({
// 性能测试 // 性能测试
test1: function(){ test1: function(){
var dataLen = 1000 // 数据量 var dataLen = 1000 // 数据量
var renderTimes = 1000; // 渲染次数 var renderTimes = 1000; // 渲染次数
// 初始化数据 // 初始化数据
var data = { var data = {
title: '性能测试', title: '性能测试',
@ -214,7 +214,7 @@ layui.use(['laytpl', 'util'], function(){
return items; return items;
}([]) }([])
}; };
// 模板 // 模板
var startTime = new Date(); var startTime = new Date();
for(var j = 0; j < renderTimes; j++){ for(var j = 0; j < renderTimes; j++){
@ -223,7 +223,7 @@ layui.use(['laytpl', 'util'], function(){
} }
timer(startTime, '本次测试耗时：'); timer(startTime, '本次测试耗时：');
$('#demoView1').html(html); $('#demoView1').html(html);
} }
}); });

18
examples/menu.html
View File

@ -14,12 +14,12 @@
<div class="layui-container" style="padding-top: 30px;"> <div class="layui-container" style="padding-top: 30px;">
<div class="layui-btn-container"> <div class="layui-btn-container">
<button type="button" class="layui-btn" lay-active="lg">大尺寸</button> <button type="button" class="layui-btn" lay-active="lg">大尺寸</button>
<button type="button" class="layui-btn" lay-active="normal">常规尺寸</button> <button type="button" class="layui-btn" lay-active="normal">常规尺寸</button>
</div> </div>
<div class="layui-row layui-col-space30" id="demo-box" style="padding: 30px 0;"> <div class="layui-row layui-col-space30" id="demo-box" style="padding: 30px 0;">
<div class="layui-col-xs9 layui-col-md3"> <div class="layui-col-xs9 layui-col-md3">
<div class="layui-panel"> <div class="layui-panel">
<ul class="layui-menu" id="demo1"> <ul class="layui-menu" id="demo1">
@ -109,7 +109,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="layui-col-xs9 layui-col-md3"> <div class="layui-col-xs9 layui-col-md3">
<div class="layui-panel"> <div class="layui-panel">
<ul class="layui-menu" id="docDemoMenu1"> <ul class="layui-menu" id="docDemoMenu1">
@ -146,7 +146,7 @@
<li class="layui-menu-item-divider"></li> <li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}"> <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title"> <div class="layui-menu-body-title">
menu item 5 menu item 5
<i class="layui-icon layui-icon-right"></i> <i class="layui-icon layui-icon-right"></i>
</div> </div>
<div class="layui-panel layui-menu-body-panel"> <div class="layui-panel layui-menu-body-panel">
@ -166,7 +166,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -176,13 +176,13 @@ layui.use(['dropdown', 'util'], function(){
var dropdown = layui.dropdown var dropdown = layui.dropdown
,util = layui.util ,util = layui.util
,$ = layui.jquery; ,$ = layui.jquery;
dropdown.on('click(demo1)', function(options){ dropdown.on('click(demo1)', function(options){
var thisElem = $(this); var thisElem = $(this);
console.log(thisElem, options); console.log(thisElem, options);
}); });
util.event('lay-active', { util.event('lay-active', {
normal: function(){ normal: function(){
$('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4'); $('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');

6
examples/rate.html
View File

@ -55,7 +55,7 @@ layui.use(['rate'], function(){
var rate = layui.rate; var rate = layui.rate;
//渲染 //渲染
// rate.set({ // rate.set({
// elem: '#test1' // elem: '#test1'
// ,length: 7 // ,length: 7
@ -65,7 +65,7 @@ layui.use(['rate'], function(){
// ,text: true // ,text: true
// ,reader: true // ,reader: true
// }) // })
rate.render({ rate.render({
elem: '#test1' elem: '#test1'
,length: 5 ,length: 5
@ -104,7 +104,7 @@ layui.use(['rate'], function(){
,half: true ,half: true
,theme: '#FF5722' ,theme: '#FF5722'
}) })
//只读 //只读
rate.render({ rate.render({
elem: '#test4' elem: '#test4'

4
examples/responsive.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>

8
examples/table-static.html
View File

@ -29,7 +29,7 @@
<th>人物</th> <th>人物</th>
<th>民族</th> <th>民族</th>
<th>格言</th> <th>格言</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
@ -58,7 +58,7 @@
<th>人物</th> <th>人物</th>
<th>民族</th> <th>民族</th>
<th>格言</th> <th>格言</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
@ -87,7 +87,7 @@
<th>人物</th> <th>人物</th>
<th>民族</th> <th>民族</th>
<th>格言</th> <th>格言</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
@ -104,4 +104,4 @@
</table> </table>
</body> </body>
</html> </html>

2
examples/text.md.html
View File

@ -58,7 +58,7 @@
.pipe(gulp.dest(dest)); .pipe(gulp.dest(dest));
}; };
</code></pre> </code></pre>
<hr> <hr>
<p id="ref-1">REF-1</p> <p id="ref-1">REF-1</p>

6
examples/transfer.html
View File

@ -29,7 +29,7 @@
<div id="text2"></div> <div id="text2"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="text3"></div> <div id="text3"></div>
@ -57,7 +57,7 @@
,value: ["1", "15", "16"] ,value: ["1", "15", "16"]
,showSearch: true // 若区分大小写，设置 'cs' ,showSearch: true // 若区分大小写，设置 'cs'
}); });
//按钮事件 //按钮事件
util.event('lay-demo', { util.event('lay-demo', {
getData: function(othis){ getData: function(othis){
@ -99,4 +99,4 @@
</script> </script>
</body> </body>
</html> </html>

18
examples/tree.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树组件 - layui</title> <title>树组件 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css" media="all"> <link rel="stylesheet" href="../src/css/layui.css" media="all">
<style> <style>
body{padding: 100px;} body{padding: 100px;}
#test1,#test2{margin-bottom: 100px; width: 400px;} #test1,#test2{margin-bottom: 100px; width: 400px;}
@ -22,9 +22,9 @@
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">表单内</label> <label class="layui-form-label">表单内</label>
<div class="layui-input-block"> <div class="layui-input-block">
</div> </div>
</div> </div>
<div id="test1"></div> <div id="test1"></div>
<div id="test2"></div> <div id="test2"></div>
@ -37,7 +37,7 @@
,layer = layui.layer ,layer = layui.layer
,util = layui.util ,util = layui.util
,index = 100; ,index = 100;
//数据源 //数据源
var data1 = [{ var data1 = [{
title: 'A-1' title: 'A-1'
@ -156,7 +156,7 @@
}] }]
}] }]
}]; }];
//数据源 //数据源
var data2 = [{ var data2 = [{
title: '控制台' title: '控制台'
@ -200,7 +200,7 @@
} }
,showCheckbox: true //是否显示复选框 ,showCheckbox: true //是否显示复选框
,accordion: 0 //是否开启手风琴模式 ,accordion: 0 //是否开启手风琴模式
,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩 ,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
,isJump: 0 //点击文案跳转地址 ,isJump: 0 //点击文案跳转地址
,edit: true //操作节点图标 ,edit: true //操作节点图标
@ -218,7 +218,7 @@
} }
,reload: function(){ ,reload: function(){
tree.reload('demoId1', { tree.reload('demoId1', {
}); });
} }
}); });
@ -246,9 +246,9 @@
console.log(state, obj, target); console.log(state, obj, target);
} }
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

54
examples/upload.html
View File

@ -16,7 +16,7 @@ hr{margin: 32px 0;}
<div class="layui-upload"> <div class="layui-upload">
<button type="button" class="layui-btn" id="test1" name="123">上传图片</button> <button type="button" class="layui-btn" id="test1" name="123">上传图片</button>
<div class="layui-upload-list"> <div class="layui-upload-list">
<img class="layui-upload-img" src="" id="demo1"> <img class="layui-upload-img" src="" id="demo1">
<p id="demoText"></p> <p id="demoText"></p>
@ -31,14 +31,14 @@ hr{margin: 32px 0;}
<hr> <hr>
<div class="layui-upload"> <div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button> <button type="button" class="layui-btn" id="test2">多图片上传</button>
<div class="layui-upload-list" id="demo2"></div> <div class="layui-upload-list" id="demo2"></div>
</div> </div>
<hr> <hr>
<div class="layui-upload"> <div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list"> <div class="layui-upload-list">
<table class="layui-table"> <table class="layui-table">
<thead> <thead>
@ -121,13 +121,13 @@ layui.use(['upload', 'element', 'form'], function(){
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64） $('#demo1').attr('src', result); //图片链接（base64）
}); });
return; return;
layer.msg('不允许上传') layer.msg('不允许上传')
return false; return false;
}, },
done: function(res, index){ done: function(res, index){
//如果上传失败 //如果上传失败
if(res.code > 0){ if(res.code > 0){
return layer.msg('上传失败'); return layer.msg('上传失败');
@ -137,14 +137,14 @@ layui.use(['upload', 'element', 'form'], function(){
}, },
error: function(index, upload){ error: function(index, upload){
this.item.html('重选上传'); this.item.html('重选上传');
//演示失败状态，并实现重传 //演示失败状态，并实现重传
var demoText = $('#demoText'); var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){ demoText.find('.demo-reload').on('click', function(){
uploadInst.upload(); uploadInst.upload();
}); });
element.progress('demo', '0%'); element.progress('demo', '0%');
}, },
progress: function(n, elem, res, index){ progress: function(n, elem, res, index){
@ -160,7 +160,7 @@ layui.use(['upload', 'element', 'form'], function(){
acceptMime: 'image/*', // 只筛选图片 acceptMime: 'image/*', // 只筛选图片
// size: 2, // size: 2,
}); });
// 演示多图片上传 // 演示多图片上传
upload.render({ upload.render({
elem: '#test2', elem: '#test2',
@ -186,7 +186,7 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(obj) console.log(obj)
} }
}); });
// 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况 // 演示多文件列表 --- 本示例仅演示未开启 unified 属性的情况
var demoListView = $('#demoList'); var demoListView = $('#demoList');
var uploadListIns = upload.render({ var uploadListIns = upload.render({
@ -198,10 +198,10 @@ layui.use(['upload', 'element', 'form'], function(){
auto: false, auto: false,
bindAction: '#testListAction', bindAction: '#testListAction',
// size: 30, // size: 30,
choose: function(obj){ choose: function(obj){
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列 var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
//读取本地文件 //读取本地文件
obj.preview(function(index, file, result){ obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">' var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>' ,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
@ -211,12 +211,12 @@ layui.use(['upload', 'element', 'form'], function(){
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>' ,'</td>'
,'</tr>'].join('')); ,'</tr>'].join(''));
//单个重传 //单个重传
tr.find('.demo-reload').on('click', function(){ tr.find('.demo-reload').on('click', function(){
obj.upload(index, file); obj.upload(index, file);
}); });
//删除 //删除
var that = this; var that = this;
tr.find('.demo-delete').on('click', function(){ tr.find('.demo-delete').on('click', function(){
@ -225,9 +225,9 @@ layui.use(['upload', 'element', 'form'], function(){
tr.remove(); tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
}); });
demoListView.append(tr); demoListView.append(tr);
element.render('progress'); element.render('progress');
}); });
}, },
@ -267,7 +267,7 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '.testm', elem: '.testm',
done: function(res, index, upload){ done: function(res, index, upload){
@ -276,7 +276,7 @@ layui.use(['upload', 'element', 'form'], function(){
} }
}) })
/* /*
upload.render({ upload.render({
elem: '#test33', elem: '#test33',
@ -286,7 +286,7 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res) console.log(res)
} }
});*/ });*/
upload.render({ upload.render({
elem: '#test4', elem: '#test4',
url: url, // 实际使用时改成您自己的上传接口即可 url: url, // 实际使用时改成您自己的上传接口即可
@ -295,7 +295,7 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res) console.log(res)
} }
}); });
upload.render({ upload.render({
elem: '#test5', elem: '#test5',
url: '', url: '',
@ -304,8 +304,8 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res) console.log(res)
} }
}); });
//手动上传 //手动上传
upload.render({ upload.render({
elem: '#test6', elem: '#test6',
@ -313,7 +313,7 @@ layui.use(['upload', 'element', 'form'], function(){
auto: false, auto: false,
// multiple: true, // multiple: true,
bindAction: '#test7', bindAction: '#test7',
choose: function(obj){ choose: function(obj){
var that = this; var that = this;
obj.preview(function(index, file){ obj.preview(function(index, file){
that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>'); that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>');
@ -328,7 +328,7 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '#test8', elem: '#test8',
url: url, // 实际使用时改成您自己的上传接口即可 url: url, // 实际使用时改成您自己的上传接口即可
@ -336,7 +336,7 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res); console.log(res);
} }
}); });
upload.render({ upload.render({
elem: '#test9', elem: '#test9',
url: url, // 实际使用时改成您自己的上传接口即可 url: url, // 实际使用时改成您自己的上传接口即可
@ -344,9 +344,9 @@ layui.use(['upload', 'element', 'form'], function(){
console.log(res); console.log(res);
} }
}); });
}); });
</script> </script>
</body> </body>

10
src/modules/all.js
View File

@ -1,10 +1,10 @@
/** /**
* 用于加载所有内置模块 * 用于加载所有内置模块
* MIT Licensed * MIT Licensed
*/ */
layui.define(function(){ layui.define(function(){
var mods = [] var mods = []
var builtin = layui.cache.builtin; var builtin = layui.cache.builtin;
layui.each(builtin, function(modName){ layui.each(builtin, function(modName){
@ -15,9 +15,9 @@ layui.define(function(){
return mods; return mods;
}(), function(exports){ }(), function(exports){
"use strict"; "use strict";
var MOD_NAME = 'all'; var MOD_NAME = 'all';
// 外部接口 // 外部接口
var all = { var all = {
config: {}, config: {},

102
src/modules/carousel.js
View File

@ -1,11 +1,11 @@
/** /**
* carousel 轮播模块 * carousel 轮播模块
* MIT Licensed * MIT Licensed
*/ */
layui.define(['jquery', 'lay'], function(exports){ layui.define(['jquery', 'lay'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var lay = layui.lay; var lay = layui.lay;
@ -22,13 +22,13 @@ layui.define(['jquery', 'lay'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
}, },
// 事件 // 事件
on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
} }
}; };
// 字符常量 // 字符常量
var MOD_NAME = 'carousel'; var MOD_NAME = 'carousel';
var ELEM = '.layui-carousel'; var ELEM = '.layui-carousel';
@ -36,7 +36,7 @@ layui.define(['jquery', 'lay'], function(exports){
var SHOW = 'layui-show'; var SHOW = 'layui-show';
var HIDE = 'layui-hide'; var HIDE = 'layui-hide';
var DISABLED = 'layui-disabled' var DISABLED = 'layui-disabled'
var ELEM_ITEM = '>*[carousel-item]>*'; var ELEM_ITEM = '>*[carousel-item]>*';
var ELEM_LEFT = 'layui-carousel-left'; var ELEM_LEFT = 'layui-carousel-left';
var ELEM_RIGHT = 'layui-carousel-right'; var ELEM_RIGHT = 'layui-carousel-right';
@ -44,14 +44,14 @@ layui.define(['jquery', 'lay'], function(exports){
var ELEM_NEXT = 'layui-carousel-next'; var ELEM_NEXT = 'layui-carousel-next';
var ELEM_ARROW = 'layui-carousel-arrow'; var ELEM_ARROW = 'layui-carousel-arrow';
var ELEM_IND = 'layui-carousel-ind'; var ELEM_IND = 'layui-carousel-ind';
// 构造器 // 构造器
var Class = function(options){ var Class = function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, carousel.config, options); that.config = $.extend({}, that.config, carousel.config, options);
that.render(); that.render();
}; };
// 默认配置 // 默认配置
Class.prototype.config = { Class.prototype.config = {
width: '600px', width: '600px',
@ -65,7 +65,7 @@ layui.define(['jquery', 'lay'], function(exports){
trigger: 'click', // 指示器的触发方式：click/hover trigger: 'click', // 指示器的触发方式：click/hover
index: 0 // 初始开始的索引 index: 0 // 初始开始的索引
}; };
// 轮播渲染 // 轮播渲染
Class.prototype.render = function(){ Class.prototype.render = function(){
var that = this; var that = this;
@ -88,7 +88,7 @@ layui.define(['jquery', 'lay'], function(exports){
options.elem = $(options.elem); options.elem = $(options.elem);
if(!options.elem[0]) return; if(!options.elem[0]) return;
that.elemItem = options.elem.find(ELEM_ITEM); that.elemItem = options.elem.find(ELEM_ITEM);
if(options.index < 0) options.index = 0; if(options.index < 0) options.index = 0;
if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1; if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1;
if(options.interval < 800) options.interval = 800; if(options.interval < 800) options.interval = 800;
@ -107,9 +107,9 @@ layui.define(['jquery', 'lay'], function(exports){
height: options.height height: options.height
}); });
} }
options.elem.attr('lay-anim', options.anim); options.elem.attr('lay-anim', options.anim);
// 初始焦点状态 // 初始焦点状态
that.elemItem.eq(options.index).addClass(THIS); that.elemItem.eq(options.index).addClass(THIS);
@ -122,7 +122,7 @@ layui.define(['jquery', 'lay'], function(exports){
that.events(); that.events();
} }
}; };
// 重置轮播 // 重置轮播
Class.prototype.reload = function(options){ Class.prototype.reload = function(options){
var that = this; var that = this;
@ -130,7 +130,7 @@ layui.define(['jquery', 'lay'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
that.render(); that.render();
}; };
// 获取上一个等待条目的索引 // 获取上一个等待条目的索引
Class.prototype.prevIndex = function(){ Class.prototype.prevIndex = function(){
var that = this; var that = this;
@ -143,7 +143,7 @@ layui.define(['jquery', 'lay'], function(exports){
return prevIndex; return prevIndex;
}; };
// 获取下一个等待条目的索引 // 获取下一个等待条目的索引
Class.prototype.nextIndex = function(){ Class.prototype.nextIndex = function(){
var that = this; var that = this;
@ -156,72 +156,72 @@ layui.define(['jquery', 'lay'], function(exports){
return nextIndex; return nextIndex;
}; };
// 索引递增 // 索引递增
Class.prototype.addIndex = function(num){ Class.prototype.addIndex = function(num){
var that = this; var that = this;
var options = that.config; var options = that.config;
num = num || 1; num = num || 1;
options.index = options.index + num; options.index = options.index + num;
// index 不能超过轮播总数量 // index 不能超过轮播总数量
if(options.index >= that.elemItem.length){ if(options.index >= that.elemItem.length){
options.index = 0; options.index = 0;
} }
}; };
// 索引递减 // 索引递减
Class.prototype.subIndex = function(num){ Class.prototype.subIndex = function(num){
var that = this; var that = this;
var options = that.config; var options = that.config;
num = num || 1; num = num || 1;
options.index = options.index - num; options.index = options.index - num;
// index 不能超过轮播总数量 // index 不能超过轮播总数量
if(options.index < 0){ if(options.index < 0){
options.index = that.elemItem.length - 1; options.index = that.elemItem.length - 1;
} }
}; };
// 自动轮播 // 自动轮播
Class.prototype.autoplay = function(){ Class.prototype.autoplay = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
var itemsCount = that.elemItem.length; var itemsCount = that.elemItem.length;
if(!options.autoplay) return; if(!options.autoplay) return;
clearInterval(that.timer); clearInterval(that.timer);
if (itemsCount > 1) { if (itemsCount > 1) {
that.timer = setInterval(function(){ that.timer = setInterval(function(){
that.slide(); that.slide();
}, options.interval); }, options.interval);
} }
}; };
// 箭头 // 箭头
Class.prototype.arrow = function(){ Class.prototype.arrow = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
var itemsCount = that.elemItem.length; var itemsCount = that.elemItem.length;
// 模板 // 模板
var tplArrow = $([ var tplArrow = $([
'<button type="button" class="layui-icon '+ (options.anim === 'updown' ? 'layui-icon-up' : 'layui-icon-left') + ' ' + ELEM_ARROW +'" lay-type="sub"></button>', '<button type="button" class="layui-icon '+ (options.anim === 'updown' ? 'layui-icon-up' : 'layui-icon-left') + ' ' + ELEM_ARROW +'" lay-type="sub"></button>',
'<button type="button" class="layui-icon '+ (options.anim === 'updown' ? 'layui-icon-down' : 'layui-icon-right') + ' ' + ELEM_ARROW +'" lay-type="add"></button>' '<button type="button" class="layui-icon '+ (options.anim === 'updown' ? 'layui-icon-down' : 'layui-icon-right') + ' ' + ELEM_ARROW +'" lay-type="add"></button>'
].join('')); ].join(''));
// 预设基础属性 // 预设基础属性
options.elem.attr('lay-arrow', options.arrow); options.elem.attr('lay-arrow', options.arrow);
// 避免重复插入 // 避免重复插入
if(options.elem.find('.'+ELEM_ARROW)[0]){ if(options.elem.find('.'+ELEM_ARROW)[0]){
options.elem.find('.'+ELEM_ARROW).remove(); options.elem.find('.'+ELEM_ARROW).remove();
} }
itemsCount > 1 ? options.elem.append(tplArrow) : tplArrow.remove(); itemsCount > 1 ? options.elem.append(tplArrow) : tplArrow.remove();
// 事件 // 事件
tplArrow.on('click', function(){ tplArrow.on('click', function(){
var othis = $(this); var othis = $(this);
@ -241,13 +241,13 @@ layui.define(['jquery', 'lay'], function(exports){
that.slide('sub', options.index - index); that.slide('sub', options.index - index);
} }
} }
// 指示器 // 指示器
Class.prototype.indicator = function(){ Class.prototype.indicator = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
var itemsCount = that.elemItem.length; var itemsCount = that.elemItem.length;
// 模板 // 模板
var tplInd = that.elemInd = $(['<div class="'+ ELEM_IND +'"><ul>', var tplInd = that.elemInd = $(['<div class="'+ ELEM_IND +'"><ul>',
function(){ function(){
@ -258,27 +258,27 @@ layui.define(['jquery', 'lay'], function(exports){
return li.join(''); return li.join('');
}(), }(),
'</ul></div>'].join('')); '</ul></div>'].join(''));
// 预设基础属性 // 预设基础属性
options.elem.attr('lay-indicator', options.indicator); options.elem.attr('lay-indicator', options.indicator);
// 避免重复插入 // 避免重复插入
if(options.elem.find('.'+ELEM_IND)[0]){ if(options.elem.find('.'+ELEM_IND)[0]){
options.elem.find('.'+ELEM_IND).remove(); options.elem.find('.'+ELEM_IND).remove();
} }
itemsCount > 1 ? options.elem.append(tplInd) : tplInd.remove(); itemsCount > 1 ? options.elem.append(tplInd) : tplInd.remove();
if(options.anim === 'updown'){ if(options.anim === 'updown'){
tplInd.css('margin-top', -(tplInd.height()/2)); tplInd.css('margin-top', -(tplInd.height()/2));
} }
// 事件 // 事件
tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){ tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){
that.goto($(this).index()); that.goto($(this).index());
}); });
}; };
// 滑动切换 // 滑动切换
Class.prototype.slide = function(type, num){ Class.prototype.slide = function(type, num){
var that = this; var that = this;
@ -287,9 +287,9 @@ layui.define(['jquery', 'lay'], function(exports){
var options = that.config; var options = that.config;
var thisIndex = options.index; var thisIndex = options.index;
var filter = options.elem.attr('lay-filter'); var filter = options.elem.attr('lay-filter');
if (that.haveSlide || itemsCount <= 1) return; if (that.haveSlide || itemsCount <= 1) return;
// 滑动方向 // 滑动方向
if(type === 'sub'){ if(type === 'sub'){
that.subIndex(num); that.subIndex(num);
@ -304,41 +304,41 @@ layui.define(['jquery', 'lay'], function(exports){
setTimeout(function(){ setTimeout(function(){
elemItem.eq(thisIndex).addClass(ELEM_LEFT); elemItem.eq(thisIndex).addClass(ELEM_LEFT);
elemItem.eq(options.index).addClass(ELEM_LEFT); elemItem.eq(options.index).addClass(ELEM_LEFT);
}, 50); }, 50);
} }
// 移除过渡类 // 移除过渡类
setTimeout(function(){ setTimeout(function(){
elemItem.removeClass(THIS + ' ' + ELEM_PREV + ' ' + ELEM_NEXT + ' ' + ELEM_LEFT + ' ' + ELEM_RIGHT); elemItem.removeClass(THIS + ' ' + ELEM_PREV + ' ' + ELEM_NEXT + ' ' + ELEM_LEFT + ' ' + ELEM_RIGHT);
elemItem.eq(options.index).addClass(THIS); elemItem.eq(options.index).addClass(THIS);
that.haveSlide = false; // 解锁 that.haveSlide = false; // 解锁
}, 350); }, 350);
// 指示器焦点 // 指示器焦点
that.elemInd.find('li').eq(options.index).addClass(THIS) that.elemInd.find('li').eq(options.index).addClass(THIS)
.siblings().removeClass(THIS); .siblings().removeClass(THIS);
that.haveSlide = true; that.haveSlide = true;
// 回调返回的参数 // 回调返回的参数
var params = { var params = {
index: options.index, index: options.index,
prevIndex: thisIndex, prevIndex: thisIndex,
item: elemItem.eq(options.index) item: elemItem.eq(options.index)
}; };
typeof options.change === 'function' && options.change(params); typeof options.change === 'function' && options.change(params);
layui.event.call(this, MOD_NAME, 'change('+ filter +')', params); layui.event.call(this, MOD_NAME, 'change('+ filter +')', params);
}; };
// 事件处理 // 事件处理
Class.prototype.events = function(){ Class.prototype.events = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
if(options.elem.data('haveEvents')) return; if(options.elem.data('haveEvents')) return;
// 移入移出容器 // 移入移出容器
options.elem.on('mouseenter touchstart', function(){ options.elem.on('mouseenter touchstart', function(){
if (that.config.autoplay === 'always') return; if (that.config.autoplay === 'always') return;
@ -361,16 +361,16 @@ layui.define(['jquery', 'lay'], function(exports){
} }
} }
}) })
options.elem.data('haveEvents', true); options.elem.data('haveEvents', true);
}; };
// 核心入口 // 核心入口
carousel.render = function(options){ carousel.render = function(options){
return new Class(options); return new Class(options);
}; };
exports(MOD_NAME, carousel); exports(MOD_NAME, carousel);
}); });

172
src/modules/colorpicker.js
View File

@ -1,11 +1,11 @@
/** /**
* colorpicker * colorpicker
* 颜色选择组件 * 颜色选择组件
*/ */
layui.define(['jquery', 'lay'], function(exports){ layui.define(['jquery', 'lay'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var lay = layui.lay; var lay = layui.lay;
var hint = layui.hint(); var hint = layui.hint();
@ -23,13 +23,13 @@ layui.define(['jquery', 'lay'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
} }
//事件 //事件
,on: function(events, callback){ ,on: function(events, callback){
return layui.onevent.call(this, 'colorpicker', events, callback); return layui.onevent.call(this, 'colorpicker', events, callback);
} }
}; };
// 操作当前实例 // 操作当前实例
var thisModule = function(){ var thisModule = function(){
var that = this; var that = this;
@ -45,7 +45,7 @@ layui.define(['jquery', 'lay'], function(exports){
//字符常量 //字符常量
,MOD_NAME = 'colorpicker', SHOW = 'layui-show', THIS = 'layui-this', ELEM = 'layui-colorpicker' ,MOD_NAME = 'colorpicker', SHOW = 'layui-show', THIS = 'layui-this', ELEM = 'layui-colorpicker'
,ELEM_MAIN = '.layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close' ,ELEM_MAIN = '.layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close'
,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'layui-colorpicker-side', PICKER_SIDE_SLIDER = 'layui-colorpicker-side-slider' ,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'layui-colorpicker-side', PICKER_SIDE_SLIDER = 'layui-colorpicker-side-slider'
,PICKER_BASIS = 'layui-colorpicker-basis', PICKER_ALPHA_BG = 'layui-colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'layui-colorpicker-alpha-slider', PICKER_BASIS_CUR = 'layui-colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input' ,PICKER_BASIS = 'layui-colorpicker-basis', PICKER_ALPHA_BG = 'layui-colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'layui-colorpicker-alpha-slider', PICKER_BASIS_CUR = 'layui-colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
@ -78,7 +78,7 @@ layui.define(['jquery', 'lay'], function(exports){
} }
hsb.s *= 100/255; hsb.s *= 100/255;
hsb.b *= 100/255; hsb.b *= 100/255;
return hsb; return hsb;
} }
//HEX转HSB //HEX转HSB
@ -139,10 +139,10 @@ layui.define(['jquery', 'lay'], function(exports){
var re = rgbs.match(regexp) || []; var re = rgbs.match(regexp) || [];
return {r:re[0], g:re[1], b:re[2]}; return {r:re[0], g:re[1], b:re[2]};
} }
,$win = $(window) ,$win = $(window)
,$doc = $(document) ,$doc = $(document)
//构造器 //构造器
,Class = function(options){ ,Class = function(options){
var that = this; var that = this;
@ -182,7 +182,7 @@ layui.define(['jquery', 'lay'], function(exports){
// 合并 lay-options 属性上的配置信息 // 合并 lay-options 属性上的配置信息
$.extend(options, lay.options(elem[0])); $.extend(options, lay.options(elem[0]));
//颜色选择框对象 //颜色选择框对象
var elemColorBox = $(['<div class="layui-unselect layui-colorpicker">' var elemColorBox = $(['<div class="layui-unselect layui-colorpicker">'
,'<span '+ (options.format == 'rgb' && options.alpha ,'<span '+ (options.format == 'rgb' && options.alpha
@ -194,20 +194,20 @@ layui.define(['jquery', 'lay'], function(exports){
var bgstr = ''; var bgstr = '';
if(options.color){ if(options.color){
bgstr = options.color; bgstr = options.color;
if((options.color.match(/[0-9]{1,3}/g) || []).length > 3){ //需要优化 if((options.color.match(/[0-9]{1,3}/g) || []).length > 3){ //需要优化
if(!(options.alpha && options.format == 'rgb')){ if(!(options.alpha && options.format == 'rgb')){
bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(options.color))) bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(options.color)))
} }
} }
return 'background: '+ bgstr; return 'background: '+ bgstr;
} }
return bgstr; return bgstr;
}() +'">' }() +'">'
,'<i class="layui-icon layui-colorpicker-trigger-i '+ (options.color ,'<i class="layui-icon layui-colorpicker-trigger-i '+ (options.color
? ICON_PICKER_DOWN ? ICON_PICKER_DOWN
: ICON_PICKER_CLOSE) +'"></i>' : ICON_PICKER_CLOSE) +'"></i>'
,'</span>' ,'</span>'
,'</span>' ,'</span>'
@ -216,7 +216,7 @@ layui.define(['jquery', 'lay'], function(exports){
//初始化颜色选择框 //初始化颜色选择框
elem = options.elem = $(options.elem); elem = options.elem = $(options.elem);
options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸 options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
// 插入颜色选择框 // 插入颜色选择框
elem.addClass('layui-inline').html( elem.addClass('layui-inline').html(
that.elemColorBox = elemColorBox that.elemColorBox = elemColorBox
@ -226,10 +226,10 @@ layui.define(['jquery', 'lay'], function(exports){
options.id = 'id' in options ? options.id : ( options.id = 'id' in options ? options.id : (
elem.attr('id') || that.index elem.attr('id') || that.index
); );
// 获取背景色值 // 获取背景色值
that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background; that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;
// 相关事件 // 相关事件
that.events(); that.events();
}; };
@ -239,7 +239,7 @@ layui.define(['jquery', 'lay'], function(exports){
var that = this var that = this
,options = that.config ,options = that.config
,elemColorBox = that.elemColorBox[0] ,elemColorBox = that.elemColorBox[0]
//颜色选择器对象 //颜色选择器对象
,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-downbit layui-colorpicker-main">' ,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-downbit layui-colorpicker-main">'
//颜色面板 //颜色面板
@ -253,21 +253,21 @@ layui.define(['jquery', 'lay'], function(exports){
,'<div class="layui-colorpicker-side-slider"></div>' ,'<div class="layui-colorpicker-side-slider"></div>'
,'</div>' ,'</div>'
,'</div>' ,'</div>'
//透明度条块 //透明度条块
,'<div class="layui-colorpicker-main-alpha '+ (options.alpha ? SHOW : '') +'">' ,'<div class="layui-colorpicker-main-alpha '+ (options.alpha ? SHOW : '') +'">'
,'<div class="layui-colorpicker-alpha-bgcolor">' ,'<div class="layui-colorpicker-alpha-bgcolor">'
,'<div class="layui-colorpicker-alpha-slider"></div>' ,'<div class="layui-colorpicker-alpha-slider"></div>'
,'</div>' ,'</div>'
,'</div>' ,'</div>'
//预设颜色列表 //预设颜色列表
,function(){ ,function(){
if(options.predefine){ if(options.predefine){
var list = ['<div class="layui-colorpicker-main-pre">']; var list = ['<div class="layui-colorpicker-main-pre">'];
layui.each(options.colors, function(i, v){ layui.each(options.colors, function(i, v){
list.push(['<div class="layui-colorpicker-pre'+ ((v.match(/[0-9]{1,3}/g) || []).length > 3 list.push(['<div class="layui-colorpicker-pre'+ ((v.match(/[0-9]{1,3}/g) || []).length > 3
? ' layui-colorpicker-pre-isalpha' ? ' layui-colorpicker-pre-isalpha'
: '') +'">' : '') +'">'
,'<div style="background:'+ v +'"></div>' ,'<div style="background:'+ v +'"></div>'
,'</div>'].join('')); ,'</div>'].join(''));
@ -278,7 +278,7 @@ layui.define(['jquery', 'lay'], function(exports){
return ''; return '';
} }
}() }()
//底部表单元素区域 //底部表单元素区域
,'<div class="layui-colorpicker-main-input">' ,'<div class="layui-colorpicker-main-input">'
,'<div class="layui-inline">' ,'<div class="layui-inline">'
@ -290,23 +290,23 @@ layui.define(['jquery', 'lay'], function(exports){
,'</div' ,'</div'
,'</div>' ,'</div>'
,'</div>'].join('')) ,'</div>'].join(''))
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)[0]; ,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)[0];
//如果当前点击的颜色盒子已经存在选择器，则关闭 //如果当前点击的颜色盒子已经存在选择器，则关闭
if($(ELEM_MAIN)[0] && $(ELEM_MAIN).data('index') == that.index){ if($(ELEM_MAIN)[0] && $(ELEM_MAIN).data('index') == that.index){
that.removePicker(Class.thisElemInd); that.removePicker(Class.thisElemInd);
} else { //插入颜色选择器 } else { //插入颜色选择器
that.removePicker(Class.thisElemInd); that.removePicker(Class.thisElemInd);
$('body').append(elemPicker); $('body').append(elemPicker);
} }
// 记录当前执行的实例索引 // 记录当前执行的实例索引
colorpicker.thisId = options.id; colorpicker.thisId = options.id;
Class.thisElemInd = that.index; //记录最新打开的选择器索引 Class.thisElemInd = that.index; //记录最新打开的选择器索引
Class.thisColor = elemColorBox.style.background //记录最新打开的选择器颜色选中值 Class.thisColor = elemColorBox.style.background //记录最新打开的选择器颜色选中值
that.position(); that.position();
that.pickerEvents(); that.pickerEvents();
}; };
@ -327,7 +327,7 @@ layui.define(['jquery', 'lay'], function(exports){
return that; return that;
}; };
//定位算法 //定位算法
Class.prototype.position = function(){ Class.prototype.position = function(){
var that = this var that = this
@ -343,7 +343,7 @@ layui.define(['jquery', 'lay'], function(exports){
Class.prototype.val = function(){ Class.prototype.val = function(){
var that = this var that = this
,options = that.config ,options = that.config
,elemColorBox = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) ,elemColorBox = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT) ,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT)
,e = elemColorBox[0] ,e = elemColorBox[0]
@ -351,20 +351,20 @@ layui.define(['jquery', 'lay'], function(exports){
//判断是否有背景颜色 //判断是否有背景颜色
if(bgcolor){ if(bgcolor){
//转化成hsb格式 //转化成hsb格式
var hsb = RGBToHSB(RGBSTo(bgcolor)) var hsb = RGBToHSB(RGBSTo(bgcolor))
,type = elemColorBox.attr('lay-type'); ,type = elemColorBox.attr('lay-type');
//同步滑块的位置及颜色选择器的选择 //同步滑块的位置及颜色选择器的选择
that.select(hsb.h, hsb.s, hsb.b); that.select(hsb.h, hsb.s, hsb.b);
// 若格式要求为rgb // 若格式要求为rgb
if(type === 'torgb'){ if(type === 'torgb'){
elemPickerInput.find('input').val(bgcolor); elemPickerInput.find('input').val(bgcolor);
} else if(type === 'rgba'){ // 若格式要求为 rgba } else if(type === 'rgba'){ // 若格式要求为 rgba
var rgb = RGBSTo(bgcolor); var rgb = RGBSTo(bgcolor);
// 若开启透明度而没有设置，则给默认值 // 若开启透明度而没有设置，则给默认值
if((bgcolor.match(/[0-9]{1,3}/g) || []).length === 3){ if((bgcolor.match(/[0-9]{1,3}/g) || []).length === 3){
elemPickerInput.find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)'); elemPickerInput.find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
@ -374,9 +374,9 @@ layui.define(['jquery', 'lay'], function(exports){
var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280; var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280;
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", left); that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", left);
} }
// 设置 span 背景色 // 设置 span 背景色
that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))'; that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))';
} else { } else {
elemPickerInput.find('input').val('#'+ HSBToHEX(hsb)); elemPickerInput.find('input').val('#'+ HSBToHEX(hsb));
} }
@ -393,7 +393,7 @@ layui.define(['jquery', 'lay'], function(exports){
Class.prototype.side = function(){ Class.prototype.side = function(){
var that = this var that = this
,options = that.config ,options = that.config
,span = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) ,span = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
,type = span.attr('lay-type') ,type = span.attr('lay-type')
@ -403,12 +403,12 @@ layui.define(['jquery', 'lay'], function(exports){
,choose = that.elemPicker.find('.' + PICKER_BASIS_CUR) ,choose = that.elemPicker.find('.' + PICKER_BASIS_CUR)
,alphacolor = that.elemPicker.find('.' + PICKER_ALPHA_BG) ,alphacolor = that.elemPicker.find('.' + PICKER_ALPHA_BG)
,alphaslider = that.elemPicker.find('.' + PICKER_ALPHA_SLIDER) ,alphaslider = that.elemPicker.find('.' + PICKER_ALPHA_SLIDER)
,_h = slider[0].offsetTop/180*360 ,_h = slider[0].offsetTop/180*360
,_b = 100 - (choose[0].offsetTop)/180*100 ,_b = 100 - (choose[0].offsetTop)/180*100
,_s = (choose[0].offsetLeft)/260*100 ,_s = (choose[0].offsetLeft)/260*100
,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100 ,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100
,i = that.elemColorBox.find('.' + PICKER_TRIG_I) ,i = that.elemColorBox.find('.' + PICKER_TRIG_I)
,pre = that.elemPicker.find('.layui-colorpicker-pre').children('div') ,pre = that.elemPicker.find('.layui-colorpicker-pre').children('div')
@ -432,7 +432,7 @@ layui.define(['jquery', 'lay'], function(exports){
} else { } else {
elemInput.val('#'+ color); elemInput.val('#'+ color);
} }
//回调更改的颜色 //回调更改的颜色
options.change && options.change($.trim(that.elemPicker.find('.' + PICKER_INPUT).find('input').val())); options.change && options.change($.trim(that.elemPicker.find('.' + PICKER_INPUT).find('input').val()));
} }
@ -472,18 +472,18 @@ layui.define(['jquery', 'lay'], function(exports){
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
}); });
side.on('mousedown', function(e){ side.on('mousedown', function(e){
var top = e.clientY - $(this).offset().top + $win.scrollTop(); var top = e.clientY - $(this).offset().top + $win.scrollTop();
if(top < 0)top = 0; if(top < 0)top = 0;
if(top > this.offsetHeight) top = this.offsetHeight; if(top > this.offsetHeight) top = this.offsetHeight;
var h = top/180*360; var h = top/180*360;
_h = h; _h = h;
change(h, _s, _b, _a); change(h, _s, _b, _a);
e.preventDefault(); e.preventDefault();
needTrigger && slider.trigger('mousedown', e); needTrigger && slider.trigger('mousedown', e);
}); });
//中间小圆点颜色选择 //中间小圆点颜色选择
choose.on('mousedown', function(e, triggerEvent){ choose.on('mousedown', function(e, triggerEvent){
var oldtop = this.offsetTop; var oldtop = this.offsetTop;
@ -503,14 +503,14 @@ layui.define(['jquery', 'lay'], function(exports){
,b = 100 - top/180*100; ,b = 100 - top/180*100;
_b = b; _b = b;
_s = s; _s = s;
change(_h, s, b, _a); change(_h, s, b, _a);
e.preventDefault(); e.preventDefault();
}; };
needStopPropagation && layui.stope(e); needStopPropagation && layui.stope(e);
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
}); });
basis.on('mousedown', function(e){ basis.on('mousedown', function(e){
var top = e.clientY - $(this).offset().top + $win.scrollTop() var top = e.clientY - $(this).offset().top + $win.scrollTop()
,left = e.clientX - $(this).offset().left + $win.scrollLeft() ,left = e.clientX - $(this).offset().left + $win.scrollLeft()
@ -522,12 +522,12 @@ layui.define(['jquery', 'lay'], function(exports){
,b = 100 - top/180*100; ,b = 100 - top/180*100;
_b = b; _b = b;
_s = s; _s = s;
change(_h, s, b, _a); change(_h, s, b, _a);
layui.stope(e); layui.stope(e);
e.preventDefault(); e.preventDefault();
needTrigger && choose.trigger('mousedown', e); needTrigger && choose.trigger('mousedown', e);
}); });
//底部透明度选择 //底部透明度选择
alphaslider.on('mousedown', function(e, triggerEvent){ alphaslider.on('mousedown', function(e, triggerEvent){
var oldleft = this.offsetLeft; var oldleft = this.offsetLeft;
@ -539,10 +539,10 @@ layui.define(['jquery', 'lay'], function(exports){
if(left > maxw)left = maxw; if(left > maxw)left = maxw;
var a = Math.round(left /280*100) /100; var a = Math.round(left /280*100) /100;
_a = a; _a = a;
change(_h, _s, _b, a); change(_h, _s, _b, a);
e.preventDefault(); e.preventDefault();
}; };
needStopPropagation && layui.stope(e); needStopPropagation && layui.stope(e);
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
@ -553,11 +553,11 @@ layui.define(['jquery', 'lay'], function(exports){
if(left > this.offsetWidth)left = this.offsetWidth; if(left > this.offsetWidth)left = this.offsetWidth;
var a = Math.round(left /280*100) /100; var a = Math.round(left /280*100) /100;
_a = a; _a = a;
change(_h, _s, _b, a); change(_h, _s, _b, a);
e.preventDefault(); e.preventDefault();
needTrigger && alphaslider.trigger('mousedown', e); needTrigger && alphaslider.trigger('mousedown', e);
}); });
//预定义颜色选择 //预定义颜色选择
pre.each(function(){ pre.each(function(){
$(this).on('click', function(){ $(this).on('click', function(){
@ -602,9 +602,9 @@ layui.define(['jquery', 'lay'], function(exports){
var pointer = event.touches[0]; var pointer = event.touches[0];
var simulatedEvent = document.createEvent("MouseEvent"); var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(eventType, simulatedEvent.initMouseEvent(eventType,
true, true, window, 1, true, true, window, 1,
pointer.screenX, pointer.screenY,pointer.clientX, pointer.clientY, pointer.screenX, pointer.screenY,pointer.clientX, pointer.clientY,
false, false, false, false, 0, null false, false, false, false, 0, null
); );
pointer.target.dispatchEvent(simulatedEvent); pointer.target.dispatchEvent(simulatedEvent);
@ -621,51 +621,51 @@ layui.define(['jquery', 'lay'], function(exports){
var top = 180 - b/100*180; var top = 180 - b/100*180;
var left = s/100*260; var left = s/100*260;
var basisElem = that.elemPicker.find('.' + PICKER_BASIS)[0]; var basisElem = that.elemPicker.find('.' + PICKER_BASIS)[0];
that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); //滑块的top that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); //滑块的top
basisElem.style.background = '#' + hex; //颜色选择器的背景 basisElem.style.background = '#' + hex; //颜色选择器的背景
//选择器的top left //选择器的top left
that.elemPicker.find('.' + PICKER_BASIS_CUR).css({ that.elemPicker.find('.' + PICKER_BASIS_CUR).css({
"top": top / basisElem.offsetHeight * 100 + '%', "top": top / basisElem.offsetHeight * 100 + '%',
"left": left / basisElem.offsetWidth * 100 + '%' "left": left / basisElem.offsetWidth * 100 + '%'
}); });
// if(type === 'change') return; // if(type === 'change') return;
// 选中的颜色 // 选中的颜色
// that.elemPicker.find('.' + PICKER_INPUT).find('input').val('#'+ color); // that.elemPicker.find('.' + PICKER_INPUT).find('input').val('#'+ color);
}; };
Class.prototype.pickerEvents = function(){ Class.prototype.pickerEvents = function(){
var that = this var that = this
,options = that.config ,options = that.config
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) //颜色盒子 ,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) //颜色盒子
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT + ' input') //颜色选择器表单 ,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT + ' input') //颜色选择器表单
,pickerEvents = { ,pickerEvents = {
//清空 //清空
clear: function(othis){ clear: function(othis){
elemColorBoxSpan[0].style.background =''; elemColorBoxSpan[0].style.background ='';
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE); that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
that.color = ''; that.color = '';
options.done && options.done(''); options.done && options.done('');
that.removePicker(); that.removePicker();
} }
//确认 //确认
,confirm: function(othis, change){ ,confirm: function(othis, change){
var value = $.trim(elemPickerInput.val()) var value = $.trim(elemPickerInput.val())
,colorValue ,colorValue
,hsb; ,hsb;
if(value.indexOf(',') > -1){ if(value.indexOf(',') > -1){
hsb = RGBToHSB(RGBSTo(value)); hsb = RGBToHSB(RGBSTo(value));
that.select(hsb.h, hsb.s, hsb.b); that.select(hsb.h, hsb.s, hsb.b);
elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb)); elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
if((value.match(/[0-9]{1,3}/g) || []).length > 3 && elemColorBoxSpan.attr('lay-type') === 'rgba'){ if((value.match(/[0-9]{1,3}/g) || []).length > 3 && elemColorBoxSpan.attr('lay-type') === 'rgba'){
var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280; var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
that.elemPicker.find('.' + PICKER_ALPHA_SLIDER).css("left", left); that.elemPicker.find('.' + PICKER_ALPHA_SLIDER).css("left", left);
@ -674,29 +674,29 @@ layui.define(['jquery', 'lay'], function(exports){
} }
} else { } else {
hsb = HEXToHSB(value); hsb = HEXToHSB(value);
elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb)); elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN); that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
} }
if(change === 'change'){ if(change === 'change'){
that.select(hsb.h, hsb.s, hsb.b, change); that.select(hsb.h, hsb.s, hsb.b, change);
options.change && options.change(colorValue); options.change && options.change(colorValue);
return; return;
} }
that.color = value; that.color = value;
options.done && options.done(value); options.done && options.done(value);
that.removePicker(); that.removePicker();
} }
}; };
//选择器面板点击事件 //选择器面板点击事件
that.elemPicker.on('click', '*[colorpicker-events]', function(){ that.elemPicker.on('click', '*[colorpicker-events]', function(){
var othis = $(this) var othis = $(this)
,attrEvent = othis.attr('colorpicker-events'); ,attrEvent = othis.attr('colorpicker-events');
pickerEvents[attrEvent] && pickerEvents[attrEvent].call(this, othis); pickerEvents[attrEvent] && pickerEvents[attrEvent].call(this, othis);
}); });
//输入框事件 //输入框事件
elemPickerInput.on('keyup', function(e){ elemPickerInput.on('keyup', function(e){
var othis = $(this); var othis = $(this);
@ -731,25 +731,25 @@ layui.define(['jquery', 'lay'], function(exports){
var elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN); var elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN);
//如果点击的元素是颜色框 //如果点击的元素是颜色框
if($(e.target).hasClass(ELEM) if($(e.target).hasClass(ELEM)
|| $(e.target).parents('.'+ELEM)[0] || $(e.target).parents('.'+ELEM)[0]
) return; ) return;
//如果点击的元素是选择器 //如果点击的元素是选择器
if($(e.target).hasClass(ELEM_MAIN.replace(/\./g, '')) if($(e.target).hasClass(ELEM_MAIN.replace(/\./g, ''))
|| $(e.target).parents(ELEM_MAIN)[0] || $(e.target).parents(ELEM_MAIN)[0]
) return; ) return;
if(!that.elemPicker) return; if(!that.elemPicker) return;
if(that.color){ if(that.color){
var hsb = RGBToHSB(RGBSTo(that.color)); var hsb = RGBToHSB(RGBSTo(that.color));
that.select(hsb.h, hsb.s, hsb.b); that.select(hsb.h, hsb.s, hsb.b);
} else { } else {
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE); that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
} }
elemColorBoxSpan[0].style.background = that.color || ''; elemColorBoxSpan[0].style.background = that.color || '';
// 取消选择的回调 // 取消选择的回调
typeof options.cancel === 'function' && options.cancel(that.color); typeof options.cancel === 'function' && options.cancel(that.color);
@ -772,19 +772,19 @@ layui.define(['jquery', 'lay'], function(exports){
// 记录所有实例 // 记录所有实例
thisModule.that = {}; // 记录所有实例对象 thisModule.that = {}; // 记录所有实例对象
// 获取当前实例对象 // 获取当前实例对象
thisModule.getThis = function(id){ thisModule.getThis = function(id){
var that = thisModule.that[id]; var that = thisModule.that[id];
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required'); if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required');
return that; return that;
}; };
//核心入口 //核心入口
colorpicker.render = function(options){ colorpicker.render = function(options){
var inst = new Class(options); var inst = new Class(options);
return thisModule.call(inst); return thisModule.call(inst);
}; };
exports(MOD_NAME, colorpicker); exports(MOD_NAME, colorpicker);
}); });

120
src/modules/dropdown.js
View File

@ -1,18 +1,18 @@
/** /**
* dropdown * dropdown
* 下拉菜单组件 * 下拉菜单组件
*/ */
layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var laytpl = layui.laytpl; var laytpl = layui.laytpl;
var util = layui.util; var util = layui.util;
var hint = layui.hint(); var hint = layui.hint();
var device = layui.device(); var device = layui.device();
var clickOrMousedown = (device.mobile ? 'touchstart' : 'mousedown'); var clickOrMousedown = (device.mobile ? 'touchstart' : 'mousedown');
// 模块名 // 模块名
var MOD_NAME = 'dropdown'; var MOD_NAME = 'dropdown';
var MOD_INDEX = 'layui_'+ MOD_NAME +'_index'; // 模块索引名 var MOD_INDEX = 'layui_'+ MOD_NAME +'_index'; // 模块索引名
@ -36,7 +36,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
}, },
// 事件 // 事件
on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
@ -83,7 +83,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var STR_MENU_PANEL = 'layui-menu-body-panel'; var STR_MENU_PANEL = 'layui-menu-body-panel';
var STR_MENU_PANEL_L = 'layui-menu-body-panel-left'; var STR_MENU_PANEL_L = 'layui-menu-body-panel-left';
var STR_ELEM_SHADE = 'layui-dropdown-shade'; var STR_ELEM_SHADE = 'layui-dropdown-shade';
var STR_GROUP_TITLE = '.'+ STR_ITEM_GROUP + '>.'+ STR_MENU_TITLE; var STR_GROUP_TITLE = '.'+ STR_ITEM_GROUP + '>.'+ STR_MENU_TITLE;
// 构造器 // 构造器
@ -109,7 +109,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
accordion: false, // 手风琴效果，仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。 accordion: false, // 手风琴效果，仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
closeOnClick: true // 面板打开后，再次点击目标元素时是否关闭面板。行为取决于所使用的触发事件类型 closeOnClick: true // 面板打开后，再次点击目标元素时是否关闭面板。行为取决于所使用的触发事件类型
}; };
// 重载实例 // 重载实例
Class.prototype.reload = function(options, type){ Class.prototype.reload = function(options, type){
var that = this; var that = this;
@ -121,7 +121,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
Class.prototype.init = function(rerender, type){ Class.prototype.init = function(rerender, type){
var that = this; var that = this;
var options = that.config; var options = that.config;
// 若 elem 非唯一 // 若 elem 非唯一
var elem = $(options.elem); var elem = $(options.elem);
if(elem.length > 1){ if(elem.length > 1){
@ -145,7 +145,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
options.elem = $(options.elem); options.elem = $(options.elem);
options.target = $('body'); // 后续考虑开放 target 元素 options.target = $('body'); // 后续考虑开放 target 元素
// 初始化 id 属性 - 优先取 options > 元素 id > 自增索引 // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
options.id = 'id' in options ? options.id : ( options.id = 'id' in options ? options.id : (
elem.attr('id') || that.index elem.attr('id') || that.index
@ -168,13 +168,13 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
// 事件 // 事件
that.events(); that.events();
}; };
// 渲染 // 渲染
Class.prototype.render = function(type) { Class.prototype.render = function(type) {
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName; var customName = options.customName;
// 默认菜单内容 // 默认菜单内容
var getDefaultView = function(){ var getDefaultView = function(){
var elemUl = $('<ul class="layui-menu layui-dropdown-menu"></ul>'); var elemUl = $('<ul class="layui-menu layui-dropdown-menu"></ul>');
@ -185,7 +185,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
} }
return elemUl; return elemUl;
}; };
// 遍历菜单项 // 遍历菜单项
var eachItemView = function(views, data){ var eachItemView = function(views, data){
// var views = []; // var views = [];
@ -197,13 +197,13 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var title = function(title){ var title = function(title){
var templet = item.templet || options.templet; var templet = item.templet || options.templet;
if(templet){ if(templet){
title = typeof templet === 'function' title = typeof templet === 'function'
? templet(item) ? templet(item)
: laytpl(templet).render(item); : laytpl(templet).render(item);
} }
return title; return title;
}(util.escape(item[customName.title])); }(util.escape(item[customName.title]));
// 初始类型 // 初始类型
var type = function(){ var type = function(){
if(isChild){ if(isChild){
@ -220,7 +220,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
}(); }();
if(type !== '-' && (!item[customName.title] && !item[customName.id] && !isChild)) return; if(type !== '-' && (!item[customName.title] && !item[customName.id] && !isChild)) return;
//列表元素 //列表元素
var viewLi = $(['<li'+ function(){ var viewLi = $(['<li'+ function(){
var className = { var className = {
@ -237,14 +237,14 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
} }
return item.disabled ? ' class="'+ STR_DISABLED +'"' : ''; return item.disabled ? ' class="'+ STR_DISABLED +'"' : '';
}() +'>' }() +'>'
//标题区 //标题区
,function(){ ,function(){
//是否超文本 //是否超文本
var viewText = ('href' in item) ? ( var viewText = ('href' in item) ? (
'<a href="'+ item.href +'" target="'+ (item.target || '_self') +'">'+ title +'</a>' '<a href="'+ item.href +'" target="'+ (item.target || '_self') +'">'+ title +'</a>'
) : title; ) : title;
//是否存在子级 //是否存在子级
if(isChild){ if(isChild){
return '<div class="'+ STR_MENU_TITLE +'">'+ viewText + function(){ return '<div class="'+ STR_MENU_TITLE +'">'+ viewText + function(){
@ -256,14 +256,14 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
return ''; return '';
} }
}() +'</div>' }() +'</div>'
} }
return '<div class="'+ STR_MENU_TITLE +'">'+ viewText +'</div>'; return '<div class="'+ STR_MENU_TITLE +'">'+ viewText +'</div>';
}() }()
,'</li>'].join('')); ,'</li>'].join(''));
viewLi.data('item', item); viewLi.data('item', item);
//子级区 //子级区
if(isChild){ if(isChild){
var elemPanel = $('<div class="layui-panel layui-menu-body-panel"></div>'); var elemPanel = $('<div class="layui-panel layui-menu-body-panel"></div>');
@ -281,7 +281,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
}); });
return views; return views;
}; };
// 主模板 // 主模板
var TPL_MAIN = [ var TPL_MAIN = [
'<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit" ' + MOD_ID + '="' + options.id + '">', '<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit" ' + MOD_ID + '="' + options.id + '">',
@ -337,24 +337,24 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var isClickAllScope = options.clickScope === 'all'; // 是否所有父子菜单均触发点击事件 var isClickAllScope = options.clickScope === 'all'; // 是否所有父子菜单均触发点击事件
if(data.disabled) return; // 菜单项禁用状态 if(data.disabled) return; // 菜单项禁用状态
// 普通菜单项点击后的回调及关闭面板 // 普通菜单项点击后的回调及关闭面板
if((!isChild || isClickAllScope) && data.type !== '-'){ if((!isChild || isClickAllScope) && data.type !== '-'){
var ret = typeof options.click === 'function' var ret = typeof options.click === 'function'
? options.click(data, othis, e) ? options.click(data, othis, e)
: null; : null;
ret === false || (isChild || that.remove()); ret === false || (isChild || that.remove());
layui.stope(e); layui.stope(e);
} }
}); });
// 触发菜单组展开收缩 // 触发菜单组展开收缩
mainElem.find(STR_GROUP_TITLE).on('click', function(e){ mainElem.find(STR_GROUP_TITLE).on('click', function(e){
var othis = $(this); var othis = $(this);
var elemGroup = othis.parent(); var elemGroup = othis.parent();
var data = elemGroup.data('item') || {}; var data = elemGroup.data('item') || {};
if(data.type === 'group' && options.isAllowSpread){ if(data.type === 'group' && options.isAllowSpread){
thisModule.spread(elemGroup, options.accordion); thisModule.spread(elemGroup, options.accordion);
} }
@ -363,12 +363,12 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
// 组件打开完毕的事件 // 组件打开完毕的事件
typeof options.ready === 'function' && options.ready(mainElem, options.elem); typeof options.ready === 'function' && options.ready(mainElem, options.elem);
}; };
// 位置定位 // 位置定位
Class.prototype.position = function(obj){ Class.prototype.position = function(obj){
var that = this; var that = this;
var options = that.config; var options = that.config;
lay.position(options.elem[0], that.mainElem[0], { lay.position(options.elem[0], that.mainElem[0], {
position: options.position, position: options.position,
e: that.e, e: that.e,
@ -376,7 +376,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
align: options.align || null align: options.align || null
}); });
}; };
// 移除面板 // 移除面板
Class.prototype.remove = function(id) { Class.prototype.remove = function(id) {
id = id || this.config.id; id = id || this.config.id;
@ -400,13 +400,13 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var that = this; var that = this;
var options = that.config; var options = that.config;
var delay = [].concat(options.delay); var delay = [].concat(options.delay);
return { return {
show: delay[0], show: delay[0],
hide: delay[1] !== undefined ? delay[1] : delay[0] hide: delay[1] !== undefined ? delay[1] : delay[0]
} }
} }
// 延迟移除面板 // 延迟移除面板
Class.prototype.delayRemove = function(){ Class.prototype.delayRemove = function(){
var that = this; var that = this;
@ -417,7 +417,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
that.remove(); that.remove();
}, that.normalizedDelay().hide); }, that.normalizedDelay().hide);
}; };
// 事件 // 事件
Class.prototype.events = function(){ Class.prototype.events = function(){
var that = this; var that = this;
@ -457,7 +457,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
e.preventDefault(); e.preventDefault();
}); });
// 如果是鼠标移入事件 // 如果是鼠标移入事件
if (isMouseEnter) { if (isMouseEnter) {
// 执行鼠标移出事件 // 执行鼠标移出事件
@ -466,10 +466,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
}); });
} }
}; };
// 记录所有实例 // 记录所有实例
thisModule.that = {}; // 记录所有实例对象 thisModule.that = {}; // 记录所有实例对象
// 获取当前实例对象 // 获取当前实例对象
thisModule.getThis = function(id) { thisModule.getThis = function(id) {
if (id === undefined) { if (id === undefined) {
@ -482,7 +482,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
thisModule.findMainElem = function(id) { thisModule.findMainElem = function(id) {
return $('.' + STR_ELEM + '[' + MOD_ID + '="' + id + '"]'); return $('.' + STR_ELEM + '[' + MOD_ID + '="' + id + '"]');
}; };
// 设置菜单组展开和收缩状态 // 设置菜单组展开和收缩状态
thisModule.spread = function(othis, isAccordion){ thisModule.spread = function(othis, isAccordion){
var contentElem = othis.children('ul'); var contentElem = othis.children('ul');
@ -513,43 +513,43 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
groupSibs.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP); groupSibs.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP);
} }
}; };
// 全局事件 // 全局事件
(function(){ (function(){
var _WIN = $(window); var _WIN = $(window);
var _DOC = $(document); var _DOC = $(document);
// 自适应定位 // 自适应定位
_WIN.on('resize', function(){ _WIN.on('resize', function(){
if(!dropdown.thisId) return; if(!dropdown.thisId) return;
var that = thisModule.getThis(dropdown.thisId); var that = thisModule.getThis(dropdown.thisId);
if(!that) return; if(!that) return;
if((that.mainElem && !that.mainElem[0]) || !$('.'+ STR_ELEM)[0]){ if((that.mainElem && !that.mainElem[0]) || !$('.'+ STR_ELEM)[0]){
return false; return false;
} }
var options = that.config; var options = that.config;
if(options.trigger === 'contextmenu'){ if(options.trigger === 'contextmenu'){
that.remove(); that.remove();
} else { } else {
that.position(); that.position();
} }
}); });
// 点击任意处关闭 // 点击任意处关闭
lay(_DOC).on(clickOrMousedown, function(e){ lay(_DOC).on(clickOrMousedown, function(e){
if(!dropdown.thisId) return; if(!dropdown.thisId) return;
var that = thisModule.getThis(dropdown.thisId) var that = thisModule.getThis(dropdown.thisId)
if(!that) return; if(!that) return;
var options = that.config; var options = that.config;
var isTopElem = lay.isTopElem(options.elem[0]); var isTopElem = lay.isTopElem(options.elem[0]);
var isCtxMenu = options.trigger === 'contextmenu'; var isCtxMenu = options.trigger === 'contextmenu';
// 若触发的是绑定的元素，或者属于绑定元素的子元素，则不关闭 // 若触发的是绑定的元素，或者属于绑定元素的子元素，则不关闭
// 满足条件：当前绑定的元素是 body document，或者是鼠标右键事件时，忽略绑定元素 // 满足条件：当前绑定的元素是 body document，或者是鼠标右键事件时，忽略绑定元素
var isTriggerTarget = !(isTopElem || isCtxMenu) && (options.elem[0] === e.target || options.elem.find(e.target)[0]); var isTriggerTarget = !(isTopElem || isCtxMenu) && (options.elem[0] === e.target || options.elem.find(e.target)[0]);
@ -565,10 +565,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var shouldClose = options.onClickOutside(e); var shouldClose = options.onClickOutside(e);
if(shouldClose === false) return; if(shouldClose === false) return;
} }
that.remove(); that.remove();
}, {passive: false}); }, {passive: false});
// 基础菜单的静态元素事件 // 基础菜单的静态元素事件
var ELEM_LI = '.layui-menu:not(.layui-dropdown-menu) li'; var ELEM_LI = '.layui-menu:not(.layui-dropdown-menu) li';
_DOC.on('click', ELEM_LI, function(e){ _DOC.on('click', ELEM_LI, function(e){
@ -577,7 +577,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
var isChild = othis.hasClass(STR_ITEM_GROUP) || othis.hasClass(STR_ITEM_PARENT); var isChild = othis.hasClass(STR_ITEM_GROUP) || othis.hasClass(STR_ITEM_PARENT);
var filter = parent.attr('lay-filter') || parent.attr('id'); var filter = parent.attr('lay-filter') || parent.attr('id');
var options = lay.options(this); var options = lay.options(this);
// 非触发元素 // 非触发元素
if(othis.hasClass(STR_ITEM_DIV)) return; if(othis.hasClass(STR_ITEM_DIV)) return;
@ -590,12 +590,12 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
othis.parents('.'+ STR_ITEM_PARENT).addClass(STR_ITEM_CHECKED2); // 添加父级菜单选中样式 othis.parents('.'+ STR_ITEM_PARENT).addClass(STR_ITEM_CHECKED2); // 添加父级菜单选中样式
options.title = options.title || $.trim(othis.children('.'+ STR_MENU_TITLE).text()); options.title = options.title || $.trim(othis.children('.'+ STR_MENU_TITLE).text());
// 触发事件 // 触发事件
layui.event.call(this, MOD_NAME, 'click('+ filter +')', options); layui.event.call(this, MOD_NAME, 'click('+ filter +')', options);
} }
}); });
// 基础菜单的展开收缩事件 // 基础菜单的展开收缩事件
_DOC.on('click', (ELEM_LI + STR_GROUP_TITLE), function(e){ _DOC.on('click', (ELEM_LI + STR_GROUP_TITLE), function(e){
var othis = $(this); var othis = $(this);
@ -607,7 +607,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
thisModule.spread(elemGroup, isAccordion); thisModule.spread(elemGroup, isAccordion);
} }
}); });
// 判断子级菜单是否超出屏幕 // 判断子级菜单是否超出屏幕
var ELEM_LI_PAR = '.layui-menu .'+ STR_ITEM_PARENT var ELEM_LI_PAR = '.layui-menu .'+ STR_ITEM_PARENT
_DOC.on('mouseenter', ELEM_LI_PAR, function(e){ _DOC.on('mouseenter', ELEM_LI_PAR, function(e){
@ -616,7 +616,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
if(!elemPanel[0]) return; if(!elemPanel[0]) return;
var rect = elemPanel[0].getBoundingClientRect(); var rect = elemPanel[0].getBoundingClientRect();
// 是否超出右侧屏幕 // 是否超出右侧屏幕
if(rect.right > _WIN.width()){ if(rect.right > _WIN.width()){
elemPanel.addClass(STR_MENU_PANEL_L); elemPanel.addClass(STR_MENU_PANEL_L);
@ -626,7 +626,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
elemPanel.removeClass(STR_MENU_PANEL_L); elemPanel.removeClass(STR_MENU_PANEL_L);
} }
} }
// 是否超出底部屏幕 // 是否超出底部屏幕
if(rect.bottom > _WIN.height()){ if(rect.bottom > _WIN.height()){
elemPanel.eq(0).css('margin-top', -(rect.bottom - _WIN.height() + 5)); elemPanel.eq(0).css('margin-top', -(rect.bottom - _WIN.height() + 5));
@ -634,18 +634,18 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
}).on('mouseleave', ELEM_LI_PAR, function(e){ }).on('mouseleave', ELEM_LI_PAR, function(e){
var othis = $(this) var othis = $(this)
var elemPanel = othis.children('.'+ STR_MENU_PANEL); var elemPanel = othis.children('.'+ STR_MENU_PANEL);
elemPanel.removeClass(STR_MENU_PANEL_L); elemPanel.removeClass(STR_MENU_PANEL_L);
elemPanel.css('margin-top', 0); elemPanel.css('margin-top', 0);
}); });
})(); })();
// 关闭面板 // 关闭面板
dropdown.close = function(id){ dropdown.close = function(id){
var that = thisModule.getThis(id); var that = thisModule.getThis(id);
if(!that) return this; if(!that) return this;
that.remove(); that.remove();
return thisModule.call(that); return thisModule.call(that);
}; };
@ -654,11 +654,11 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
dropdown.open = function(id){ dropdown.open = function(id){
var that = thisModule.getThis(id); var that = thisModule.getThis(id);
if(!that) return this; if(!that) return this;
that.render(); that.render();
return thisModule.call(that); return thisModule.call(that);
} }
// 重载实例 // 重载实例
dropdown.reload = function(id, options, type){ dropdown.reload = function(id, options, type){
var that = thisModule.getThis(id); var that = thisModule.getThis(id);

140
src/modules/element.js
View File

@ -2,35 +2,35 @@
* element * element
* 常用元素操作组件 * 常用元素操作组件
*/ */
layui.define('jquery', function(exports){ layui.define('jquery', function(exports){
'use strict'; 'use strict';
var $ = layui.$; var $ = layui.$;
var hint = layui.hint(); var hint = layui.hint();
var device = layui.device(); var device = layui.device();
var MOD_NAME = 'element'; var MOD_NAME = 'element';
var THIS = 'layui-this'; var THIS = 'layui-this';
var SHOW = 'layui-show'; var SHOW = 'layui-show';
var TITLE = '.layui-tab-title'; var TITLE = '.layui-tab-title';
var Element = function(){ var Element = function(){
this.config = {}; this.config = {};
}; };
// 全局设置 // 全局设置
Element.prototype.set = function(options){ Element.prototype.set = function(options){
var that = this; var that = this;
$.extend(true, that.config, options); $.extend(true, that.config, options);
return that; return that;
}; };
// 表单事件 // 表单事件
Element.prototype.on = function(events, callback){ Element.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
}; };
// 外部 Tab 新增 // 外部 Tab 新增
Element.prototype.tabAdd = function(filter, options){ Element.prototype.tabAdd = function(filter, options){
var tabElem = $('.layui-tab[lay-filter='+ filter +']'); var tabElem = $('.layui-tab[lay-filter='+ filter +']');
@ -46,7 +46,7 @@ layui.define('jquery', function(exports){
if(layAttr.length > 0) layAttr.unshift(''); //向前插，预留空格 if(layAttr.length > 0) layAttr.unshift(''); //向前插，预留空格
return layAttr.join(' '); return layAttr.join(' ');
}() +'>'+ (options.title || 'unnaming') +'</li>'; }() +'>'+ (options.title || 'unnaming') +'</li>';
barElem[0] ? barElem.before(li) : titElem.append(li); barElem[0] ? barElem.before(li) : titElem.append(li);
contElem.append('<div class="layui-tab-item" ' + (options.id ? 'lay-id="' + options.id + '"' : '') + '>'+ (options.content || '') +'</div>'); contElem.append('<div class="layui-tab-item" ' + (options.id ? 'lay-id="' + options.id + '"' : '') + '>'+ (options.content || '') +'</div>');
// call.hideTabMore(true); // call.hideTabMore(true);
@ -56,7 +56,7 @@ layui.define('jquery', function(exports){
call.tabAuto(options.change ? 'change' : null, tabElem); call.tabAuto(options.change ? 'change' : null, tabElem);
return this; return this;
}; };
/** /**
* 外部 Tab 删除 * 外部 Tab 删除
* @param {string} filter - 标签主容器 lay-filter 值 * @param {string} filter - 标签主容器 lay-filter 值
@ -74,7 +74,7 @@ layui.define('jquery', function(exports){
}); });
return this; return this;
}; };
/** /**
* 外部 Tab 切换 * 外部 Tab 切换
* @param {string} filter - 标签主容器 lay-filter 值 * @param {string} filter - 标签主容器 lay-filter 值
@ -93,7 +93,7 @@ layui.define('jquery', function(exports){
}); });
return this; return this;
}; };
// 自定义 Tab 选项卡 // 自定义 Tab 选项卡
Element.prototype.tab = function(options){ Element.prototype.tab = function(options){
options = options || {}; options = options || {};
@ -105,8 +105,8 @@ layui.define('jquery', function(exports){
}); });
}); });
}; };
// 动态改变进度条 // 动态改变进度条
Element.prototype.progress = function(filter, percent){ Element.prototype.progress = function(filter, percent){
var ELEM = 'layui-progress'; var ELEM = 'layui-progress';
@ -115,14 +115,14 @@ layui.define('jquery', function(exports){
var text = elemBar.find('.'+ ELEM +'-text'); var text = elemBar.find('.'+ ELEM +'-text');
elemBar.css('width', function(){ elemBar.css('width', function(){
return /^.+\/.+$/.test(percent) return /^.+\/.+$/.test(percent)
? (new Function('return '+ percent)() * 100) + '%' ? (new Function('return '+ percent)() * 100) + '%'
: percent; : percent;
}).attr('lay-percent', percent); }).attr('lay-percent', percent);
text.text(percent); text.text(percent);
return this; return this;
}; };
var NAV_ELEM = '.layui-nav'; var NAV_ELEM = '.layui-nav';
var NAV_ITEM = 'layui-nav-item'; var NAV_ITEM = 'layui-nav-item';
var NAV_BAR = 'layui-nav-bar'; var NAV_BAR = 'layui-nav-bar';
@ -132,7 +132,7 @@ layui.define('jquery', function(exports){
var NAV_MORE = 'layui-nav-more'; var NAV_MORE = 'layui-nav-more';
var NAV_DOWN = 'layui-icon-down'; var NAV_DOWN = 'layui-icon-down';
var NAV_ANIM = 'layui-anim layui-anim-upbit'; var NAV_ANIM = 'layui-anim layui-anim-upbit';
// 基础事件体 // 基础事件体
var call = { var call = {
// Tab 点击 // Tab 点击
@ -140,11 +140,11 @@ layui.define('jquery', function(exports){
obj = obj || {}; obj = obj || {};
var options = obj.options || {}; var options = obj.options || {};
var othis = obj.liElem || $(this); var othis = obj.liElem || $(this);
var parents = options.headerElem var parents = options.headerElem
? othis.parent() ? othis.parent()
: othis.parents('.layui-tab').eq(0); : othis.parents('.layui-tab').eq(0);
var item = options.bodyElem var item = options.bodyElem
? $(options.bodyElem) ? $(options.bodyElem)
: parents.children('.layui-tab-content').children('.layui-tab-item'); : parents.children('.layui-tab-content').children('.layui-tab-item');
var elemA = othis.find('a'); var elemA = othis.find('a');
var isJump = elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank'; // 是否存在跳转 var isJump = elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank'; // 是否存在跳转
@ -153,8 +153,8 @@ layui.define('jquery', function(exports){
var hasId = othis.attr('lay-id'); var hasId = othis.attr('lay-id');
// 下标 // 下标
var index = 'index' in obj var index = 'index' in obj
? obj.index ? obj.index
: othis.parent().children('li').index(othis); : othis.parent().children('li').index(othis);
// 若非强制切换，则根据 tabBeforeChange 事件的返回结果决定是否切换 // 若非强制切换，则根据 tabBeforeChange 事件的返回结果决定是否切换
@ -173,7 +173,7 @@ layui.define('jquery', function(exports){
}); });
if(shouldChange === false) return; if(shouldChange === false) return;
} }
// 执行切换 // 执行切换
if(!(isJump || unselect)){ if(!(isJump || unselect)){
othis.addClass(THIS).siblings().removeClass(THIS); othis.addClass(THIS).siblings().removeClass(THIS);
@ -185,14 +185,14 @@ layui.define('jquery', function(exports){
item.eq(index).addClass(SHOW).siblings().removeClass(SHOW); item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
} }
} }
layui.event.call(this, MOD_NAME, 'tab('+ filter +')', { layui.event.call(this, MOD_NAME, 'tab('+ filter +')', {
elem: parents, elem: parents,
index: index, index: index,
id: hasId id: hasId
}); });
} }
// Tab 删除 // Tab 删除
,tabDelete: function(obj){ ,tabDelete: function(obj){
obj = obj || {}; obj = obj || {};
@ -223,7 +223,7 @@ layui.define('jquery', function(exports){
call.tabClick.call(li.prev()[0], null, index - 1); call.tabClick.call(li.prev()[0], null, index - 1);
} }
} }
li.remove(); li.remove();
if(hasId){ if(hasId){
var contentElem = item.filter('[lay-id="' + hasId + '"]'); var contentElem = item.filter('[lay-id="' + hasId + '"]');
@ -235,14 +235,14 @@ layui.define('jquery', function(exports){
setTimeout(function(){ setTimeout(function(){
call.tabAuto(null, tabElem); call.tabAuto(null, tabElem);
}, 50); }, 50);
layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', { layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', {
elem: tabElem, elem: tabElem,
index: index, index: index,
id: hasId id: hasId
}); });
} }
// Tab 自适应 // Tab 自适应
,tabAuto: function(spread, elem){ ,tabAuto: function(spread, elem){
var SCROLL = 'layui-tab-scroll'; var SCROLL = 'layui-tab-scroll';
@ -251,7 +251,7 @@ layui.define('jquery', function(exports){
var CLOSE = 'layui-tab-close'; var CLOSE = 'layui-tab-close';
var that = this; var that = this;
var targetElem = elem || $('.layui-tab'); var targetElem = elem || $('.layui-tab');
targetElem.each(function(){ targetElem.each(function(){
var othis = $(this); var othis = $(this);
var title = othis.children('.layui-tab-title'); var title = othis.children('.layui-tab-title');
@ -262,7 +262,7 @@ layui.define('jquery', function(exports){
if(that === window && device.ie != 8){ if(that === window && device.ie != 8){
// call.hideTabMore(true) // call.hideTabMore(true)
} }
// 开启关闭图标 // 开启关闭图标
var allowclose = othis.attr('lay-allowclose'); var allowclose = othis.attr('lay-allowclose');
if(allowclose && allowclose !== 'false'){ if(allowclose && allowclose !== 'false'){
@ -279,9 +279,9 @@ layui.define('jquery', function(exports){
} }
}); });
} }
if(typeof othis.attr('lay-unauto') === 'string') return; if(typeof othis.attr('lay-unauto') === 'string') return;
// 响应式 // 响应式
if( if(
title.prop('scrollWidth') > title.outerWidth() + 1 || ( title.prop('scrollWidth') > title.outerWidth() + 1 || (
@ -294,7 +294,7 @@ layui.define('jquery', function(exports){
( (
spread === 'change' && title.data('LAY_TAB_CHANGE') spread === 'change' && title.data('LAY_TAB_CHANGE')
) && title.addClass(MORE); ) && title.addClass(MORE);
if(title.find('.'+BAR)[0]) return; if(title.find('.'+BAR)[0]) return;
title.append(span); title.append(span);
othis.attr('overflow', ''); othis.attr('overflow', '');
@ -318,7 +318,7 @@ layui.define('jquery', function(exports){
tsbTitle.find('.layui-tab-bar').attr('title',''); tsbTitle.find('.layui-tab-bar').attr('title','');
} }
} }
//点击一级菜单 //点击一级菜单
/* /*
,clickThis: function(){ ,clickThis: function(){
@ -328,17 +328,17 @@ layui.define('jquery', function(exports){
,unselect = typeof othis.attr('lay-unselect') === 'string'; ,unselect = typeof othis.attr('lay-unselect') === 'string';
if(othis.find('.'+NAV_CHILD)[0]) return; if(othis.find('.'+NAV_CHILD)[0]) return;
if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank') && !unselect){ if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank') && !unselect){
parents.find('.'+THIS).removeClass(THIS); parents.find('.'+THIS).removeClass(THIS);
othis.addClass(THIS); othis.addClass(THIS);
} }
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis); layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
} }
) )
*/ */
// 点击菜单 - a 标签触发 // 点击菜单 - a 标签触发
,clickThis: function() { ,clickThis: function() {
var othis = $(this); var othis = $(this);
@ -347,7 +347,7 @@ layui.define('jquery', function(exports){
var parent = othis.parent() ; var parent = othis.parent() ;
var child = othis.siblings('.'+ NAV_CHILD); var child = othis.siblings('.'+ NAV_CHILD);
var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中 var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中
// 满足点击选中的条件 // 满足点击选中的条件
if (!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect) { if (!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect) {
if (!child[0]) { if (!child[0]) {
@ -355,7 +355,7 @@ layui.define('jquery', function(exports){
parent.addClass(THIS); parent.addClass(THIS);
} }
} }
// 若为垂直菜单 // 若为垂直菜单
if (parents.hasClass(NAV_TREE)) { if (parents.hasClass(NAV_TREE)) {
var NAV_ITEMED = NAV_ITEM + 'ed'; // 用于标注展开状态 var NAV_ITEMED = NAV_ITEM + 'ed'; // 用于标注展开状态
@ -399,10 +399,10 @@ layui.define('jquery', function(exports){
} }
} }
} }
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis); layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
} }
// 折叠面板 // 折叠面板
,collapse: function(){ ,collapse: function(){
var othis = $(this); var othis = $(this);
@ -411,17 +411,17 @@ layui.define('jquery', function(exports){
var parents = othis.parents('.layui-collapse').eq(0); var parents = othis.parents('.layui-collapse').eq(0);
var filter = parents.attr('lay-filter'); var filter = parents.attr('lay-filter');
var isNone = elemCont.css('display') === 'none'; var isNone = elemCont.css('display') === 'none';
// 是否手风琴 // 是否手风琴
if(typeof parents.attr('lay-accordion') === 'string'){ if(typeof parents.attr('lay-accordion') === 'string'){
var show = parents.children('.layui-colla-item').children('.'+SHOW); var show = parents.children('.layui-colla-item').children('.'+SHOW);
show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;'); show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;');
show.removeClass(SHOW); show.removeClass(SHOW);
} }
elemCont[isNone ? 'addClass' : 'removeClass'](SHOW); elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
icon.html(isNone ? '&#xe61a;' : '&#xe602;'); icon.html(isNone ? '&#xe61a;' : '&#xe602;');
layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', { layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
title: othis title: othis
,content: elemCont ,content: elemCont
@ -429,20 +429,20 @@ layui.define('jquery', function(exports){
}); });
} }
}; };
// 初始化元素操作 // 初始化元素操作
Element.prototype.init = function(type, filter){ Element.prototype.init = function(type, filter){
var that = this, elemFilter = function(){ var that = this, elemFilter = function(){
return (typeof filter === 'string' && filter) ? ('[lay-filter="' + filter +'"]') : ''; return (typeof filter === 'string' && filter) ? ('[lay-filter="' + filter +'"]') : '';
}(), items = { }(), items = {
// Tab 选项卡 // Tab 选项卡
tab: function(elem){ tab: function(elem){
var TAB_ELEM = '.layui-tab'; var TAB_ELEM = '.layui-tab';
var targetElem = elem || $(TAB_ELEM + elemFilter); var targetElem = elem || $(TAB_ELEM + elemFilter);
call.tabAuto.call({}, null, targetElem); call.tabAuto.call({}, null, targetElem);
} }
// 导航菜单 // 导航菜单
,nav: function(elem){ ,nav: function(elem){
var TIME = 200; var TIME = 200;
@ -450,7 +450,7 @@ layui.define('jquery', function(exports){
var timerMore = {}; var timerMore = {};
var timeEnd = {}; var timeEnd = {};
var NAV_TITLE = 'layui-nav-title'; var NAV_TITLE = 'layui-nav-title';
// 滑块跟随 // 滑块跟随
var follow = function(bar, nav, index) { var follow = function(bar, nav, index) {
var othis = $(this); var othis = $(this);
@ -469,14 +469,14 @@ layui.define('jquery', function(exports){
} }
} else { } else {
child.addClass(NAV_ANIM); child.addClass(NAV_ANIM);
// 若居中对齐 // 若居中对齐
if (child.hasClass(NAV_CHILD_C)) { if (child.hasClass(NAV_CHILD_C)) {
child.css({ child.css({
left: -(child.outerWidth() - othis.width()) / 2 left: -(child.outerWidth() - othis.width()) / 2
}); });
} }
// 滑块定位 // 滑块定位
if (child[0]) { // 若有子菜单，则滑块消失 if (child[0]) { // 若有子菜单，则滑块消失
bar.css({ bar.css({
@ -490,7 +490,7 @@ layui.define('jquery', function(exports){
top: othis.position().top + othis.height() - bar.height() top: othis.position().top + othis.height() - bar.height()
}); });
} }
// 渐显滑块并适配宽度 // 渐显滑块并适配宽度
timer[index] = setTimeout(function() { timer[index] = setTimeout(function() {
bar.css({ bar.css({
@ -498,7 +498,7 @@ layui.define('jquery', function(exports){
opacity: child[0] ? 0 : 1 opacity: child[0] ? 0 : 1
}); });
}, device.ie && device.ie < 10 ? 0 : TIME); }, device.ie && device.ie < 10 ? 0 : TIME);
// 显示子菜单 // 显示子菜单
clearTimeout(timeEnd[index]); clearTimeout(timeEnd[index]);
if (child.css('display') === 'block') { if (child.css('display') === 'block') {
@ -510,20 +510,20 @@ layui.define('jquery', function(exports){
}, 300); }, 300);
} }
}; };
// 遍历导航 // 遍历导航
var targetElem = elem || $(NAV_ELEM + elemFilter); var targetElem = elem || $(NAV_ELEM + elemFilter);
targetElem.each(function(index) { targetElem.each(function(index) {
var othis = $(this); var othis = $(this);
var bar = $('<span class="'+ NAV_BAR +'"></span>'); var bar = $('<span class="'+ NAV_BAR +'"></span>');
var itemElem = othis.find('.'+NAV_ITEM); var itemElem = othis.find('.'+NAV_ITEM);
// hover 滑动效果 // hover 滑动效果
var hasBarElem = othis.find('.'+NAV_BAR); var hasBarElem = othis.find('.'+NAV_BAR);
if (hasBarElem[0]) hasBarElem.remove(); if (hasBarElem[0]) hasBarElem.remove();
othis.append(bar); othis.append(bar);
( othis.hasClass(NAV_TREE) ( othis.hasClass(NAV_TREE)
? itemElem.find('dd,>.'+ NAV_TITLE) ? itemElem.find('dd,>.'+ NAV_TITLE)
: itemElem : itemElem
).off('mouseenter.lay_nav').on('mouseenter.lay_nav', function() { ).off('mouseenter.lay_nav').on('mouseenter.lay_nav', function() {
follow.call(this, bar, othis, index); follow.call(this, bar, othis, index);
@ -557,23 +557,23 @@ layui.define('jquery', function(exports){
} }
}, TIME); }, TIME);
}); });
// 展开子菜单 // 展开子菜单
itemElem.find('a').each(function() { itemElem.find('a').each(function() {
var thisA = $(this); var thisA = $(this);
var parent = thisA.parent(); var parent = thisA.parent();
var child = thisA.siblings('.'+ NAV_CHILD); var child = thisA.siblings('.'+ NAV_CHILD);
// 输出小箭头 // 输出小箭头
if (child[0] && !thisA.children('.'+ NAV_MORE)[0]) { if (child[0] && !thisA.children('.'+ NAV_MORE)[0]) {
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>'); thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>');
} }
thisA.off('click', call.clickThis).on('click', call.clickThis); // 点击菜单 thisA.off('click', call.clickThis).on('click', call.clickThis); // 点击菜单
}); });
}); });
} }
//面包屑 //面包屑
,breadcrumb: function(elem){ ,breadcrumb: function(elem){
var ELEM = '.layui-breadcrumb'; var ELEM = '.layui-breadcrumb';
@ -592,7 +592,7 @@ layui.define('jquery', function(exports){
othis.css('visibility', 'visible'); othis.css('visibility', 'visible');
}); });
} }
//进度条 //进度条
,progress: function(elem){ ,progress: function(elem){
var ELEM = 'layui-progress'; var ELEM = 'layui-progress';
@ -604,11 +604,11 @@ layui.define('jquery', function(exports){
,percent = elemBar.attr('lay-percent'); ,percent = elemBar.attr('lay-percent');
elemBar.css('width', function(){ elemBar.css('width', function(){
return /^.+\/.+$/.test(percent) return /^.+\/.+$/.test(percent)
? (new Function('return '+ percent)() * 100) + '%' ? (new Function('return '+ percent)() * 100) + '%'
: percent; : percent;
}); });
if(othis.attr('lay-showpercent')){ if(othis.attr('lay-showpercent')){
setTimeout(function(){ setTimeout(function(){
elemBar.html('<span class="'+ ELEM +'-text">'+ percent +'</span>'); elemBar.html('<span class="'+ ELEM +'-text">'+ percent +'</span>');
@ -616,12 +616,12 @@ layui.define('jquery', function(exports){
} }
}); });
} }
//折叠面板 //折叠面板
,collapse: function(elem){ ,collapse: function(elem){
var ELEM = 'layui-collapse'; var ELEM = 'layui-collapse';
var targetElem = elem || $('.' + ELEM + elemFilter); var targetElem = elem || $('.' + ELEM + elemFilter);
targetElem.each(function(){ targetElem.each(function(){
var elemItem = $(this).find('.layui-colla-item') var elemItem = $(this).find('.layui-colla-item')
elemItem.each(function(){ elemItem.each(function(){
@ -629,15 +629,15 @@ layui.define('jquery', function(exports){
,elemTitle = othis.find('.layui-colla-title') ,elemTitle = othis.find('.layui-colla-title')
,elemCont = othis.find('.layui-colla-content') ,elemCont = othis.find('.layui-colla-content')
,isNone = elemCont.css('display') === 'none'; ,isNone = elemCont.css('display') === 'none';
//初始状态 //初始状态
elemTitle.find('.layui-colla-icon').remove(); elemTitle.find('.layui-colla-icon').remove();
elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '&#xe602;' : '&#xe61a;') +'</i>'); elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '&#xe602;' : '&#xe61a;') +'</i>');
//点击标题 //点击标题
elemTitle.off('click', call.collapse).on('click', call.collapse); elemTitle.off('click', call.collapse).on('click', call.collapse);
}); });
}); });
} }
}; };
@ -651,12 +651,12 @@ layui.define('jquery', function(exports){
item(); item();
}); });
}; };
Element.prototype.render = Element.prototype.init; Element.prototype.render = Element.prototype.init;
var element = new Element(); var element = new Element();
var dom = $(document); var dom = $(document);
$(function(){ $(function(){
element.render(); element.render();
}); });
@ -664,7 +664,7 @@ layui.define('jquery', function(exports){
dom.on('click', '.layui-tab-title li', call.tabClick); // Tab 切换 dom.on('click', '.layui-tab-title li', call.tabClick); // Tab 切换
// dom.on('click', call.hideTabMore); // 隐藏展开的 Tab // dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
$(window).on('resize', call.tabAuto); // 自适应 $(window).on('resize', call.tabAuto); // 自适应
exports(MOD_NAME, element); exports(MOD_NAME, element);
}); });

2
src/modules/jquery.js vendored
View File

@ -10978,4 +10978,4 @@ layui.define(function(exports){
}); });
return jQuery; return jQuery;
})); }));

12
src/modules/lay.js
View File

@ -599,7 +599,7 @@
options.onTouchEnd && options.onTouchEnd(e, state); options.onTouchEnd && options.onTouchEnd(e, state);
unbindEvents(); unbindEvents();
} }
var bindEvents = function(){ var bindEvents = function(){
targetElem.addEventListener('touchmove', onMove, lay.passiveSupported ? { passive: false} : false); targetElem.addEventListener('touchmove', onMove, lay.passiveSupported ? { passive: false} : false);
targetElem.addEventListener('touchend', onEnd); targetElem.addEventListener('touchend', onEnd);
@ -674,8 +674,8 @@
} }
}) })
elem[eventsCacheName] = newEvents; elem[eventsCacheName] = newEvents;
} }
} }
} }
}(); }();
@ -765,9 +765,9 @@
} }
return bindEventListener( return bindEventListener(
scopeTarget, scopeTarget,
eventType, eventType,
listener, listener,
lay.passiveSupported ? { passive: true, capture: useCapture } : useCapture lay.passiveSupported ? { passive: true, capture: useCapture } : useCapture
); );
} }

54
src/modules/laydate.js
View File

@ -1,4 +1,4 @@
/** laydate 日期与时间控件 | MIT Licensed */ /** laydate 日期与时间控件 | MIT Licensed */
// @ts-expect-error // @ts-expect-error
;!function(window, document){ // gulp build: laydate-header ;!function(window, document){ // gulp build: laydate-header
"use strict"; "use strict";
@ -1089,8 +1089,8 @@
/** /**
* 公历重要日期与自定义备注 * 公历重要日期与自定义备注
* @param {JQuery} td * @param {JQuery} td
* @param {[number, number, number]} YMD * @param {[number, number, number]} YMD
* @returns Class * @returns Class
*/ */
Class.prototype.mark = function(td, YMD){ Class.prototype.mark = function(td, YMD){
@ -1103,7 +1103,7 @@
if(options.calendar && options.lang === 'cn'){ if(options.calendar && options.lang === 'cn'){
render(that.markerOfChineseFestivals); render(that.markerOfChineseFestivals);
} }
if(typeof options.mark === 'function'){ if(typeof options.mark === 'function'){
options.mark({year: YMD[0], month: YMD[1], date: YMD[2]}, render); options.mark({year: YMD[0], month: YMD[1], date: YMD[2]}, render);
@ -1133,7 +1133,7 @@
lay.each(ymd2, function(i,v){ lay.each(ymd2, function(i,v){
ymd2[i] = parseInt(v, 10); ymd2[i] = parseInt(v, 10);
}) })
return ymd1.join('-') === ymd2.join('-'); return ymd1.join('-') === ymd2.join('-');
} }
@ -1147,7 +1147,7 @@
'</span>' '</span>'
].join('')); ].join(''));
} }
if(layui.type(markers) === 'array'){ if(layui.type(markers) === 'array'){
lay.each(markers, function(idx, item) { lay.each(markers, function(idx, item) {
lay.each(item, function(i, dayStr) { lay.each(item, function(i, dayStr) {
@ -1165,8 +1165,8 @@
/** /**
* 标注法定节假日或补假上班 * 标注法定节假日或补假上班
* @param {JQuery} td * @param {JQuery} td
* @param {[number, number, number]} YMD * @param {[number, number, number]} YMD
* @returns Class * @returns Class
*/ */
Class.prototype.holidays = function(td, YMD) { Class.prototype.holidays = function(td, YMD) {
@ -1191,7 +1191,7 @@
* @param {HTMLElement|Array<HTMLElement>} el - 单元格元素 * @param {HTMLElement|Array<HTMLElement>} el - 单元格元素
* @param {{year:number, month:number, date:number}} dateObj - 当前单元格对应的日期信息 * @param {{year:number, month:number, date:number}} dateObj - 当前单元格对应的日期信息
* @param {'year' | 'month' | 'date'} panelMode - 面板模式 * @param {'year' | 'month' | 'date'} panelMode - 面板模式
* @returns * @returns
*/ */
Class.prototype.cellRender = function(el, dateObj, panelMode){ Class.prototype.cellRender = function(el, dateObj, panelMode){
var that = this; var that = this;
@ -1213,7 +1213,7 @@
/** /**
* 给定年份的开始日期 * 给定年份的开始日期
* @param {Date} date * @param {Date} date
*/ */
Class.prototype.startOfYear = function(date){ Class.prototype.startOfYear = function(date){
var newDate = new Date(date); var newDate = new Date(date);
@ -1236,7 +1236,7 @@
/** /**
* 给定月份的开始日期 * 给定月份的开始日期
* @param {Date} date * @param {Date} date
*/ */
Class.prototype.startOfMonth = function(date){ Class.prototype.startOfMonth = function(date){
var newDate = new Date(date); var newDate = new Date(date);
@ -1247,7 +1247,7 @@
/** /**
* 给定月份的结束日期 * 给定月份的结束日期
* @param {Date} date * @param {Date} date
*/ */
Class.prototype.endOfMonth = function(date){ Class.prototype.endOfMonth = function(date){
var newDate = new Date(date); var newDate = new Date(date);
@ -1284,7 +1284,7 @@
var endDay = type === 'year' ? that.endOfYear(date) : that.endOfMonth(date); var endDay = type === 'year' ? that.endOfYear(date) : that.endOfMonth(date);
var numOfDays = Math.floor((endDay.getTime() - startDay.getTime()) / millisecondsInDay) + 1; var numOfDays = Math.floor((endDay.getTime() - startDay.getTime()) / millisecondsInDay) + 1;
var disabledCount = 0; var disabledCount = 0;
for(var i = 0; i < numOfDays; i++){ for(var i = 0; i < numOfDays; i++){
var day = that.addDays(startDay, i); var day = that.addDays(startDay, i);
if(options.disabledDate.call(options, day, position)){ if(options.disabledDate.call(options, day, position)){
@ -1317,7 +1317,7 @@
var that = this; var that = this;
var options = that.config; var options = that.config;
var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start'; var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start';
if(!options.disabledDate) return false; if(!options.disabledDate) return false;
if(options.type === 'time') return false; if(options.type === 'time') return false;
if(!(opts.disabledType === 'date' || opts.disabledType === 'datetime')) return false; if(!(opts.disabledType === 'date' || opts.disabledType === 'datetime')) return false;
@ -1325,7 +1325,7 @@
// 不需要时分秒 // 不需要时分秒
var normalizedDate = new Date(date); var normalizedDate = new Date(date);
normalizedDate.setHours(0, 0, 0, 0); normalizedDate.setHours(0, 0, 0, 0);
return opts.type === 'year' || opts.type === 'month' return opts.type === 'year' || opts.type === 'month'
? that.isDisabledYearOrMonth(normalizedDate, opts.type, position) ? that.isDisabledYearOrMonth(normalizedDate, opts.type, position)
: options.disabledDate.call(options, normalizedDate, position); : options.disabledDate.call(options, normalizedDate, position);
@ -1343,7 +1343,7 @@
var that = this; var that = this;
var options = that.config; var options = that.config;
var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start'; var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start';
if(!options.disabledTime) return false; if(!options.disabledTime) return false;
if(!(options.type === "time" || options.type === "datetime")) return false; if(!(options.type === "time" || options.type === "datetime")) return false;
if(!(opts.disabledType === 'time' || opts.disabledType === 'datetime')) return false; if(!(opts.disabledType === 'time' || opts.disabledType === 'datetime')) return false;
@ -1351,7 +1351,7 @@
var isDisabledItem = function(compareVal, rangeFn, rangeFnParam){ var isDisabledItem = function(compareVal, rangeFn, rangeFnParam){
return function(){ return function(){
return (typeof rangeFn === 'function' && rangeFn.apply(options, rangeFnParam) || []).indexOf(compareVal) !== -1; return (typeof rangeFn === 'function' && rangeFn.apply(options, rangeFnParam) || []).indexOf(compareVal) !== -1;
} }
} }
var dateObj = that.systemDate(new Date(date)); var dateObj = that.systemDate(new Date(date));
@ -1371,8 +1371,8 @@
/** /**
* 不可选取的日期时间 * 不可选取的日期时间
* @param {number} timestamp 当前检测的日期的时间戳 * @param {number} timestamp 当前检测的日期的时间戳
* @param {limitOptions} opts * @param {limitOptions} opts
* @returns * @returns
*/ */
Class.prototype.isDisabledDateTime = function(timestamp, opts){ Class.prototype.isDisabledDateTime = function(timestamp, opts){
opts = opts || {}; opts = opts || {};
@ -1386,8 +1386,8 @@
/** /**
* 无效日期范围的标记 * 无效日期范围的标记
* @param {limitOptions} opts * @param {limitOptions} opts
* *
*/ */
Class.prototype.limit = function(opts){ Class.prototype.limit = function(opts){
opts = opts || {}; opts = opts || {};
@ -1978,12 +1978,12 @@
/** /**
* 格式化输入框显示值 * 格式化输入框显示值
* @param {HTMLInputElement} elem HTML input 元素 * @param {HTMLInputElement} elem HTML input 元素
* @param {(value: string) => string} displayValueCallback * @param {(value: string) => string} displayValueCallback
*/ */
Class.prototype.formatToDisplay = function (elem, displayValueCallback) { Class.prototype.formatToDisplay = function (elem, displayValueCallback) {
var that = this; var that = this;
var props = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value'); var props = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value');
Object.defineProperty( Object.defineProperty(
elem, elem,
'value', 'value',
@ -2162,7 +2162,7 @@
* 判断日期是否存在面板，用于处理日期范围选择的一些边缘情况 * 判断日期是否存在面板，用于处理日期范围选择的一些边缘情况
* @param {object} datetime 日期时间对象 * @param {object} datetime 日期时间对象
* @param {number} index - 面板索引 * @param {number} index - 面板索引
* @returns * @returns
*/ */
Class.prototype.checkPanelDate = function(datetime, index){ Class.prototype.checkPanelDate = function(datetime, index){
var that = this; var that = this;
@ -2196,7 +2196,7 @@
index: firstRenderIndex index: firstRenderIndex
} }
} }
//选择日期 //选择日期
Class.prototype.choose = function(td, index){ Class.prototype.choose = function(td, index){
if(td.hasClass(DISABLED)) return; if(td.hasClass(DISABLED)) return;
@ -2373,7 +2373,7 @@
? that.startTime && that.endTime && that.newDate(that.startTime) > that.newDate(that.endTime) ? that.startTime && that.endTime && that.newDate(that.startTime) > that.newDate(that.endTime)
: that.startDate && that.endDate && that.newDate(lay.extend({},that.startDate, that.startTime || {})) > that.newDate(lay.extend({},that.endDate, that.endTime || {})); : that.startDate && that.endDate && that.newDate(lay.extend({},that.startDate, that.startTime || {})) > that.newDate(lay.extend({},that.endDate, that.endTime || {}));
return isTimeout return isTimeout
? that.hint(options.type === 'time' ? lang.timeout.replace(/日期/g, '时间') : lang.timeout) ? that.hint(options.type === 'time' ? lang.timeout.replace(/日期/g, '时间') : lang.timeout)
: that.hint(lang.invalidDate); : that.hint(lang.invalidDate);
} }
@ -2474,7 +2474,7 @@
year: YM[0] year: YM[0]
,month: YM[1] ,month: YM[1]
}); });
that.checkDate('limit').calendar(null, null, 'init'); that.checkDate('limit').calendar(null, null, 'init');
that.autoCalendarModel.auto ? that.choose(lay(elemCont).find('td.layui-this'), index) : that.done(null, 'change'); that.autoCalendarModel.auto ? that.choose(lay(elemCont).find('td.layui-this'), index) : that.done(null, 'change');
} }

336
src/modules/layer.js
View File

File diff suppressed because it is too large Load Diff

76
src/modules/laypage.js
View File

@ -4,15 +4,15 @@
layui.define(function(exports){ layui.define(function(exports){
"use strict"; "use strict";
var doc = document; var doc = document;
var id = 'getElementById'; var id = 'getElementById';
var tag = 'getElementsByTagName'; var tag = 'getElementsByTagName';
// 字符常量 // 字符常量
var MOD_NAME = 'laypage'; var MOD_NAME = 'laypage';
var DISABLED = 'layui-disabled'; var DISABLED = 'layui-disabled';
// 构造器 // 构造器
var Class = function(options){ var Class = function(options){
var that = this; var that = this;
@ -35,15 +35,15 @@ layui.define(function(exports){
var config = that.config; var config = that.config;
// 连续页码个数 // 连续页码个数
var groups = config.groups = 'groups' in config var groups = config.groups = 'groups' in config
? (Number(config.groups) || 0) ? (Number(config.groups) || 0)
: 5; : 5;
// 排版 // 排版
config.layout = typeof config.layout === 'object' config.layout = typeof config.layout === 'object'
? config.layout ? config.layout
: ['prev', 'page', 'next']; : ['prev', 'page', 'next'];
config.count = Number(config.count) || 0; // 数据总数 config.count = Number(config.count) || 0; // 数据总数
config.curr = Number(config.curr) || 1; // 当前页 config.curr = Number(config.curr) || 1; // 当前页
@ -54,50 +54,50 @@ layui.define(function(exports){
// 默认条数 // 默认条数
config.limit = Number(config.limit) || 10; config.limit = Number(config.limit) || 10;
// 总页数 // 总页数
config.pages = Math.ceil(config.count/config.limit) || 1; config.pages = Math.ceil(config.count/config.limit) || 1;
// 当前页不能超过总页数 // 当前页不能超过总页数
if(config.curr > config.pages){ if(config.curr > config.pages){
config.curr = config.pages; config.curr = config.pages;
} else if(config.curr < 1) { // 当前分页不能小于 1 } else if(config.curr < 1) { // 当前分页不能小于 1
config.curr = 1; config.curr = 1;
} }
// 连续分页个数不能低于 0 且不能大于总页数 // 连续分页个数不能低于 0 且不能大于总页数
if(groups < 0){ if(groups < 0){
groups = 1; groups = 1;
} else if (groups > config.pages){ } else if (groups > config.pages){
groups = config.pages; groups = config.pages;
} }
config.prev = 'prev' in config ? config.prev : '上一页'; // 上一页文本 config.prev = 'prev' in config ? config.prev : '上一页'; // 上一页文本
config.next = 'next' in config ? config.next : '下一页'; // 下一页文本 config.next = 'next' in config ? config.next : '下一页'; // 下一页文本
// 计算当前组 // 计算当前组
var index = config.pages > groups var index = config.pages > groups
? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) ) ? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) )
: 1; : 1;
// 视图片段 // 视图片段
var views = { var views = {
// 上一页 // 上一页
prev: function(){ prev: function(){
return config.prev return config.prev
? '<a class="layui-laypage-prev'+ (config.curr == 1 ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr - 1) +'">'+ config.prev +'</a>' ? '<a class="layui-laypage-prev'+ (config.curr == 1 ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr - 1) +'">'+ config.prev +'</a>'
: ''; : '';
}(), }(),
// 页码 // 页码
page: function(){ page: function(){
var pager = []; var pager = [];
// 数据量为0时，不输出页码 // 数据量为0时，不输出页码
if(config.count < 1){ if(config.count < 1){
return ''; return '';
} }
// 首页 // 首页
if(index > 1 && config.first !== false && groups !== 0){ if(index > 1 && config.first !== false && groups !== 0){
pager.push('<a class="layui-laypage-first" data-page="1" title="首页">'+ (config.first || 1) +'</a>'); pager.push('<a class="layui-laypage-first" data-page="1" title="首页">'+ (config.first || 1) +'</a>');
@ -110,7 +110,7 @@ layui.define(function(exports){
var max = config.curr + (groups - halve - 1); var max = config.curr + (groups - halve - 1);
return max > config.pages ? config.pages : max; return max > config.pages ? config.pages : max;
}()) : groups; }()) : groups;
// 防止最后一组出现“不规定”的连续页码数 // 防止最后一组出现“不规定”的连续页码数
if(end - start < groups - 1){ if(end - start < groups - 1){
start = end - groups + 1; start = end - groups + 1;
@ -120,7 +120,7 @@ layui.define(function(exports){
if(config.first !== false && start > 2){ if(config.first !== false && start > 2){
pager.push('<span class="layui-laypage-spr">...</span>') pager.push('<span class="layui-laypage-spr">...</span>')
} }
// 输出连续页码 // 输出连续页码
for(; start <= end; start++){ for(; start <= end; start++){
if(start === config.curr){ if(start === config.curr){
@ -130,7 +130,7 @@ layui.define(function(exports){
pager.push('<a data-page="'+ start +'">'+ start +'</a>'); pager.push('<a data-page="'+ start +'">'+ start +'</a>');
} }
} }
// 输出输出右分隔符 & 末页 // 输出输出右分隔符 & 末页
if(config.pages > groups && config.pages > end && config.last !== false){ if(config.pages > groups && config.pages > end && config.last !== false){
if(end + 1 < config.pages){ if(end + 1 < config.pages){
@ -143,20 +143,20 @@ layui.define(function(exports){
return pager.join(''); return pager.join('');
}(), }(),
// 下一页 // 下一页
next: function(){ next: function(){
return config.next return config.next
? '<a class="layui-laypage-next'+ (config.curr == config.pages ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr + 1) +'">'+ config.next +'</a>' ? '<a class="layui-laypage-next'+ (config.curr == config.pages ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr + 1) +'">'+ config.next +'</a>'
: ''; : '';
}(), }(),
// 数据总数 // 数据总数
count: function(){ count: function(){
var countText = typeof config.countText === 'object' ? config.countText : ['共 ', ' 条']; var countText = typeof config.countText === 'object' ? config.countText : ['共 ', ' 条'];
return '<span class="layui-laypage-count">'+ countText[0] + config.count + countText[1] +'</span>' return '<span class="layui-laypage-count">'+ countText[0] + config.count + countText[1] +'</span>'
}(), }(),
// 每页条数 // 每页条数
limit: function(){ limit: function(){
var elemArr = ['<span class="layui-laypage-limits"><select lay-ignore>']; var elemArr = ['<span class="layui-laypage-limits"><select lay-ignore>'];
@ -178,7 +178,7 @@ layui.define(function(exports){
return elemArr.join('') +'</select></span>'; return elemArr.join('') +'</select></span>';
}(), }(),
// 刷新当前页 // 刷新当前页
refresh: [ refresh: [
'<a data-page="'+ config.curr +'" class="layui-laypage-refresh">', '<a data-page="'+ config.curr +'" class="layui-laypage-refresh">',
@ -234,9 +234,9 @@ layui.define(function(exports){
that.render(); that.render();
} }
}; };
if(isskip) return skip(); if(isskip) return skip();
// 页码 // 页码
for(var i = 0, len = childs.length; i < len; i++){ for(var i = 0, len = childs.length; i < len; i++){
if(childs[i].nodeName.toLowerCase() === 'a'){ if(childs[i].nodeName.toLowerCase() === 'a'){
@ -248,7 +248,7 @@ layui.define(function(exports){
}); });
} }
} }
// 条数 // 条数
if(select){ if(select){
laypage.on(select, 'change', function(){ laypage.on(select, 'change', function(){
@ -260,7 +260,7 @@ layui.define(function(exports){
that.render(); that.render();
}); });
} }
// 确定 // 确定
if(btn){ if(btn){
laypage.on(btn, 'click', function(){ laypage.on(btn, 'click', function(){
@ -268,7 +268,7 @@ layui.define(function(exports){
}); });
} }
}; };
// 输入页数字控制 // 输入页数字控制
Class.prototype.skip = function(elem){ Class.prototype.skip = function(elem){
if(!elem) return; if(!elem) return;
@ -300,7 +300,7 @@ layui.define(function(exports){
var config = that.config; var config = that.config;
var type = that.type(); var type = that.type();
var view = that.view(); var view = that.view();
if(type === 2){ if(type === 2){
config.elem && (config.elem.innerHTML = view); config.elem && (config.elem.innerHTML = view);
} else if(type === 3){ } else if(type === 3){
@ -312,17 +312,17 @@ layui.define(function(exports){
} }
config.jump && config.jump(config, load); config.jump && config.jump(config, load);
var elem = doc[id]('layui-laypage-' + config.index); var elem = doc[id]('layui-laypage-' + config.index);
that.jump(elem); that.jump(elem);
if(config.hash && !load){ if(config.hash && !load){
location.hash = '!'+ config.hash +'='+ config.curr; location.hash = '!'+ config.hash +'='+ config.curr;
} }
that.skip(elem); that.skip(elem);
}; };
// 外部接口 // 外部接口
var laypage = { var laypage = {
// 分页渲染 // 分页渲染

6
src/modules/layui.all.js
View File

@ -1,11 +1,11 @@
/** /**
* 用于打包聚合版，该文件不会存在于构建后的目录 * 用于打包聚合版，该文件不会存在于构建后的目录
*/ */
layui.define(function(exports){ layui.define(function(exports){
var cache = layui.cache; var cache = layui.cache;
layui.config({ layui.config({
dir: cache.dir.replace(/lay\/dest\/$/, '') dir: cache.dir.replace(/lay\/dest\/$/, '')
}); });
exports('layui.all', layui.v); exports('layui.all', layui.v);
}); });

8
src/modules/mobile.js
View File

@ -1,9 +1,9 @@
/** /**
* layui 移动模块入口 * layui 移动模块入口
* 构建后则为移动模块集合 * 构建后则为移动模块集合
*/ */
if(!layui['layui.mobile']){ if(!layui['layui.mobile']){
layui.config({ layui.config({
base: layui.cache.dir + 'lay/modules/mobile/' base: layui.cache.dir + 'lay/modules/mobile/'
@ -13,7 +13,7 @@ if(!layui['layui.mobile']){
,'upload-mobile': 'upload-mobile' ,'upload-mobile': 'upload-mobile'
,'layim-mobile': 'layim-mobile' ,'layim-mobile': 'layim-mobile'
}); });
} }
layui.define([ layui.define([
'layer-mobile' 'layer-mobile'
@ -24,4 +24,4 @@ layui.define([
layer: layui['layer-mobile'] //弹层 layer: layui['layer-mobile'] //弹层
,layim: layui['layim-mobile'] //WebIM ,layim: layui['layim-mobile'] //WebIM
}); });
}); });

2
src/modules/slider.js
View File

@ -381,7 +381,7 @@ layui.define(['jquery', 'lay'], function(exports){
//动态赋值 //动态赋值
if(setValue === 'set'){ if(setValue === 'set'){
return change((value - options.min) / (options.max - options.min) * 100 / step, i, 'done'); return change((value - options.min) / (options.max - options.min) * 100 / step, i, 'done');
} }
//滑块滑动 //滑块滑动
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){ sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){

22
src/modules/table.js
View File

@ -81,7 +81,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// lay 函数可以处理 Selector，HTMLElement，JQuery 类型 // lay 函数可以处理 Selector，HTMLElement，JQuery 类型
// 无效的 CSS 选择器字符串，会抛出 SyntaxError 异常，此时直接返回 laytpl 模板字符串 // 无效的 CSS 选择器字符串，会抛出 SyntaxError 异常，此时直接返回 laytpl 模板字符串
var resolveTplStr = function(templet){ var resolveTplStr = function(templet){
try{ try{
return lay(templet).html(); return lay(templet).html();
}catch(err){ }catch(err){
return templet; return templet;
@ -1037,7 +1037,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
mainTableElem.width(that.getContentWidth(headerTableElem)); mainTableElem.width(that.getContentWidth(headerTableElem));
} }
// 二次校验，如果仍然出现横向滚动条（通常是 1px 的误差导致） // 二次校验，如果仍然出现横向滚动条（通常是 1px 的误差导致）
// 不同屏幕分辨率、缩放水平以及浏览器渲染差异，可能会触发这个问题 // 不同屏幕分辨率、缩放水平以及浏览器渲染差异，可能会触发这个问题
if(that.layMain.prop('offsetHeight') > that.layMain.prop('clientHeight')){ if(that.layMain.prop('offsetHeight') > that.layMain.prop('clientHeight')){
item.style.width = (parseFloat(item.style.width) - borderWidth) + 'px'; item.style.width = (parseFloat(item.style.width) - borderWidth) + 'px';
} }
@ -1060,7 +1060,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var that = this; var that = this;
var tableElemIsConnected = that.layMain && ('isConnected' in that.layMain[0] var tableElemIsConnected = that.layMain && ('isConnected' in that.layMain[0]
? that.layMain[0].isConnected ? that.layMain[0].isConnected
: $.contains(document.body, that.layMain[0])); : $.contains(document.body, that.layMain[0]));
if(!tableElemIsConnected) return; if(!tableElemIsConnected) return;
@ -1938,7 +1938,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var options = that.config; var options = that.config;
if(options.loading){ if(options.loading){
that.layBox.find(ELEM_INIT).toggleClass(HIDE, !show); that.layBox.find(ELEM_INIT).toggleClass(HIDE, !show);
} }
}; };
@ -2094,7 +2094,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
*/ */
/** /**
* 更新指定行 * 更新指定行
* @param {updateRowOptions | updateRowOptions[]} opts * @param {updateRowOptions | updateRowOptions[]} opts
* @param {(field: string, value: any) => void} [callback] - 更新每个字段时的回调函数 * @param {(field: string, value: any) => void} [callback] - 更新每个字段时的回调函数
*/ */
Class.prototype.updateRow = function(opts, callback){ Class.prototype.updateRow = function(opts, callback){
@ -2146,7 +2146,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
/** /**
* 更新指定行 * 更新指定行
* @param {string} id - table ID * @param {string} id - table ID
* @param {updateRowOptions | updateRowOptions[]} options * @param {updateRowOptions | updateRowOptions[]} options
*/ */
table.updateRow = function (id, options){ table.updateRow = function (id, options){
var that = getThisTable(id); var that = getThisTable(id);
@ -2745,7 +2745,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
$this.remove(); $this.remove();
// 重置单元格滚动条位置 // 重置单元格滚动条位置
elemCell.scrollTop(0); elemCell.scrollTop(0);
elemCell.scrollLeft(0); elemCell.scrollLeft(0);
}); });
} }
@ -2857,18 +2857,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
/** /**
* 获取元素 content 区域宽度值 * 获取元素 content 区域宽度值
* *
* layui 内置 jQuery v1.12.4 中的 jQuery.fn.width 始终对值四舍五入(3.x 已修复), * layui 内置 jQuery v1.12.4 中的 jQuery.fn.width 始终对值四舍五入(3.x 已修复),
* 在支持 subpixel Rendering 的浏览器中渲染表格，由于列宽分配时计算值精度不足， * 在支持 subpixel Rendering 的浏览器中渲染表格，由于列宽分配时计算值精度不足，
* 可能会导致一些小问题(#1726) * 可能会导致一些小问题(#1726)
* *
* 这个方法使用 getComputedStyle 获取精确的宽度值进行计算，为了尽可能和以前的行为 * 这个方法使用 getComputedStyle 获取精确的宽度值进行计算，为了尽可能和以前的行为
* 保持一致(主要是隐藏元素内渲染 table 递归获取父元素宽度 https://github.com/layui/layui/discussions/2398)， * 保持一致(主要是隐藏元素内渲染 table 递归获取父元素宽度 https://github.com/layui/layui/discussions/2398)，
* 任何非预期的值，都回退到 jQuery.fn.width。未来的版本使用 ResizeObserver 时，可以直接获取表格视图元素的宽度， * 任何非预期的值，都回退到 jQuery.fn.width。未来的版本使用 ResizeObserver 时，可以直接获取表格视图元素的宽度，
* 并移除兼容性代码 * 并移除兼容性代码
* *
* @param {JQuery} elem - 元素的 jQuery 对象 * @param {JQuery} elem - 元素的 jQuery 对象
* *
* @see {@link https://learn.microsoft.com/zh-cn/archive/blogs/ie_cn/css-3} * @see {@link https://learn.microsoft.com/zh-cn/archive/blogs/ie_cn/css-3}
*/ */
Class.prototype.getContentWidth = function(elem){ Class.prototype.getContentWidth = function(elem){

108
src/modules/transfer.js
View File

@ -4,11 +4,11 @@
layui.define(['laytpl', 'form'], function(exports){ layui.define(['laytpl', 'form'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var laytpl = layui.laytpl; var laytpl = layui.laytpl;
var form = layui.form; var form = layui.form;
// 模块名 // 模块名
var MOD_NAME = 'transfer'; var MOD_NAME = 'transfer';
@ -23,7 +23,7 @@ layui.define(['laytpl', 'form'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
}, },
// 事件 // 事件
on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
@ -35,10 +35,10 @@ layui.define(['laytpl', 'form'], function(exports){
var that = this; var that = this;
var options = that.config; var options = that.config;
var id = options.id || that.index; var id = options.id || that.index;
thisModule.that[id] = that; // 记录当前实例对象 thisModule.that[id] = that; // 记录当前实例对象
thisModule.config[id] = options; // 记录当前实例配置项 thisModule.config[id] = options; // 记录当前实例配置项
return { return {
config: options, config: options,
// 重置实例 // 重置实例
@ -51,7 +51,7 @@ layui.define(['laytpl', 'form'], function(exports){
} }
} }
}; };
// 获取当前实例配置项 // 获取当前实例配置项
var getThisModuleConfig = function(id){ var getThisModuleConfig = function(id){
var config = thisModule.config[id]; var config = thisModule.config[id];
@ -61,7 +61,7 @@ layui.define(['laytpl', 'form'], function(exports){
// 字符常量 // 字符常量
var ELEM = 'layui-transfer'; var ELEM = 'layui-transfer';
var HIDE = 'layui-hide'; var HIDE = 'layui-hide';
var DISABLED = 'layui-btn-disabled'; var DISABLED = 'layui-btn-disabled';
var NONE = 'layui-none'; var NONE = 'layui-none';
var ELEM_BOX = 'layui-transfer-box'; var ELEM_BOX = 'layui-transfer-box';
@ -69,7 +69,7 @@ layui.define(['laytpl', 'form'], function(exports){
var ELEM_SEARCH = 'layui-transfer-search'; var ELEM_SEARCH = 'layui-transfer-search';
var ELEM_ACTIVE = 'layui-transfer-active'; var ELEM_ACTIVE = 'layui-transfer-active';
var ELEM_DATA = 'layui-transfer-data'; var ELEM_DATA = 'layui-transfer-data';
// 穿梭框模板 // 穿梭框模板
var TPL_BOX = function(obj){ var TPL_BOX = function(obj){
obj = obj || {}; obj = obj || {};
@ -86,7 +86,7 @@ layui.define(['laytpl', 'form'], function(exports){
'<ul class="layui-transfer-data"></ul>', '<ul class="layui-transfer-data"></ul>',
'</div>'].join(''); '</div>'].join('');
}; };
// 主模板 // 主模板
var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">', var TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{= d.index }}">',
TPL_BOX({ TPL_BOX({
@ -129,7 +129,7 @@ layui.define(['laytpl', 'form'], function(exports){
searchNone: '无匹配数据' searchNone: '无匹配数据'
} }
}; };
// 重载实例 // 重载实例
Class.prototype.reload = function(options){ Class.prototype.reload = function(options){
var that = this; var that = this;
@ -141,7 +141,7 @@ layui.define(['laytpl', 'form'], function(exports){
Class.prototype.render = function(){ Class.prototype.render = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
// 解析模板 // 解析模板
var thisElem = that.elem = $(laytpl(TPL_MAIN, { var thisElem = that.elem = $(laytpl(TPL_MAIN, {
open: '{{', // 标签符前缀 open: '{{', // 标签符前缀
@ -150,30 +150,30 @@ layui.define(['laytpl', 'form'], function(exports){
data: options, data: options,
index: that.index // 索引 index: that.index // 索引
})); }));
var othis = options.elem = $(options.elem); var othis = options.elem = $(options.elem);
if(!othis[0]) return; if(!othis[0]) return;
// 初始化属性 // 初始化属性
options.data = options.data || []; options.data = options.data || [];
options.value = options.value || []; options.value = options.value || [];
// 初始化 id 属性 - 优先取 options > 元素 id > 自增索引 // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
options.id = 'id' in options ? options.id : ( options.id = 'id' in options ? options.id : (
elem.attr('id') || that.index elem.attr('id') || that.index
); );
that.key = options.id; that.key = options.id;
// 插入组件结构 // 插入组件结构
othis.html(that.elem); othis.html(that.elem);
// 各级容器 // 各级容器
that.layBox = that.elem.find('.'+ ELEM_BOX) that.layBox = that.elem.find('.'+ ELEM_BOX)
that.layHeader = that.elem.find('.'+ ELEM_HEADER) that.layHeader = that.elem.find('.'+ ELEM_HEADER)
that.laySearch = that.elem.find('.'+ ELEM_SEARCH) that.laySearch = that.elem.find('.'+ ELEM_SEARCH)
that.layData = thisElem.find('.'+ ELEM_DATA); that.layData = thisElem.find('.'+ ELEM_DATA);
that.layBtn = thisElem.find('.'+ ELEM_ACTIVE + ' .layui-btn'); that.layBtn = thisElem.find('.'+ ELEM_ACTIVE + ' .layui-btn');
// 初始化尺寸 // 初始化尺寸
that.layBox.css({ that.layBox.css({
width: options.width, width: options.width,
@ -188,16 +188,16 @@ layui.define(['laytpl', 'form'], function(exports){
return height - 2; return height - 2;
}() }()
}); });
that.renderData(); // 渲染数据 that.renderData(); // 渲染数据
that.events(); // 事件 that.events(); // 事件
}; };
// 渲染数据 // 渲染数据
Class.prototype.renderData = function(){ Class.prototype.renderData = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
// 左右穿梭框差异数据 // 左右穿梭框差异数据
var arr = [{ var arr = [{
checkName: 'layTransferLeftCheck', checkName: 'layTransferLeftCheck',
@ -206,9 +206,9 @@ layui.define(['laytpl', 'form'], function(exports){
checkName: 'layTransferRightCheck', checkName: 'layTransferRightCheck',
views: [] views: []
}]; }];
// 解析格式 // 解析格式
that.parseData(function(item){ that.parseData(function(item){
// 标注为 selected 的为右边的数据 // 标注为 selected 的为右边的数据
var _index = item.selected ? 1 : 0 var _index = item.selected ? 1 : 0
var listElem = ['<li>', var listElem = ['<li>',
@ -226,31 +226,31 @@ layui.define(['laytpl', 'form'], function(exports){
} }
delete item.selected; delete item.selected;
}); });
that.layData.eq(0).html(arr[0].views.join('')); that.layData.eq(0).html(arr[0].views.join(''));
that.layData.eq(1).html(arr[1].views.join('')); that.layData.eq(1).html(arr[1].views.join(''));
that.renderCheckBtn(); that.renderCheckBtn();
}; };
// 渲染表单 // 渲染表单
Class.prototype.renderForm = function(type){ Class.prototype.renderForm = function(type){
form.render(type, 'LAY-transfer-'+ this.index); form.render(type, 'LAY-transfer-'+ this.index);
}; };
// 同步复选框和按钮状态 // 同步复选框和按钮状态
Class.prototype.renderCheckBtn = function(obj){ Class.prototype.renderCheckBtn = function(obj){
var that = this; var that = this;
var options = that.config; var options = that.config;
obj = obj || {}; obj = obj || {};
that.layBox.each(function(_index){ that.layBox.each(function(_index){
var othis = $(this); var othis = $(this);
var thisDataElem = othis.find('.'+ ELEM_DATA); var thisDataElem = othis.find('.'+ ELEM_DATA);
var allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]'); var allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]');
var listElemCheckbox = thisDataElem.find('input[type="checkbox"]'); var listElemCheckbox = thisDataElem.find('input[type="checkbox"]');
// 同步复选框和按钮状态 // 同步复选框和按钮状态
var nums = 0; var nums = 0;
var haveChecked = false; var haveChecked = false;
@ -264,20 +264,20 @@ layui.define(['laytpl', 'form'], function(exports){
haveChecked = true; haveChecked = true;
} }
}); });
allElemCheckbox.prop('checked', haveChecked && nums === listElemCheckbox.length); // 全选复选框状态 allElemCheckbox.prop('checked', haveChecked && nums === listElemCheckbox.length); // 全选复选框状态
that.layBtn.eq(_index)[haveChecked ? 'removeClass' : 'addClass'](DISABLED); // 对应的按钮状态 that.layBtn.eq(_index)[haveChecked ? 'removeClass' : 'addClass'](DISABLED); // 对应的按钮状态
// 无数据视图 // 无数据视图
if(!obj.stopNone){ if(!obj.stopNone){
var isNone = thisDataElem.children('li:not(.'+ HIDE +')').length var isNone = thisDataElem.children('li:not(.'+ HIDE +')').length
that.noneView(thisDataElem, isNone ? '' : options.text.none); that.noneView(thisDataElem, isNone ? '' : options.text.none);
} }
}); });
that.renderForm('checkbox'); that.renderForm('checkbox');
}; };
// 无数据视图 // 无数据视图
Class.prototype.noneView = function(thisDataElem, text){ Class.prototype.noneView = function(thisDataElem, text){
var createNoneElem = $('<p class="layui-none">'+ (text || '') +'</p>'); var createNoneElem = $('<p class="layui-none">'+ (text || '') +'</p>');
@ -286,7 +286,7 @@ layui.define(['laytpl', 'form'], function(exports){
} }
text.replace(/\s/g, '') && thisDataElem.append(createNoneElem); text.replace(/\s/g, '') && thisDataElem.append(createNoneElem);
}; };
// 同步 value 属性值 // 同步 value 属性值
Class.prototype.setValue = function(){ Class.prototype.setValue = function(){
var that = this; var that = this;
@ -298,7 +298,7 @@ layui.define(['laytpl', 'form'], function(exports){
isHide || arr.push(this.value); isHide || arr.push(this.value);
}); });
options.value = arr; options.value = arr;
return that; return that;
}; };
@ -307,15 +307,15 @@ layui.define(['laytpl', 'form'], function(exports){
var that = this; var that = this;
var options = that.config; var options = that.config;
var newData = []; var newData = [];
layui.each(options.data, function(index, item){ layui.each(options.data, function(index, item){
// 解析格式 // 解析格式
item = (typeof options.parseData === 'function' item = (typeof options.parseData === 'function'
? options.parseData(item) ? options.parseData(item)
: item) || item; : item) || item;
newData.push(item = $.extend({}, item)) newData.push(item = $.extend({}, item))
layui.each(options.value, function(index2, item2){ layui.each(options.value, function(index2, item2){
if(item2 == item.value){ if(item2 == item.value){
item.selected = true; item.selected = true;
@ -323,19 +323,19 @@ layui.define(['laytpl', 'form'], function(exports){
}); });
callback && callback(item); callback && callback(item);
}); });
options.data = newData; options.data = newData;
return that; return that;
}; };
// 获得右侧面板数据 // 获得右侧面板数据
Class.prototype.getData = function(value){ Class.prototype.getData = function(value){
var that = this; var that = this;
var options = that.config; var options = that.config;
var selectedData = []; var selectedData = [];
that.setValue(); that.setValue();
layui.each(value || options.value, function(index, item){ layui.each(value || options.value, function(index, item){
layui.each(options.data, function(index2, item2){ layui.each(options.data, function(index2, item2){
delete item2.selected; delete item2.selected;
@ -406,15 +406,15 @@ layui.define(['laytpl', 'form'], function(exports){
Class.prototype.events = function(){ Class.prototype.events = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
// 左右复选框 // 左右复选框
that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function(){ that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function(){
var thisElemCheckbox = $(this).prev(); var thisElemCheckbox = $(this).prev();
var checked = thisElemCheckbox[0].checked; var checked = thisElemCheckbox[0].checked;
var thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA); var thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA);
if(thisElemCheckbox[0].disabled) return; if(thisElemCheckbox[0].disabled) return;
// 判断是否全选 // 判断是否全选
if(thisElemCheckbox.attr('lay-type') === 'all'){ if(thisElemCheckbox.attr('lay-type') === 'all'){
thisDataElem.find('input[type="checkbox"]').each(function(){ thisDataElem.find('input[type="checkbox"]').each(function(){
@ -458,7 +458,7 @@ layui.define(['laytpl', 'form'], function(exports){
if(othis.hasClass(DISABLED)) return; if(othis.hasClass(DISABLED)) return;
that.transfer(_index); that.transfer(_index);
}); });
// 搜索 // 搜索
that.laySearch.find('input').on('keyup', function(){ that.laySearch.find('input').on('keyup', function(){
var value = this.value; var value = this.value;
@ -483,25 +483,25 @@ layui.define(['laytpl', 'form'], function(exports){
}); });
that.renderCheckBtn(); that.renderCheckBtn();
// 无匹配数据视图 // 无匹配数据视图
var isNone = thisListElem.length === thisDataElem.children('li.'+ HIDE).length; var isNone = thisListElem.length === thisDataElem.children('li.'+ HIDE).length;
that.noneView(thisDataElem, isNone ? options.text.searchNone : ''); that.noneView(thisDataElem, isNone ? options.text.searchNone : '');
}); });
}; };
// 记录所有实例 // 记录所有实例
thisModule.that = {}; // 记录所有实例对象 thisModule.that = {}; // 记录所有实例对象
thisModule.config = {}; // 记录所有实例配置项 thisModule.config = {}; // 记录所有实例配置项
// 重载实例 // 重载实例
transfer.reload = function(id, options){ transfer.reload = function(id, options){
var that = thisModule.that[id]; var that = thisModule.that[id];
that.reload(options); that.reload(options);
return thisModule.call(that); return thisModule.call(that);
}; };
// 获得选中的数据（右侧面板） // 获得选中的数据（右侧面板）
transfer.getData = function(id){ transfer.getData = function(id){
var that = thisModule.that[id]; var that = thisModule.that[id];

136
src/modules/tree.js
View File

@ -4,12 +4,12 @@
layui.define(['form','util'], function(exports){ layui.define(['form','util'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var form = layui.form; var form = layui.form;
var layer = layui.layer; var layer = layui.layer;
var util = layui.util; var util = layui.util;
// 模块名 // 模块名
var MOD_NAME = 'tree'; var MOD_NAME = 'tree';
@ -30,7 +30,7 @@ layui.define(['form','util'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
}, },
// 事件 // 事件
on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
@ -42,10 +42,10 @@ layui.define(['form','util'], function(exports){
var that = this; var that = this;
var options = that.config; var options = that.config;
var id = options.id || that.index; var id = options.id || that.index;
thisModule.that[id] = that; // 记录当前实例对象 thisModule.that[id] = that; // 记录当前实例对象
thisModule.config[id] = options; // 记录当前实例配置项 thisModule.config[id] = options; // 记录当前实例配置项
return { return {
config: options, config: options,
// 重置实例 // 重置实例
@ -60,7 +60,7 @@ layui.define(['form','util'], function(exports){
} }
} }
}; };
// 获取当前实例配置项 // 获取当前实例配置项
var getThisModuleConfig = function(id){ var getThisModuleConfig = function(id){
var config = thisModule.config[id]; var config = thisModule.config[id];
@ -73,7 +73,7 @@ layui.define(['form','util'], function(exports){
var HIDE = 'layui-hide'; var HIDE = 'layui-hide';
var NONE = 'layui-none'; var NONE = 'layui-none';
var DISABLED = 'layui-disabled'; var DISABLED = 'layui-disabled';
var ELEM_VIEW = 'layui-tree'; var ELEM_VIEW = 'layui-tree';
var ELEM_SET = 'layui-tree-set'; var ELEM_SET = 'layui-tree-set';
var ICON_CLICK = 'layui-tree-iconClick'; var ICON_CLICK = 'layui-tree-iconClick';
@ -87,7 +87,7 @@ layui.define(['form','util'], function(exports){
var ELEM_LINE_SHORT = 'layui-tree-setLineShort'; var ELEM_LINE_SHORT = 'layui-tree-setLineShort';
var ELEM_SHOW = 'layui-tree-showLine'; var ELEM_SHOW = 'layui-tree-showLine';
var ELEM_EXTEND = 'layui-tree-lineExtend'; var ELEM_EXTEND = 'layui-tree-lineExtend';
// 构造器 // 构造器
var Class = function(options){ var Class = function(options){
var that = this; var that = this;
@ -99,28 +99,28 @@ layui.define(['form','util'], function(exports){
// 默认配置 // 默认配置
Class.prototype.config = { Class.prototype.config = {
data: [], // 数据 data: [], // 数据
showCheckbox: false, // 是否显示复选框 showCheckbox: false, // 是否显示复选框
showLine: true, // 是否开启连接线 showLine: true, // 是否开启连接线
accordion: false, // 是否开启手风琴模式 accordion: false, // 是否开启手风琴模式
onlyIconControl: false, // 是否仅允许节点左侧图标控制展开收缩 onlyIconControl: false, // 是否仅允许节点左侧图标控制展开收缩
isJump: false, // 是否允许点击节点时弹出新窗口跳转 isJump: false, // 是否允许点击节点时弹出新窗口跳转
edit: false, // 是否开启节点的操作图标 edit: false, // 是否开启节点的操作图标
text: { text: {
defaultNodeName: '未命名', // 节点默认名称 defaultNodeName: '未命名', // 节点默认名称
none: '无数据' // 数据为空时的文本提示 none: '无数据' // 数据为空时的文本提示
} }
}; };
// 重载实例 // 重载实例
Class.prototype.reload = function(options){ Class.prototype.reload = function(options){
var that = this; var that = this;
layui.each(options, function(key, item){ layui.each(options, function(key, item){
if(layui.type(item) === 'array') delete that.config[key]; if(layui.type(item) === 'array') delete that.config[key];
}); });
that.config = $.extend(true, {}, that.config, options); that.config = $.extend(true, {}, that.config, options);
that.render(); that.render();
}; };
@ -132,7 +132,7 @@ layui.define(['form','util'], function(exports){
// 初始化自定义字段名 // 初始化自定义字段名
options.customName = $.extend({}, tree.config.customName, options.customName); options.customName = $.extend({}, tree.config.customName, options.customName);
that.checkids = []; that.checkids = [];
var temp = $('<div class="layui-tree layui-border-box'+ (options.showCheckbox ? " layui-form" : "") + (options.showLine ? " layui-tree-line" : "") +'" lay-filter="LAY-tree-'+ that.index +'"></div>'); var temp = $('<div class="layui-tree layui-border-box'+ (options.showCheckbox ? " layui-form" : "") + (options.showLine ? " layui-tree-line" : "") +'" lay-filter="LAY-tree-'+ that.index +'"></div>');
@ -143,7 +143,7 @@ layui.define(['form','util'], function(exports){
// 索引 // 索引
that.key = options.id || that.index; that.key = options.id || that.index;
// 插入组件结构 // 插入组件结构
that.elem = temp; that.elem = temp;
that.elemNone = $('<div class="layui-tree-emptyText">'+ options.text.none +'</div>'); that.elemNone = $('<div class="layui-tree-emptyText">'+ options.text.none +'</div>');
@ -152,7 +152,7 @@ layui.define(['form','util'], function(exports){
if(that.elem.find('.layui-tree-set').length == 0){ if(that.elem.find('.layui-tree-set').length == 0){
return that.elem.append(that.elemNone); return that.elem.append(that.elemNone);
}; };
// 复选框渲染 // 复选框渲染
if(options.showCheckbox){ if(options.showCheckbox){
that.renderForm('checkbox'); that.renderForm('checkbox');
@ -169,7 +169,7 @@ layui.define(['form','util'], function(exports){
if(!othis.next()[0] && othis.parents('.layui-tree-pack').eq(1).hasClass('layui-tree-lineExtend')){ if(!othis.next()[0] && othis.parents('.layui-tree-pack').eq(1).hasClass('layui-tree-lineExtend')){
othis.addClass(ELEM_LINE_SHORT); othis.addClass(ELEM_LINE_SHORT);
}; };
// 没有下一个节点 外层最后一个 // 没有下一个节点 外层最后一个
if(!othis.next()[0] && !othis.parents('.layui-tree-set').eq(0).next()[0]){ if(!othis.next()[0] && !othis.parents('.layui-tree-set').eq(0).next()[0]){
othis.addClass(ELEM_LINE_SHORT); othis.addClass(ELEM_LINE_SHORT);
@ -178,7 +178,7 @@ layui.define(['form','util'], function(exports){
that.events(); that.events();
}; };
// 渲染表单 // 渲染表单
Class.prototype.renderForm = function(type){ Class.prototype.renderForm = function(type){
form.render(type, 'LAY-tree-'+ this.index); form.render(type, 'LAY-tree-'+ this.index);
@ -210,12 +210,12 @@ layui.define(['form','util'], function(exports){
return '<span class="layui-tree-iconClick"><i class="layui-tree-iconArrow '+ (hasChild ? "": HIDE) +'"></i></span>'; return '<span class="layui-tree-iconClick"><i class="layui-tree-iconArrow '+ (hasChild ? "": HIDE) +'"></i></span>';
}; };
}() }()
// 复选框 // 复选框
,function(){ ,function(){
return options.showCheckbox ? '<input type="checkbox" name="'+ (item.field || ('layuiTreeCheck_'+ item[customName.id])) +'" same="layuiTreeCheck" lay-skin="primary" '+ (item.disabled ? "disabled" : "") +' value="'+ item[customName.id] +'">' : ''; return options.showCheckbox ? '<input type="checkbox" name="'+ (item.field || ('layuiTreeCheck_'+ item[customName.id])) +'" same="layuiTreeCheck" lay-skin="primary" '+ (item.disabled ? "disabled" : "") +' value="'+ item[customName.id] +'">' : '';
}() }()
// 节点 // 节点
,function(){ ,function(){
if(options.isJump && item.href){ if(options.isJump && item.href){
@ -225,21 +225,21 @@ layui.define(['form','util'], function(exports){
} }
}() }()
,'</div>' ,'</div>'
// 节点操作图标 // 节点操作图标
,function(){ ,function(){
if(!options.edit) return ''; if(!options.edit) return '';
var editIcon = { var editIcon = {
add: '<i class="layui-icon layui-icon-add-1" data-type="add"></i>' add: '<i class="layui-icon layui-icon-add-1" data-type="add"></i>'
,update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>' ,update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>'
,del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>' ,del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>'
}, arr = ['<div class="layui-btn-group layui-tree-btnGroup">']; }, arr = ['<div class="layui-btn-group layui-tree-btnGroup">'];
if(options.edit === true){ if(options.edit === true){
options.edit = ['update', 'del'] options.edit = ['update', 'del']
} }
if(typeof options.edit === 'object'){ if(typeof options.edit === 'object'){
layui.each(options.edit, function(i, val){ layui.each(options.edit, function(i, val){
arr.push(editIcon[val] || '') arr.push(editIcon[val] || '')
@ -256,12 +256,12 @@ layui.define(['form','util'], function(exports){
}; };
elem.append(entryDiv); elem.append(entryDiv);
// 若有前置节点，前置节点加连接线 // 若有前置节点，前置节点加连接线
if(entryDiv.prev('.'+ELEM_SET)[0]){ if(entryDiv.prev('.'+ELEM_SET)[0]){
entryDiv.prev().children('.layui-tree-pack').addClass('layui-tree-showLine'); entryDiv.prev().children('.layui-tree-pack').addClass('layui-tree-showLine');
}; };
// 若无子节点，则父节点加延伸线 // 若无子节点，则父节点加延伸线
if(!hasChild){ if(!hasChild){
entryDiv.parent('.layui-tree-pack').addClass('layui-tree-lineExtend'); entryDiv.parent('.layui-tree-pack').addClass('layui-tree-lineExtend');
@ -269,16 +269,16 @@ layui.define(['form','util'], function(exports){
// 展开节点操作 // 展开节点操作
that.spread(entryDiv, item); that.spread(entryDiv, item);
// 选择框 // 选择框
if(options.showCheckbox){ if(options.showCheckbox){
item.checked && that.checkids.push(item[customName.id]); item.checked && that.checkids.push(item[customName.id]);
that.checkClick(entryDiv, item); that.checkClick(entryDiv, item);
} }
// 操作节点 // 操作节点
options.edit && that.operate(entryDiv, item); options.edit && that.operate(entryDiv, item);
}); });
}; };
@ -293,7 +293,7 @@ layui.define(['form','util'], function(exports){
var elemText = entry.find('.'+ ELEM_TEXT); var elemText = entry.find('.'+ ELEM_TEXT);
var touchOpen = options.onlyIconControl ? elemIcon : elemMain; // 判断展开通过节点还是箭头图标 var touchOpen = options.onlyIconControl ? elemIcon : elemMain; // 判断展开通过节点还是箭头图标
var state = ''; var state = '';
// 展开收缩 // 展开收缩
touchOpen.on('click', function(e){ touchOpen.on('click', function(e){
var packCont = elem.children('.'+ELEM_PACK) var packCont = elem.children('.'+ELEM_PACK)
@ -306,7 +306,7 @@ layui.define(['form','util'], function(exports){
if(elem.hasClass(ELEM_SPREAD)){ if(elem.hasClass(ELEM_SPREAD)){
elem.removeClass(ELEM_SPREAD); elem.removeClass(ELEM_SPREAD);
packCont.slideUp(200); packCont.slideUp(200);
iconClick.removeClass(ICON_SUB).addClass(ICON_ADD); iconClick.removeClass(ICON_SUB).addClass(ICON_ADD);
that.updateFieldValue(item, 'spread', false); that.updateFieldValue(item, 'spread', false);
}else{ }else{
elem.addClass(ELEM_SPREAD); elem.addClass(ELEM_SPREAD);
@ -324,14 +324,14 @@ layui.define(['form','util'], function(exports){
}; };
}; };
}); });
// 点击回调 // 点击回调
elemText.on('click', function(){ elemText.on('click', function(){
var othis = $(this); var othis = $(this);
// 判断是否禁用状态 // 判断是否禁用状态
if(othis.hasClass(DISABLED)) return; if(othis.hasClass(DISABLED)) return;
// 判断展开收缩状态 // 判断展开收缩状态
if(elem.hasClass(ELEM_SPREAD)){ if(elem.hasClass(ELEM_SPREAD)){
state = options.onlyIconControl ? 'open' : 'close'; state = options.onlyIconControl ? 'open' : 'close';
@ -343,7 +343,7 @@ layui.define(['form','util'], function(exports){
if(elemCheckbox[0]){ if(elemCheckbox[0]){
that.updateFieldValue(item, 'checked', elemCheckbox.prop('checked')); that.updateFieldValue(item, 'checked', elemCheckbox.prop('checked'));
} }
// 点击产生的回调 // 点击产生的回调
options.click && options.click({ options.click && options.click({
elem: elem, elem: elem,
@ -357,14 +357,14 @@ layui.define(['form','util'], function(exports){
Class.prototype.updateFieldValue = function(obj, field, value){ Class.prototype.updateFieldValue = function(obj, field, value){
if(field in obj) obj[field] = value; if(field in obj) obj[field] = value;
}; };
// 计算复选框选中状态 // 计算复选框选中状态
Class.prototype.setCheckbox = function(elem, item, elemCheckbox){ Class.prototype.setCheckbox = function(elem, item, elemCheckbox){
var that = this; var that = this;
var options = that.config; var options = that.config;
var customName = options.customName; var customName = options.customName;
var checked = elemCheckbox.prop('checked'); var checked = elemCheckbox.prop('checked');
if(elemCheckbox.prop('disabled')) return; if(elemCheckbox.prop('disabled')) return;
// 同步子节点选中状态 // 同步子节点选中状态
@ -397,38 +397,38 @@ layui.define(['form','util'], function(exports){
state = true; state = true;
} }
}); });
// 如果兄弟子孙节点全部未选中，则父节点也应为非选中状态 // 如果兄弟子孙节点全部未选中，则父节点也应为非选中状态
state || parentCheckbox.prop('checked', false); state || parentCheckbox.prop('checked', false);
} }
// 向父节点递归 // 向父节点递归
setParentsChecked(parentNodeElem); setParentsChecked(parentNodeElem);
}; };
setParentsChecked(elem); setParentsChecked(elem);
that.renderForm('checkbox'); that.renderForm('checkbox');
}; };
// 复选框选择 // 复选框选择
Class.prototype.checkClick = function(elem, item){ Class.prototype.checkClick = function(elem, item){
var that = this; var that = this;
var options = that.config; var options = that.config;
var entry = elem.children('.'+ ELEM_ENTRY); var entry = elem.children('.'+ ELEM_ENTRY);
var elemMain = entry.children('.'+ ELEM_MAIN); var elemMain = entry.children('.'+ ELEM_MAIN);
// 点击复选框 // 点击复选框
elemMain.on('click', 'input[same="layuiTreeCheck"]+', function(e){ elemMain.on('click', 'input[same="layuiTreeCheck"]+', function(e){
layui.stope(e); // 阻止点击节点事件 layui.stope(e); // 阻止点击节点事件
var elemCheckbox = $(this).prev(); var elemCheckbox = $(this).prev();
var checked = elemCheckbox.prop('checked'); var checked = elemCheckbox.prop('checked');
if(elemCheckbox.prop('disabled')) return; if(elemCheckbox.prop('disabled')) return;
that.setCheckbox(elem, item, elemCheckbox); that.setCheckbox(elem, item, elemCheckbox);
that.updateFieldValue(item, 'checked', checked); that.updateFieldValue(item, 'checked', checked);
@ -482,7 +482,7 @@ layui.define(['form','util'], function(exports){
obj[customName.title] = options.text.defaultNodeName; obj[customName.title] = options.text.defaultNodeName;
obj[customName.id] = key; obj[customName.id] = key;
that.tree(elem.children('.'+ELEM_PACK), [obj]); that.tree(elem.children('.'+ELEM_PACK), [obj]);
// 放在新增后面，因为要对元素进行操作 // 放在新增后面，因为要对元素进行操作
if(options.showLine){ if(options.showLine){
// 节点本身无子节点 // 节点本身无子节点
@ -540,7 +540,7 @@ layui.define(['form','util'], function(exports){
packLast.find('input[same="layuiTreeCheck"]')[0].checked = true; packLast.find('input[same="layuiTreeCheck"]')[0].checked = true;
}; };
that.renderForm('checkbox'); that.renderForm('checkbox');
// 修改 // 修改
} else if(type == 'update') { } else if(type == 'update') {
var text = elemMain.children('.'+ ELEM_TEXT).html(); var text = elemMain.children('.'+ ELEM_TEXT).html();
@ -555,10 +555,10 @@ layui.define(['form','util'], function(exports){
textNew = textNew ? textNew : options.text.defaultNodeName; textNew = textNew ? textNew : options.text.defaultNodeName;
input.remove(); input.remove();
elemMain.children('.'+ ELEM_TEXT).html(textNew); elemMain.children('.'+ ELEM_TEXT).html(textNew);
// 同步数据 // 同步数据
returnObj.data[customName.title] = textNew; returnObj.data[customName.title] = textNew;
// 节点修改的回调 // 节点修改的回调
options.operate && options.operate(returnObj); options.operate && options.operate(returnObj);
}; };
@ -579,9 +579,9 @@ layui.define(['form','util'], function(exports){
layer.confirm('确认删除该节点 "<span style="color: #999;">'+ (item[customName.title] || '') +'</span>" 吗？', function(index){ layer.confirm('确认删除该节点 "<span style="color: #999;">'+ (item[customName.title] || '') +'</span>" 吗？', function(index){
options.operate && options.operate(returnObj); // 节点删除的回调 options.operate && options.operate(returnObj); // 节点删除的回调
returnObj.status = 'remove'; // 标注节点删除 returnObj.status = 'remove'; // 标注节点删除
layer.close(index); layer.close(index);
// 若删除最后一个，显示空数据提示 // 若删除最后一个，显示空数据提示
if(!elem.prev('.'+ELEM_SET)[0] && !elem.next('.'+ELEM_SET)[0] && !elem.parent('.'+ELEM_PACK)[0]){ if(!elem.prev('.'+ELEM_SET)[0] && !elem.next('.'+ELEM_SET)[0] && !elem.parent('.'+ELEM_PACK)[0]){
elem.remove(); elem.remove();
@ -665,7 +665,7 @@ layui.define(['form','util'], function(exports){
}; };
}; };
}; };
} else { } else {
// 若无兄弟节点 // 若无兄弟节点
var prevDiv = elem.parent('.'+ELEM_PACK).prev(); var prevDiv = elem.parent('.'+ELEM_PACK).prev();
@ -693,7 +693,7 @@ layui.define(['form','util'], function(exports){
elem.remove(); elem.remove();
}); });
}; };
}); });
}; };
@ -703,10 +703,10 @@ layui.define(['form','util'], function(exports){
var that = this; var that = this;
var options = that.config; var options = that.config;
var checkWarp = that.elem.find('.layui-tree-checkedFirst'); var checkWarp = that.elem.find('.layui-tree-checkedFirst');
// 初始选中 // 初始选中
that.setChecked(that.checkids); that.setChecked(that.checkids);
// 搜索 // 搜索
that.elem.find('.layui-tree-search').on('keyup', function(){ that.elem.find('.layui-tree-search').on('keyup', function(){
var input = $(this); var input = $(this);
@ -720,7 +720,7 @@ layui.define(['form','util'], function(exports){
// 若值匹配，加一个类以作标识 // 若值匹配，加一个类以作标识
if($(this).html().indexOf(val) != -1){ if($(this).html().indexOf(val) != -1){
arr.push($(this).parent()); arr.push($(this).parent());
var select = function(div){ var select = function(div){
div.addClass('layui-tree-searchShow'); div.addClass('layui-tree-searchShow');
// 向上父节点渲染 // 向上父节点渲染
@ -766,12 +766,12 @@ layui.define(['form','util'], function(exports){
var customName = options.customName; var customName = options.customName;
var checkId = []; var checkId = [];
var checkData = []; var checkData = [];
// 遍历节点找到选中索引 // 遍历节点找到选中索引
that.elem.find('.layui-form-checked').each(function(){ that.elem.find('.layui-form-checked').each(function(){
checkId.push($(this).prev()[0].value); checkId.push($(this).prev()[0].value);
}); });
// 遍历节点 // 遍历节点
var eachNodes = function(data, checkNode){ var eachNodes = function(data, checkNode){
layui.each(data, function(index, item){ layui.each(data, function(index, item){
@ -783,7 +783,7 @@ layui.define(['form','util'], function(exports){
delete cloneItem[customName.children]; delete cloneItem[customName.children];
checkNode.push(cloneItem); checkNode.push(cloneItem);
if(item[customName.children]){ if(item[customName.children]){
cloneItem[customName.children] = []; cloneItem[customName.children] = [];
eachNodes(item[customName.children], cloneItem[customName.children]); eachNodes(item[customName.children], cloneItem[customName.children]);
@ -795,7 +795,7 @@ layui.define(['form','util'], function(exports){
}; };
eachNodes($.extend({}, options.data), checkData); eachNodes($.extend({}, options.data), checkData);
return checkData; return checkData;
}; };
@ -809,7 +809,7 @@ layui.define(['form','util'], function(exports){
var thisId = $(this).data('id'); var thisId = $(this).data('id');
var input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]'); var input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]');
var reInput = input.next(); var reInput = input.next();
// 若返回数字 // 若返回数字
if(typeof checkedId === 'number'){ if(typeof checkedId === 'number'){
if(thisId.toString() == checkedId.toString()){ if(thisId.toString() == checkedId.toString()){
@ -818,7 +818,7 @@ layui.define(['form','util'], function(exports){
}; };
return false; return false;
}; };
} }
// 若返回数组 // 若返回数组
else if(typeof checkedId === 'object'){ else if(typeof checkedId === 'object'){
layui.each(checkedId, function(index, value){ layui.each(checkedId, function(index, value){
@ -834,27 +834,27 @@ layui.define(['form','util'], function(exports){
// 记录所有实例 // 记录所有实例
thisModule.that = {}; // 记录所有实例对象 thisModule.that = {}; // 记录所有实例对象
thisModule.config = {}; // 记录所有实例配置项 thisModule.config = {}; // 记录所有实例配置项
// 重载实例 // 重载实例
tree.reload = function(id, options){ tree.reload = function(id, options){
var that = thisModule.that[id]; var that = thisModule.that[id];
that.reload(options); that.reload(options);
return thisModule.call(that); return thisModule.call(that);
}; };
// 获得选中的节点数据 // 获得选中的节点数据
tree.getChecked = function(id){ tree.getChecked = function(id){
var that = thisModule.that[id]; var that = thisModule.that[id];
return that.getChecked(); return that.getChecked();
}; };
// 设置选中节点 // 设置选中节点
tree.setChecked = function(id, checkedId){ tree.setChecked = function(id, checkedId){
var that = thisModule.that[id]; var that = thisModule.that[id];
return that.setChecked(checkedId); return that.setChecked(checkedId);
}; };
// 核心入口 // 核心入口
tree.render = function(options){ tree.render = function(options){
var inst = new Class(options); var inst = new Class(options);

18
src/modules/treeTable.js
View File

@ -387,7 +387,7 @@ layui.define(['table'], function (exports) {
layui.each(tableData, function (i1, item1) { layui.each(tableData, function (i1, item1) {
var dataIndex = (parentIndex ? parentIndex + '-' : '') + i1; var dataIndex = (parentIndex ? parentIndex + '-' : '') + i1;
var dataNew = $.extend({}, item1); var dataNew = $.extend({}, item1);
dataNew[pIdKey] = typeof item1[pIdKey] !== 'undefined' ? item1[pIdKey] : parentId; dataNew[pIdKey] = typeof item1[pIdKey] !== 'undefined' ? item1[pIdKey] : parentId;
flat.push(dataNew); flat.push(dataNew);
flat = flat.concat(that.treeToFlat(item1[childrenKey], item1[customName.id], dataIndex)); flat = flat.concat(that.treeToFlat(item1[childrenKey], item1[customName.id], dataIndex));
@ -1028,7 +1028,7 @@ layui.define(['table'], function (exports) {
// 处理节点图标 // 处理节点图标
if(treeOptions.view.showIcon){ if(treeOptions.view.showIcon){
var nodeIconElem = scopeEl.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom)'); var nodeIconElem = scopeEl.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom)');
var nodeIcon = isParent var nodeIcon = isParent
? (isExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose) ? (isExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose)
: treeOptions.view.iconLeaf; : treeOptions.view.iconLeaf;
@ -1373,7 +1373,7 @@ layui.define(['table'], function (exports) {
indexArr.push('tr[lay-data-index="' + delNodeDataIndex + '"]'); indexArr.push('tr[lay-data-index="' + delNodeDataIndex + '"]');
// 删除临时 key // 删除临时 key
if(delNodeDataIndex.indexOf('-') !== -1){ if(delNodeDataIndex.indexOf('-') !== -1){
delete tableCache[delNodeDataIndex]; delete tableCache[delNodeDataIndex];
} }
}) })
@ -1424,7 +1424,7 @@ layui.define(['table'], function (exports) {
scopeEl: trEl, scopeEl: trEl,
isExpand: nodeP[LAY_EXPAND], isExpand: nodeP[LAY_EXPAND],
isParent: nodeP[isParentKey], isParent: nodeP[isParentKey],
}); });
} }
// 重新适配尺寸 // 重新适配尺寸
@ -1589,7 +1589,7 @@ layui.define(['table'], function (exports) {
scopeEl: trEl, scopeEl: trEl,
isExpand: parentNode[LAY_EXPAND], isExpand: parentNode[LAY_EXPAND],
isParent: parentNode[isParentKey], isParent: parentNode[isParentKey],
}); });
} }
treeTable.resize(id); treeTable.resize(id);
if (focus) { if (focus) {
@ -1724,7 +1724,7 @@ layui.define(['table'], function (exports) {
var index = tr.data('index'); var index = tr.data('index');
var tableViewElem = options.elem.next(); var tableViewElem = options.elem.next();
tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 主体行 tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 主体行
// 右侧固定行 // 右侧固定行
@ -1760,7 +1760,7 @@ layui.define(['table'], function (exports) {
// 标记父节点行背景色 // 标记父节点行背景色
that.setRowCheckedClass(checkboxElem.closest('tr'), checked); that.setRowCheckedClass(checkboxElem.closest('tr'), checked);
// 设置原始复选框 checked 属性值并渲染 // 设置原始复选框 checked 属性值并渲染
checkboxElem.prop({ checkboxElem.prop({
checked: checked, checked: checked,
@ -1792,7 +1792,7 @@ layui.define(['table'], function (exports) {
}else{ }else{
isAll = false; isAll = false;
} }
isIndeterminate = isIndeterminate && !isAll; isIndeterminate = isIndeterminate && !isAll;
tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({ tableView.find('input[name="layTableCheckbox"][lay-filter="layTableAllChoose"]').prop({
'checked': isAll, 'checked': isAll,
@ -1945,7 +1945,7 @@ layui.define(['table'], function (exports) {
// 找到父节点，然后判断父节点的子节点是否全部选中 // 找到父节点，然后判断父节点的子节点是否全部选中
trDataP = that.getNodeDataByIndex(trData[LAY_PARENT_INDEX]); trDataP = that.getNodeDataByIndex(trData[LAY_PARENT_INDEX]);
} }
return that.updateCheckStatus(trDataP, checked); return that.updateCheckStatus(trDataP, checked);
} }
} }

134
src/modules/upload.js
View File

@ -2,10 +2,10 @@
* upload * upload
* 上传组件 * 上传组件
*/ */
layui.define(['lay', 'layer'], function(exports){ layui.define(['lay', 'layer'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var lay = layui.lay; var lay = layui.lay;
var layer = layui.layer; var layer = layui.layer;
@ -30,7 +30,7 @@ layui.define(['lay', 'layer'], function(exports){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
} }
}; };
// 操作当前实例 // 操作当前实例
var thisModule = function(){ var thisModule = function(){
var that = this; var that = this;
@ -49,21 +49,21 @@ layui.define(['lay', 'layer'], function(exports){
config: that.config config: that.config
} }
}; };
// 字符常量 // 字符常量
var ELEM = 'layui-upload'; var ELEM = 'layui-upload';
var THIS = 'layui-this'; var THIS = 'layui-this';
var SHOW = 'layui-show'; var SHOW = 'layui-show';
var HIDE = 'layui-hide'; var HIDE = 'layui-hide';
var DISABLED = 'layui-disabled'; var DISABLED = 'layui-disabled';
var ELEM_FILE = 'layui-upload-file'; var ELEM_FILE = 'layui-upload-file';
var ELEM_FORM = 'layui-upload-form'; var ELEM_FORM = 'layui-upload-form';
var ELEM_IFRAME = 'layui-upload-iframe'; var ELEM_IFRAME = 'layui-upload-iframe';
var ELEM_CHOOSE = 'layui-upload-choose'; var ELEM_CHOOSE = 'layui-upload-choose';
var ELEM_DRAG = 'layui-upload-drag'; var ELEM_DRAG = 'layui-upload-drag';
var UPLOADING = 'UPLOADING'; var UPLOADING = 'UPLOADING';
// 构造器 // 构造器
var Class = function(options){ var Class = function(options){
var that = this; var that = this;
@ -71,7 +71,7 @@ layui.define(['lay', 'layer'], function(exports){
that.config = $.extend({}, that.config, upload.config, options); that.config = $.extend({}, that.config, upload.config, options);
that.render(); that.render();
}; };
// 默认配置 // 默认配置
Class.prototype.config = { Class.prototype.config = {
accept: 'images', // 允许上传的文件类型：images/file/video/audio accept: 'images', // 允许上传的文件类型：images/file/video/audio
@ -104,7 +104,7 @@ layui.define(['lay', 'layer'], function(exports){
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
that.render(true); that.render(true);
}; };
// 初始渲染 // 初始渲染
Class.prototype.render = function(rerender){ Class.prototype.render = function(rerender){
var that = this; var that = this;
@ -145,38 +145,38 @@ layui.define(['lay', 'layer'], function(exports){
that.file(); that.file();
that.events(); that.events();
}; };
//追加文件域 //追加文件域
Class.prototype.file = function(){ Class.prototype.file = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemFile = that.elemFile = $([ var elemFile = that.elemFile = $([
'<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"' '<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"'
,(options.multiple ? ' multiple' : '') ,(options.multiple ? ' multiple' : '')
,'>' ,'>'
].join('')); ].join(''));
var next = options.elem.next(); var next = options.elem.next();
if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){ if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){
next.remove(); next.remove();
} }
//包裹ie8/9容器 //包裹ie8/9容器
if(device.ie && device.ie < 10){ if(device.ie && device.ie < 10){
options.elem.wrap('<div class="layui-upload-wrap"></div>'); options.elem.wrap('<div class="layui-upload-wrap"></div>');
} }
that.isFile() ? ( that.isFile() ? (
that.elemFile = options.elem, that.elemFile = options.elem,
options.field = options.elem[0].name options.field = options.elem[0].name
) : options.elem.after(elemFile); ) : options.elem.after(elemFile);
//初始化ie8/9的Form域 //初始化ie8/9的Form域
if(device.ie && device.ie < 10){ if(device.ie && device.ie < 10){
that.initIE(); that.initIE();
} }
}; };
//ie8-9初始化 //ie8-9初始化
Class.prototype.initIE = function(){ Class.prototype.initIE = function(){
var that = this; var that = this;
@ -184,14 +184,14 @@ layui.define(['lay', 'layer'], function(exports){
var iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>'); var iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>');
var elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">' var elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">'
,'</form>'].join('')); ,'</form>'].join(''));
//插入iframe //插入iframe
$('#'+ ELEM_IFRAME)[0] || $('body').append(iframe); $('#'+ ELEM_IFRAME)[0] || $('body').append(iframe);
//包裹文件域 //包裹文件域
if(!options.elem.next().hasClass(ELEM_FORM)){ if(!options.elem.next().hasClass(ELEM_FORM)){
that.elemFile.wrap(elemForm); that.elemFile.wrap(elemForm);
//追加额外的参数 //追加额外的参数
options.elem.next('.'+ ELEM_FORM).append(function(){ options.elem.next('.'+ ELEM_FORM).append(function(){
var arr = []; var arr = [];
@ -203,7 +203,7 @@ layui.define(['lay', 'layer'], function(exports){
}()); }());
} }
}; };
//异常提示 //异常提示
Class.prototype.msg = function(content){ Class.prototype.msg = function(content){
return layer.msg(content, { return layer.msg(content, {
@ -211,28 +211,28 @@ layui.define(['lay', 'layer'], function(exports){
shift: 6 shift: 6
}); });
}; };
//判断绑定元素是否为文件域本身 //判断绑定元素是否为文件域本身
Class.prototype.isFile = function(){ Class.prototype.isFile = function(){
var elem = this.config.elem[0]; var elem = this.config.elem[0];
if(!elem) return; if(!elem) return;
return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file' return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file'
} }
//预读图片信息 //预读图片信息
Class.prototype.preview = function(callback){ Class.prototype.preview = function(callback){
var that = this; var that = this;
if(window.FileReader){ if(window.FileReader){
layui.each(that.chooseFiles, function(index, file){ layui.each(that.chooseFiles, function(index, file){
var reader = new FileReader(); var reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function(){ reader.onload = function(){
callback && callback(index, file, this.result); callback && callback(index, file, this.result);
} }
}); });
} }
}; };
// 执行上传 // 执行上传
Class.prototype.upload = function(files, type){ Class.prototype.upload = function(files, type){
var that = this; var that = this;
@ -244,7 +244,7 @@ layui.define(['lay', 'layer'], function(exports){
var getFiles = function(){ var getFiles = function(){
return files || that.files || that.chooseFiles || elemFile.files; return files || that.files || that.chooseFiles || elemFile.files;
}; };
// 高级浏览器处理方式，支持跨域 // 高级浏览器处理方式，支持跨域
var ajaxSend = function(){ var ajaxSend = function(){
var successful = 0; var successful = 0;
@ -279,7 +279,7 @@ layui.define(['lay', 'layer'], function(exports){
// 追加额外的参数 // 追加额外的参数
layui.each(options.data, function(key, value){ layui.each(options.data, function(key, value){
value = typeof value === 'function' value = typeof value === 'function'
? sets.unified ? value() : value(sets.index, sets.file) ? sets.unified ? value() : value(sets.index, sets.file)
: value; : value;
formData.append(key, value); formData.append(key, value);
@ -361,11 +361,11 @@ layui.define(['lay', 'layer'], function(exports){
}); });
} }
}; };
// 低版本 IE 处理方式，不支持跨域 // 低版本 IE 处理方式，不支持跨域
var iframeSend = function(){ var iframeSend = function(){
var iframe = $('#'+ ELEM_IFRAME); var iframe = $('#'+ ELEM_IFRAME);
that.elemFile.parent().submit(); that.elemFile.parent().submit();
// 获取响应信息 // 获取响应信息
@ -375,7 +375,7 @@ layui.define(['lay', 'layer'], function(exports){
try { try {
res = iframeBody.text(); res = iframeBody.text();
} catch(e) { } catch(e) {
that.msg(text['cross-domain']); that.msg(text['cross-domain']);
clearInterval(Class.timer); clearInterval(Class.timer);
error(); error();
} }
@ -384,7 +384,7 @@ layui.define(['lay', 'layer'], function(exports){
iframeBody.html(''); iframeBody.html('');
done(0, res); done(0, res);
} }
}, 30); }, 30);
}; };
// 强制返回的数据格式 // 强制返回的数据格式
@ -412,7 +412,7 @@ layui.define(['lay', 'layer'], function(exports){
var done = function(index, res){ var done = function(index, res){
that.elemFile.next('.'+ ELEM_CHOOSE).remove(); that.elemFile.next('.'+ ELEM_CHOOSE).remove();
elemFile.value = ''; elemFile.value = '';
var convert = forceConvert(res); var convert = forceConvert(res);
switch(convert.status) { switch(convert.status) {
@ -422,12 +422,12 @@ layui.define(['lay', 'layer'], function(exports){
case "FORMAT_ERROR": case "FORMAT_ERROR":
return; return;
} }
typeof options.done === 'function' && options.done(res, index || 0, function(files){ typeof options.done === 'function' && options.done(res, index || 0, function(files){
that.upload(files); that.upload(files);
}); });
}; };
// 统一网络异常回调 // 统一网络异常回调
var error = function(index, res, xhr){ var error = function(index, res, xhr){
if(options.auto){ if(options.auto){
@ -448,7 +448,7 @@ layui.define(['lay', 'layer'], function(exports){
that.upload(files); that.upload(files);
}, res, xhr); }, res, xhr);
}; };
var check; var check;
var exts = options.exts; var exts = options.exts;
var value = function(){ var value = function(){
@ -458,7 +458,7 @@ layui.define(['lay', 'layer'], function(exports){
}); });
return arr; return arr;
}(); }();
// 回调函数返回的参数 // 回调函数返回的参数
var args = { var args = {
// 预览 // 预览
@ -490,7 +490,7 @@ layui.define(['lay', 'layer'], function(exports){
return that.chooseFiles; return that.chooseFiles;
} }
}; };
// 提交上传 // 提交上传
var send = function(){ var send = function(){
var ready = function(){ var ready = function(){
@ -521,7 +521,7 @@ layui.define(['lay', 'layer'], function(exports){
ready(); ready();
} }
}; };
// 文件类型名称 // 文件类型名称
var typeName = ({ var typeName = ({
file: '文件', file: '文件',
@ -531,13 +531,13 @@ layui.define(['lay', 'layer'], function(exports){
})[options.accept] || '文件'; })[options.accept] || '文件';
// 校验文件格式 // 校验文件格式
value = value.length === 0 value = value.length === 0
? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '') ? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '')
: value; : value;
// 若文件域值为空 // 若文件域值为空
if (value.length === 0) return; if (value.length === 0) return;
// 根据文件类型校验 // 根据文件类型校验
switch(options.accept){ switch(options.accept){
case 'file': // 一般文件 case 'file': // 一般文件
@ -569,21 +569,21 @@ layui.define(['lay', 'layer'], function(exports){
}); });
break; break;
} }
// 校验失败提示 // 校验失败提示
if(check){ if(check){
that.msg(text['check-error'] || ('选择的'+ typeName +'中包含不支持的格式')); that.msg(text['check-error'] || ('选择的'+ typeName +'中包含不支持的格式'));
return elemFile.value = ''; return elemFile.value = '';
} }
// 选择文件的回调 // 选择文件的回调
if(type === 'choose' || options.auto){ if(type === 'choose' || options.auto){
options.choose && options.choose(args); options.choose && options.choose(args);
if(type === 'choose'){ if(type === 'choose'){
return; return;
} }
} }
// 检验文件数量 // 检验文件数量
that.fileLength = function(){ that.fileLength = function(){
var length = 0; var length = 0;
@ -593,20 +593,20 @@ layui.define(['lay', 'layer'], function(exports){
}); });
return length; return length;
}(); }();
if(options.number && that.fileLength > options.number){ if(options.number && that.fileLength > options.number){
return that.msg(typeof text['limit-number'] === 'function' return that.msg(typeof text['limit-number'] === 'function'
? text['limit-number'](options, that.fileLength) ? text['limit-number'](options, that.fileLength)
: ( : (
'同时最多只能上传: '+ options.number + ' 个文件' '同时最多只能上传: '+ options.number + ' 个文件'
+'<br>您当前已经选择了: '+ that.fileLength +' 个文件' +'<br>您当前已经选择了: '+ that.fileLength +' 个文件'
)); ));
} }
// 检验文件大小 // 检验文件大小
if(options.size > 0 && !(device.ie && device.ie < 10)){ if(options.size > 0 && !(device.ie && device.ie < 10)){
var limitSize; var limitSize;
layui.each(getFiles(), function(index, file){ layui.each(getFiles(), function(index, file){
if(file.size > 1024*options.size){ if(file.size > 1024*options.size){
var size = options.size/1024; var size = options.size/1024;
@ -615,19 +615,19 @@ layui.define(['lay', 'layer'], function(exports){
limitSize = size; limitSize = size;
} }
}); });
if(limitSize) return that.msg(typeof text['limit-size'] === 'function' if(limitSize) return that.msg(typeof text['limit-size'] === 'function'
? text['limit-size'](options, limitSize) ? text['limit-size'](options, limitSize)
: '文件大小不能超过 '+ limitSize); : '文件大小不能超过 '+ limitSize);
} }
send(); send();
}; };
//事件处理 //事件处理
Class.prototype.events = function(){ Class.prototype.events = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
// 设置当前选择的文件队列 // 设置当前选择的文件队列
var setChooseFile = function(files){ var setChooseFile = function(files){
that.chooseFiles = {}; that.chooseFiles = {};
@ -636,15 +636,15 @@ layui.define(['lay', 'layer'], function(exports){
that.chooseFiles[time + '-' + i] = item; that.chooseFiles[time + '-' + i] = item;
}); });
}; };
// 设置选择的文本 // 设置选择的文本
var setChooseText = function(files, filename){ var setChooseText = function(files, filename){
var elemFile = that.elemFile; var elemFile = that.elemFile;
var item = options.item ? options.item : options.elem; var item = options.item ? options.item : options.elem;
var value = files.length > 1 var value = files.length > 1
? files.length + '个文件' ? files.length + '个文件'
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || ''); : ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || '');
if(elemFile.next().hasClass(ELEM_CHOOSE)){ if(elemFile.next().hasClass(ELEM_CHOOSE)){
elemFile.next().remove(); elemFile.next().remove();
} }
@ -694,7 +694,7 @@ layui.define(['lay', 'layer'], function(exports){
return obj; return obj;
} }
/** /**
* 检查获取文件 * 检查获取文件
* @param {FileList} files * @param {FileList} files
@ -720,7 +720,7 @@ layui.define(['lay', 'layer'], function(exports){
that.config.item = othis; that.config.item = othis;
that.elemFile[0].click(); that.elemFile[0].click();
}); });
// 拖拽上传 // 拖拽上传
if(!(device.ie && device.ie < 10)){ if(!(device.ie && device.ie < 10)){
options.elem.off('upload.over').on('upload.over', function(){ options.elem.off('upload.over').on('upload.over', function(){
@ -734,14 +734,14 @@ layui.define(['lay', 'layer'], function(exports){
.off('upload.drop').on('upload.drop', function(e, param){ .off('upload.drop').on('upload.drop', function(e, param){
var othis = $(this); var othis = $(this);
var files = getFiles(param.originalEvent.dataTransfer.files); var files = getFiles(param.originalEvent.dataTransfer.files);
othis.removeAttr('lay-over'); othis.removeAttr('lay-over');
setChooseFile(files); setChooseFile(files);
options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传 options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
}); });
} }
// 文件选择 // 文件选择
that.elemFile.on('change', function(){ that.elemFile.on('change', function(){
var files = getFiles(this.files); var files = getFiles(this.files);
@ -752,7 +752,7 @@ layui.define(['lay', 'layer'], function(exports){
options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传 options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
}); });
// 手动触发上传 // 手动触发上传
options.bindAction.off('upload.action').on('upload.action', function(){ options.bindAction.off('upload.action').on('upload.action', function(){
that.upload(); that.upload();
@ -768,7 +768,7 @@ layui.define(['lay', 'layer'], function(exports){
if(that.isFile()) return; if(that.isFile()) return;
$(this).trigger('upload.start'); $(this).trigger('upload.start');
}); });
// 目标元素 drop 事件 // 目标元素 drop 事件
if(options.drag){ if(options.drag){
options.elem.on('dragover', function(e){ options.elem.on('dragover', function(e){
@ -781,12 +781,12 @@ layui.define(['lay', 'layer'], function(exports){
$(this).trigger('upload.drop', e); $(this).trigger('upload.drop', e);
}); });
} }
// 手动上传时触发上传的元素 click 事件 // 手动上传时触发上传的元素 click 事件
options.bindAction.on('click', function(){ options.bindAction.on('click', function(){
$(this).trigger('upload.action'); $(this).trigger('upload.action');
}); });
// 绑定元素索引 // 绑定元素索引
options.elem.data(MOD_INDEX, options.id); options.elem.data(MOD_INDEX, options.id);
}; };
@ -838,13 +838,13 @@ layui.define(['lay', 'layer'], function(exports){
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required'); if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required');
return that; return that;
}; };
// 核心入口 // 核心入口
upload.render = function(options){ upload.render = function(options){
var inst = new Class(options); var inst = new Class(options);
return thisModule.call(inst); return thisModule.call(inst);
}; };
exports(MOD_NAME, upload); exports(MOD_NAME, upload);
}); });