贤心
GitHub
commit
c767f39eb7
@ -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">
|
||||
|
||||
@ -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){
|
||||
|
||||
@ -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'
|
||||
});
|
||||
|
||||
@ -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(){
|
||||
|
||||
@ -166,8 +166,8 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
</table>
|
||||
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<i class="layui-icon"></i>
|
||||
<i class="layui-icon"></i>
|
||||
<i class="layui-icon" data-type="add"></i>
|
||||
<i class="layui-icon" data-type="delete"></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) : '';
|
||||
|
||||
@ -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;}
|
||||
|
||||
|
||||
@ -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 +')', {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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">ဂ</i></a>'
|
||||
|
||||
//跳页区域
|
||||
,skip: function(){
|
||||
return ['<span class="layui-laypage-skip">到第'
|
||||
@ -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);
|
||||
|
||||
@ -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…
Reference in New Issue
Block a user