diff --git a/examples/flow.html b/examples/flow.html index c867a57a..3fb3353c 100644 --- a/examples/flow.html +++ b/examples/flow.html @@ -24,6 +24,7 @@ img{width: 500px; height: 300px;}
+ diff --git a/examples/form.html b/examples/form.html index dfe504c8..19ed5fbc 100644 --- a/examples/form.html +++ b/examples/form.html @@ -18,11 +18,11 @@ body{padding: 10px;} -
+
- +
@@ -60,7 +60,7 @@ body{padding: 10px;}
-
+
@@ -102,9 +102,9 @@ body{padding: 10px;}
@@ -114,11 +114,11 @@ body{padding: 10px;}
@@ -131,7 +131,7 @@ body{padding: 10px;} +
@@ -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){ diff --git a/examples/laydate.html b/examples/laydate.html index 84fc0633..f7821720 100644 --- a/examples/laydate.html +++ b/examples/laydate.html @@ -134,8 +134,10 @@ layui.use('laydate', function(){ elem: '#test2' //,format: 'yyyy年MM月dd日' //,value: new Date(1989,9,14) + ,isInitValue: true ,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' }); diff --git a/examples/laypage.html b/examples/laypage.html index b2a29d33..1c1edee0 100644 --- a/examples/laypage.html +++ b/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(){ diff --git a/examples/table.html b/examples/table.html index d404a9d2..43c2c3cb 100644 --- a/examples/table.html +++ b/examples/table.html @@ -166,8 +166,8 @@ body{padding: 20px; /*overflow-y: scroll;*/} @@ -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) : ''; diff --git a/src/css/layui.css b/src/css/layui.css index cfe2cc2b..1df8cb2c 100644 --- a/src/css/layui.css +++ b/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;} diff --git a/src/lay/modules/form.js b/src/lay/modules/form.js index 5443afdd..01b2e6b4 100644 --- a/src/lay/modules/form.js +++ b/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 +')', { diff --git a/src/lay/modules/laydate.js b/src/lay/modules/laydate.js index 0a754019..5d3d5fd0 100644 --- a/src/lay/modules/laydate.js +++ b/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 { diff --git a/src/lay/modules/laypage.js b/src/lay/modules/laypage.js index d8761b27..6835e989 100644 --- a/src/lay/modules/laypage.js +++ b/src/lay/modules/laypage.js @@ -18,6 +18,7 @@ layui.define(function(exports){ //构造器 ,Class = function(options){ + var that = this; that.config = options || {}; 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) ) : 1 - //试图片段 + //视图片段 ,views = { //上一页 prev: function(){ @@ -162,6 +163,9 @@ layui.define(function(exports){ return options.join('') +''; }() + //刷新 + ,refresh: 'ဂ' + //跳页区域 ,skip: function(){ return ['到第' @@ -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){ var that = this @@ -271,7 +293,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); @@ -282,6 +304,8 @@ layui.define(function(exports){ } that.skip(elem); + + that.update(elem); }; //外部接口 diff --git a/src/layui.js b/src/layui.js index d9e597f3..4d5cbec0 100644 --- a/src/layui.js +++ b/src/layui.js @@ -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); }; };