theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
star 2018-05-05 16:59:53 +08:00
parent e181b13fa1
commit f23eb3752f
10 changed files with 169 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/flow.html
View File

@ -24,6 +24,7 @@ img{width: 500px; height: 300px;}
<div class="demo" style="height: 200px; overflow: auto;"> <div class="demo" style="height: 200px; overflow: auto;">
<img lay-src="http://s16.mogucdn.com/p2/160919/upload_493j665e50b0i0g8j61iie6f5aa5c_715x530.jpg"> <img lay-src="http://s16.mogucdn.com/p2/160919/upload_493j665e50b0i0g8j61iie6f5aa5c_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x530.jpg"> <img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x531.jpg">
<img lay-src="http://s10.mogucdn.com/p2/160918/oj_4hge1j47hl5ie0fljd6d07ha3kj2l_715x530.jpg"> <img lay-src="http://s10.mogucdn.com/p2/160918/oj_4hge1j47hl5ie0fljd6d07ha3kj2l_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160914/iz_2lcjk0lbl8la70448hj0jg0l8gde5_305x330.jpg"> <img lay-src="http://s7.mogucdn.com/p2/160914/iz_2lcjk0lbl8la70448hj0jg0l8gde5_305x330.jpg">
<img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg"> <img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg">

36
examples/form.html
View File

@ -18,11 +18,11 @@ body{padding: 10px;}
</head> </head>
<body> <body>
<form class="layui-form layui-form-pane1" action=""> <form class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">输入框</label> <label class="layui-form-label">输入框</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="xxx " autocomplete="off" class="layui-input"> <input type="text" name="xxx" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -60,7 +60,7 @@ body{padding: 10px;}
</div> </div>
</form> </form>
<form class="layui-form layui-form-pane1" action=""> <form class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">输入框</label> <label class="layui-form-label">输入框</label>
<div class="layui-input-block"> <div class="layui-input-block">
@ -102,9 +102,9 @@ body{padding: 10px;}
<div class="layui-input-block"> <div class="layui-input-block">
<select name="quiz" lay-verify="required" lay-verType="tips"> <select name="quiz" lay-verify="required" lay-verType="tips">
<option value="">请选择问题</option> <option value="">请选择问题</option>
<option value="你工作的第一个城市">你工作的第一个城市</option> <option value="0">你工作的第一个城市</option>
<option value="你的工号" disabled>你的工号</option> <option value="1" disabled>你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option> <option value="2">你最喜欢的老师</option>
</select> </select>
</div> </div>
</div> </div>
@ -114,11 +114,11 @@ body{padding: 10px;}
<select name="quiz" lay-filter="quiz"> <select name="quiz" lay-filter="quiz">
<option value="">请选择问题</option> <option value="">请选择问题</option>
<optgroup label="城市记忆"> <optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option> <option value="0">你工作的第一个城市</option>
</optgroup> </optgroup>
<optgroup label="学生时代"> <optgroup label="学生时代">
<option value="你的工号" disabled>你的工号</option> <option value="1" disabled>你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option> <option value="2">你最喜欢的老师</option>
</optgroup> </optgroup>
</select> </select>
</div> </div>
@ -131,7 +131,7 @@ body{padding: 10px;}
<select name="interest" lay-filter="interest"> <select name="interest" lay-filter="interest">
<option value=""></option> <option value=""></option>
<option value="0">写作</option> <option value="0">写作</option>
<option value="1" selected>阅读</option> <option value="1">阅读</option>
<option value="2">游戏</option> <option value="2">游戏</option>
<option value="3">音乐</option> <option value="3">音乐</option>
<option value="4">旅行</option> <option value="4">旅行</option>
@ -201,7 +201,7 @@ body{padding: 10px;}
<div class="layui-form-item layui-form-text"> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label> <label class="layui-form-label">请填写描述</label>
<div class="layui-input-block"> <div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea> <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -233,6 +233,20 @@ layui.use('form', function(){
,pass: [/(.+){6,12}$/, '密码必须6到12位'] ,pass: [/(.+){6,12}$/, '密码必须6到12位']
}); });
form.val('first',{
'xxx': '猪猪猪'
,'title': '测试'
,'phone': 18829264233
,'email': 2321582517
,'password': 123123
,'quiz': 2
,'interest': 3
,'like[write]': true
,'open': false
,'sex': '男'
,'desc': '一二三四一二三四'
})
//事件监听 //事件监听
form.on('select', function(data){ form.on('select', function(data){

4
examples/laydate.html
View File

@ -134,8 +134,10 @@ layui.use('laydate', function(){
elem: '#test2' elem: '#test2'
//,format: 'yyyy年MM月dd日' //,format: 'yyyy年MM月dd日'
//,value: new Date(1989,9,14) //,value: new Date(1989,9,14)
,isInitValue: true
,format: 'yyyyMMdd' ,format: 'yyyyMMdd'
,value: '20170910' ,value: '20170910'
//,max: 0 //,max: 0
//,min: '2016-10-14' //,min: '2016-10-14'
//,max: -1 //,max: -1
@ -237,6 +239,8 @@ layui.use('laydate', function(){
elem: '#test6-1' //指定元素 elem: '#test6-1' //指定元素
,type: 'datetime' ,type: 'datetime'
,theme: 'molv' ,theme: 'molv'
,value: 20180115
,isInitValue: true
//,range: true //,range: true
,trigger: 'click' ,trigger: 'click'
}); });

3
examples/laypage.html
View File

@ -105,7 +105,7 @@ layui.use(['laypage', 'layer'], function(){
elem: 'demo7' elem: 'demo7'
,count: 100 ,count: 100
//,groups: 0 //,groups: 0
,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip', ]
,jump: function(obj){ ,jump: function(obj){
console.log(obj) console.log(obj)
} }
@ -169,6 +169,7 @@ layui.use(['laypage', 'layer'], function(){
laypage.render({ laypage.render({
elem: 'demo9' elem: 'demo9'
,count: data.length ,count: data.length
,layout: ['prev', 'page', 'next', 'refresh', 'skip']
,jump: function(obj){ ,jump: function(obj){
//模拟渲染 //模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){ document.getElementById('biuuu_city_list').innerHTML = function(){

37
examples/table.html
View File

@ -166,8 +166,8 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</table> </table>
<script type="text/html" id="toolbarDemo"> <script type="text/html" id="toolbarDemo">
<i class="layui-icon">&#xe654;</i> <i class="layui-icon" data-type="add">&#xe654;</i>
<i class="layui-icon">&#xe640;</i> <i class="layui-icon" data-type="delete">&#xe640;</i>
</script> </script>
<script src="../src/layui.js" charset="utf-8"></script> <script src="../src/layui.js" charset="utf-8"></script>
@ -216,23 +216,34 @@ layui.use('table', function(){
,cellMinWidth: 80 ,cellMinWidth: 80
,cols: [[ ,cols: [[
{type:'numbers'} {type:'numbers'}
,{type: 'checkbox'} ,{type: 'radio'}
,{field:'id', title:'ID', unresize: true, sort: true} ,{field:'id', title:'ID', unresize: true, sort: true}
,{field:'username', title:'用户名', templet: '#usernameTpl'} ,{field:'username', title:'用户名', templet: '#usernameTpl'}
,{field:'email', title:'邮箱'} ,{field:'email', title:'邮箱', edit: 'select'}
,{field:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'} ,{field:'sex', title:'性别', edit: 'switch', templet: '#switchTpl', minWidth: 85, align:'center'}
,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'} ,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'}
,{field:'city', title:'城市'} ,{field:'city', title:'城市'}
]] ]]
}); });
//监听表格行点击
table.on('tr', function(obj){
console.log(obj)
});
//监听表格复选框选择 //监听表格复选框选择
table.on('checkbox(test)', function(obj){ table.on('checkbox(test)', function(obj){
console.log(obj) console.log(obj)
}); });
//监听表格单选框选择
table.on('radio(test2)', function(obj){
console.log(obj)
});
//监听单元格编辑 //监听单元格编辑
table.on('edit(test)', function(obj){ table.on('edit(test2)', function(obj){
var value = obj.value //得到修改后的值 var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值 ,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段 ,field = obj.field; //得到字段
@ -414,8 +425,20 @@ layui.use('table', function(){
limit: 3 limit: 3
}); });
} }
,add: function(){
table.addRow('test')
}
,delete: function(){
layer.confirm('确认删除吗？', function(index){
table.deleteRow('test')
layer.close(index);
});
}
}; };
$('i').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('.layui-btn').on('click', function(){ $('.layui-btn').on('click', function(){
var type = $(this).data('type'); var type = $(this).data('type');
active[type] ? active[type].call(this) : ''; active[type] ? active[type].call(this) : '';

11
src/css/layui.css
View File

@ -890,8 +890,11 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
.layui-laypage .layui-laypage-count, .layui-laypage .layui-laypage-count,
.layui-laypage .layui-laypage-limits, .layui-laypage .layui-laypage-limits,
.layui-laypage .layui-laypage-refresh,
.layui-laypage .layui-laypage-skip{margin-left: 10px; margin-right: 10px; padding: 0; border: none;} .layui-laypage .layui-laypage-skip{margin-left: 10px; margin-right: 10px; padding: 0; border: none;}
.layui-laypage .layui-laypage-limits{vertical-align: top;} .layui-laypage .layui-laypage-limits,
.layui-laypage .layui-laypage-refresh{vertical-align: top;}
.layui-laypage .layui-laypage-refresh i{font-size: 18px; cursor: pointer;}
.layui-laypage select{height: 22px; padding: 3px; border-radius: 2px; cursor: pointer;} .layui-laypage select{height: 22px; padding: 3px; border-radius: 2px; cursor: pointer;}
.layui-laypage .layui-laypage-skip{height: 30px; line-height: 30px; color: #999;} .layui-laypage .layui-laypage-skip{height: 30px; line-height: 30px; color: #999;}
.layui-laypage input, .layui-laypage button{height: 30px; line-height: 30px; border-radius: 2px; vertical-align: top; background-color: #fff; box-sizing: border-box;} .layui-laypage input, .layui-laypage button{height: 30px; line-height: 30px; border-radius: 2px; vertical-align: top; background-color: #fff; box-sizing: border-box;}
@ -972,10 +975,14 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;} .layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;}
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;} .layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;}
.layui-table-cell{height: 28px; line-height: 28px; padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;} .layui-table-cell{height: 28px; line-height: 28px; padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: -1px; vertical-align: middle;} .layui-table-cell .layui-form-checkbox[lay-skin="primary"],
.layui-table-cell .layui-form-radio[lay-skin="primary"]{top: -1px; vertical-align: middle;}
.layui-table-cell .layui-form-radio{padding-right: 0px}
.layui-table-cell .layui-form-radio>i{margin-right: 0px;}
.layui-table-cell .layui-table-link{color: #01AAED;} .layui-table-cell .layui-table-link{color: #01AAED;}
.laytable-cell-checkbox, .laytable-cell-checkbox,
.laytable-cell-radio,
.laytable-cell-space, .laytable-cell-space,
.laytable-cell-numbers{padding: 0; text-align: center;} .laytable-cell-numbers{padding: 0; text-align: center;}

72
src/lay/modules/form.js
View File

@ -68,6 +68,26 @@ layui.define('layer', function(exports){
Form.prototype.on = function(events, callback){ Form.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
}; };
//初始赋值
Form.prototype.val = function(filter, object){
var that = this
,formElem = $(ELEM + '[lay-filter="' + filter +'"]');
formElem.each(function(index, item){
var itemFrom = $(this);
layui.each(object, function(key, value){
var itemElem = itemFrom.find('[name="'+ key +'"]');
itemElem.val(value);
if(!itemElem[0]) return;
//如果有 checked 的内置属性，就改变 checked 属性的值
if('checked' in itemElem[0]){
itemElem[0].checked = value;
}
});
});
form.render(null, filter);
};
//表单控件渲染 //表单控件渲染
Form.prototype.render = function(type, filter){ Form.prototype.render = function(type, filter){
@ -96,7 +116,7 @@ layui.define('layer', function(exports){
,input = title.find('input') ,input = title.find('input')
,dl = reElem.find('dl') ,dl = reElem.find('dl')
,dds = dl.children('dd') ,dds = dl.children('dd')
,index = Number(select.val()? select.val(): -1) + 1 ;
if(disabled) return; if(disabled) return;
@ -106,7 +126,8 @@ layui.define('layer', function(exports){
,dlHeight = dl.outerHeight(); ,dlHeight = dl.outerHeight();
reElem.addClass(CLASS+'ed'); reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE); dds.removeClass(HIDE);
//确保没有选择的时候第一个也会有样式
dl.children('dd:eq('+index+')').addClass(THIS);
//上下定位识别 //上下定位识别
if(top + dlHeight > win.height() && top >= dlHeight){ if(top + dlHeight > win.height() && top >= dlHeight){
reElem.addClass(CLASS + 'up'); reElem.addClass(CLASS + 'up');
@ -153,8 +174,48 @@ layui.define('layer', function(exports){
//Tab键 //Tab键
if(keyCode === 9){ if(keyCode === 9){
hideDown(); hideDown();
} else if(keyCode === 13){ //回车键 }
//up 键
if(keyCode === 38){
e.preventDefault(); e.preventDefault();
index--;
// 如果是不可点击状态，则跳过
if(dl.children('dd:eq('+index+')').hasClass(DISABLED)) index--;
if(index < 0) index = 0;
dl.children('dd:eq('+index+')').addClass(THIS).siblings().removeClass(THIS);
}
//down 键
if(keyCode === 40){
e.preventDefault();
index++;
if(dl.children('dd:eq('+index+')').hasClass(DISABLED)) index++;
if(index > dds.length - 1) index = dds.length - 1;
dl.children('dd:eq('+index+')').addClass(THIS).siblings().removeClass(THIS);
}
//回车键
if(keyCode === 13){
e.preventDefault();
var othis = dl.children('dd:eq('+index+')')
,value = othis.attr('lay-value')
,filter = select.attr('lay-filter'); //获取过滤器
if(index === 0){
input.val('');
} else {
input.val(othis.text());
}
select.val(value).removeClass('layui-form-danger')
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
elem: select[0]
,value: value
,othis: reElem
});
hideDown(true);
} }
}); });
@ -212,16 +273,17 @@ layui.define('layer', function(exports){
dds.on('click', function(){ dds.on('click', function(){
var othis = $(this), value = othis.attr('lay-value'); var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); //获取过滤器 var filter = select.attr('lay-filter'); //获取过滤器
if(othis.hasClass(DISABLED)) return false; if(othis.hasClass(DISABLED)) return false;
if(othis.hasClass('layui-select-tips')){ if(othis.hasClass('layui-select-tips')){
input.val(''); input.val('');
index = 0;
} else { } else {
input.val(othis.text()); input.val(othis.text());
othis.addClass(THIS); othis.addClass(THIS);
index = Number(value) + 1;
} }
othis.siblings().removeClass(THIS); othis.siblings().removeClass(THIS);
select.val(value).removeClass('layui-form-danger') select.val(value).removeClass('layui-form-danger')
layui.event.call(this, MOD_NAME, 'select('+ filter +')', { layui.event.call(this, MOD_NAME, 'select('+ filter +')', {

5
src/lay/modules/laydate.js
View File

@ -321,7 +321,7 @@
//设置值 //设置值
LAY.prototype.val = function(value){ LAY.prototype.val = function(value){
return this.each(function(index, item){ return this.each(function(index, item){
item.value = value; item.value = value;
}); });
}; };
@ -377,6 +377,7 @@
,range: false //是否开启范围选择，即双控件 ,range: false //是否开启范围选择，即双控件
,format: 'yyyy-MM-dd' //默认日期格式 ,format: 'yyyy-MM-dd' //默认日期格式
,value: null //默认日期，支持传入new Date()，或者符合format参数设定的日期格式字符 ,value: null //默认日期，支持传入new Date()，或者符合format参数设定的日期格式字符
,isInitValue: false //用于控制是否自动向元素填充初始值（需配合 value 参数使用）
,min: '1900-1-1' //有效最小日期，年月日必须用“-”分割，时分秒必须用“:”分割。注意：它并不是遵循 format 设定的格式。 ,min: '1900-1-1' //有效最小日期，年月日必须用“-”分割，时分秒必须用“:”分割。注意：它并不是遵循 format 设定的格式。
,max: '2099-12-31' //有效最大日期，同上 ,max: '2099-12-31' //有效最大日期，同上
,trigger: 'focus' //呼出控件的事件 ,trigger: 'focus' //呼出控件的事件
@ -548,7 +549,7 @@
isStatic || that.events(); isStatic || that.events();
//默认赋值 //默认赋值
if(options.value){ if(options.value && options.isInitValue){
if(options.value.constructor === Date){ if(options.value.constructor === Date){
that.setValue(that.parse(0, that.systemDate(options.value))); that.setValue(that.parse(0, that.systemDate(options.value)));
} else { } else {

28
src/lay/modules/laypage.js
View File

@ -18,6 +18,7 @@ layui.define(function(exports){
//构造器 //构造器
,Class = function(options){ ,Class = function(options){
var that = this; var that = this;
that.config = options || {}; that.config = options || {};
that.config.index = ++laypage.index; that.config.index = ++laypage.index;
@ -75,7 +76,7 @@ layui.define(function(exports){
? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) ) ? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) )
: 1 : 1
//试图片段 //视图片段
,views = { ,views = {
//上一页 //上一页
prev: function(){ prev: function(){
@ -162,6 +163,9 @@ layui.define(function(exports){
return options.join('') +'</select></span>'; return options.join('') +'</select></span>';
}() }()
//刷新
,refresh: '<span class="layui-laypage-refresh"><i class="layui-icon">&#x1002;</i></span>'
//跳页区域 //跳页区域
,skip: function(){ ,skip: function(){
return ['<span class="layui-laypage-skip">&#x5230;&#x7B2C;' return ['<span class="layui-laypage-skip">&#x5230;&#x7B2C;'
@ -255,6 +259,24 @@ layui.define(function(exports){
}); });
}; };
//刷新当前页
Class.prototype.update = function(elem){
if(!elem) return;
var that = this
,config = that.config
,curr = config.curr
,spani = elem[tag]('i')[0];
if(spani){
laypage.on(spani, 'click', function(){
config.curr = curr;
that.render();
console.log(config.curr);
});
}
};
//渲染分页 //渲染分页
Class.prototype.render = function(load){ Class.prototype.render = function(load){
var that = this var that = this
@ -271,7 +293,7 @@ layui.define(function(exports){
doc[id](config.elem).innerHTML = view; doc[id](config.elem).innerHTML = view;
} }
} }
config.jump && config.jump(config, load); config.jump && config.jump(config, load);
var elem = doc[id]('layui-laypage-' + config.index); var elem = doc[id]('layui-laypage-' + config.index);
@ -282,6 +304,8 @@ layui.define(function(exports){
} }
that.skip(elem); that.skip(elem);
that.update(elem);
}; };
//外部接口 //外部接口

4
src/layui.js
View File

@ -277,11 +277,11 @@
} }
img.onload = function(){ img.onload = function(){
img.onload = null; img.onload = null;
callback(img); typeof callback === 'function' && callback(img);
}; };
img.onerror = function(e){ img.onerror = function(e){
img.onerror = null; img.onerror = null;
error(e); typeof error === 'function' && error(e);
}; };
}; };