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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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