Browse Source

Merge pull request #239 from star1029/master

merge 2.3
pull/247/head
贤心 7 years ago committed by GitHub
parent
commit
c767f39eb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      examples/flow.html
  2. 36
      examples/form.html
  3. 4
      examples/laydate.html
  4. 3
      examples/laypage.html
  5. 37
      examples/table.html
  6. 11
      src/css/layui.css
  7. 72
      src/lay/modules/form.js
  8. 5
      src/lay/modules/laydate.js
  9. 7
      src/lay/modules/laypage.js
  10. 4
      src/layui.js

1
examples/flow.html

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

36
examples/form.html

@ -18,11 +18,11 @@ body{padding: 10px;}
</head>
<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">
<label class="layui-form-label">输入框</label>
<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 class="layui-form-item">
@ -60,7 +60,7 @@ body{padding: 10px;}
</div>
</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">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
@ -102,9 +102,9 @@ body{padding: 10px;}
<div class="layui-input-block">
<select name="quiz" lay-verify="required" lay-verType="tips">
<option value="">请选择问题</option>
<option value="你工作的第一个城市">你工作的第一个城市</option>
<option value="你的工号" disabled>你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
<option value="0">你工作的第一个城市</option>
<option value="1" disabled>你的工号</option>
<option value="2">你最喜欢的老师</option>
</select>
</div>
</div>
@ -114,11 +114,11 @@ body{padding: 10px;}
<select name="quiz" lay-filter="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
<option value="0">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号" disabled>你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
<option value="1" disabled>你的工号</option>
<option value="2">你最喜欢的老师</option>
</optgroup>
</select>
</div>
@ -131,7 +131,7 @@ body{padding: 10px;}
<select name="interest" lay-filter="interest">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected>阅读</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
@ -201,7 +201,7 @@ body{padding: 10px;}
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div>
</div>
<div class="layui-form-item">
@ -233,6 +233,20 @@ layui.use('form', function(){
,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){

4
examples/laydate.html

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

3
examples/laypage.html

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

37
examples/table.html

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

11
src/css/layui.css

@ -890,8 +890,11 @@ hr, .layui-timeline-item:before{background-color: #e6e6e6;}
.layui-laypage .layui-laypage-count,
.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-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 .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;}
@ -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="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 .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;}
.laytable-cell-checkbox,
.laytable-cell-radio,
.laytable-cell-space,
.laytable-cell-numbers{padding: 0; text-align: center;}

72
src/lay/modules/form.js

@ -68,6 +68,26 @@ layui.define('layer', function(exports){
Form.prototype.on = function(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){
@ -96,7 +116,7 @@ layui.define('layer', function(exports){
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')
,index = Number(select.val()? select.val(): -1) + 1 ;
if(disabled) return;
@ -106,7 +126,8 @@ layui.define('layer', function(exports){
,dlHeight = dl.outerHeight();
reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE);
//确保没有选择的时候第一个也会有样式
dl.children('dd:eq('+index+')').addClass(THIS);
//上下定位识别
if(top + dlHeight > win.height() && top >= dlHeight){
reElem.addClass(CLASS + 'up');
@ -153,8 +174,48 @@ layui.define('layer', function(exports){
//Tab键
if(keyCode === 9){
hideDown();
} else if(keyCode === 13){ //回车键
}
//up 键
if(keyCode === 38){
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(){
var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); //获取过滤器
if(othis.hasClass(DISABLED)) return false;
if(othis.hasClass('layui-select-tips')){
input.val('');
index = 0;
} else {
input.val(othis.text());
othis.addClass(THIS);
index = Number(value) + 1;
}
othis.siblings().removeClass(THIS);
select.val(value).removeClass('layui-form-danger')
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {

5
src/lay/modules/laydate.js

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

7
src/lay/modules/laypage.js

@ -75,7 +75,7 @@ layui.define(function(exports){
? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) )
: 1
//图片段
//图片段
,views = {
//上一页
prev: function(){
@ -162,6 +162,9 @@ layui.define(function(exports){
return options.join('') +'</select></span>';
}()
//刷新
,refresh: '<a href="javascript:;" data-page="'+ config.curr +'" class="layui-laypage-refresh"><i class="layui-icon">&#x1002;</i></a>'
//跳页区域
,skip: function(){
return ['<span class="layui-laypage-skip">&#x5230;&#x7B2C;'
@ -271,7 +274,7 @@ layui.define(function(exports){
doc[id](config.elem).innerHTML = view;
}
}
config.jump && config.jump(config, load);
var elem = doc[id]('layui-laypage-' + config.index);

4
src/layui.js vendored

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

Loading…
Cancel
Save