mirror of https://github.com/layui/layui
style: 清理代码多余空白符
parent
32916cc7da
commit
b94720dbdc
|
@ -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>
|
||||
|
|
|
@ -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"></i></button>
|
||||
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></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>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
.pipe(gulp.dest(dest));
|
||||
};
|
||||
</code></pre>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<p id="ref-1">REF-1</p>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: {},
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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('');
|
||||
show.removeClass(SHOW);
|
||||
}
|
||||
|
||||
|
||||
elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
|
||||
icon.html(isNone ? '' : '');
|
||||
|
||||
|
||||
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 ? '' : '') +'</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);
|
||||
});
|
||||
|
||||
|
|
|
@ -10978,4 +10978,4 @@ layui.define(function(exports){
|
|||
});
|
||||
|
||||
return jQuery;
|
||||
}));
|
||||
}));
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
@ -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 = {
|
||||
// 分页渲染
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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){
|
||||
|
|
|
@ -81,7 +81,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
// lay 函数可以处理 Selector,HTMLElement,JQuery 类型
|
||||
// 无效的 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){
|
||||
|
|
|
@ -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];
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue