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

rc1

Browse Source
This commit is contained in:
sentsin
2018-05-08 15:51:37 +08:00
parent c9f80d74fc
commit 2a7344864b
13 changed files with 180 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,8 @@ layui.define('layer', function(exports){
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this'
,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,Form = function(){
this.config = {
@@ -68,7 +69,7 @@ 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
@@ -76,14 +77,25 @@ layui.define('layer', function(exports){
formElem.each(function(index, item){
var itemFrom = $(this);
layui.each(object, function(key, value){
var itemElem = itemFrom.find('[name="'+ key +'"]');
itemElem.val(value);
var itemElem = itemFrom.find('[name="'+ key +'"]')
,type;
//如果对应的表单不存在，则不执行
if(!itemElem[0]) return;
//如果有 checked 的内置属性，就改变 checked 属性的值
if('checked' in itemElem[0]){
type = itemElem[0].type;
//如果为复选框
if(type === 'checkbox'){
itemElem[0].checked = value;
}
} else if(type === 'radio') { //如果为单选框
itemElem.each(function(){
if(this.value === value ){
this.checked = true
}
});
} else { //其它类型的表单
itemElem.val(value);
}
});
});
form.render(null, filter);
@@ -101,8 +113,10 @@ layui.define('layer', function(exports){
select: function(){
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = '', thatInput
,selects = elemForm.find('select')
,selects = elemForm.find('select'), hide = function(e, clear){
//隐藏 select
,hide = function(e, clear){
if(!$(e.target).parent().hasClass(TITLE) || clear){
$('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up');
thatInput && initValue && thatInput.val(initValue);
@@ -110,31 +124,38 @@ layui.define('layer', function(exports){
thatInput = null;
}
//各种事件
,events = function(reElem, disabled, isSearch){
var select = $(this)
,title = reElem.find('.' + TITLE)
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')
,index = Number(select.val()? select.val(): -1) + 1 ;
,index = this.selectedIndex //当前选中的索引
,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能
if(disabled) return;
//展开下拉
var showDown = function(){
var top = reElem.offset().top + reElem.outerHeight() + 5 - win.scrollTop()
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
,dlHeight = dl.outerHeight();
index = select[0].selectedIndex; //获取最新的 selectedIndex
reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE);
//确保没有选择的时候第一个也会有样式
dl.children('dd:eq('+index+')').addClass(THIS);
//初始选中样式
dds.eq(index).addClass(THIS).siblings().removeClass(THIS);
//上下定位识别
if(top + dlHeight > win.height() && top >= dlHeight){
if(top + dlHeight > $win.height() && top >= dlHeight){
reElem.addClass(CLASS + 'up');
}
}, hideDown = function(choose){
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
input.blur();
nearElem = null;
if(choose) return;
@@ -162,64 +183,68 @@ layui.define('layer', function(exports){
input.focus();
});
//键盘事件
input.on('keyup', function(e){
//select 中 input 键盘事件
input.on('keyup', function(e){ //键盘松开
var keyCode = e.keyCode;
//Tab键
//Tab键展开
if(keyCode === 9){
showDown();
}
}).on('keydown', function(e){
}).on('keydown', function(e){ //键盘按下
var keyCode = e.keyCode;
//Tab键
//Tab键隐藏
if(keyCode === 9){
hideDown();
}
//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){
//标注 dd 的选中状态
var setThisDd = function(prevNext, thisElem){
var nearDd, cacheNearElem;
e.preventDefault();
index++;
if(dl.children('dd:eq('+index+')').hasClass(DISABLED)) index++;
if(index > dds.length - 1) index = dds.length - 1;
//得到当前队列元素
thisElem = function(){
if(thisElem && thisElem[0]){
return thisElem;
}
if(nearElem && nearElem[0]){
return nearElem;
}
return dds.eq(index);
}();
cacheNearElem = thisElem[prevNext](); //当前元素的附近元素
nearDd = thisElem[prevNext]('dd'); //当前元素的 dd 元素
//如果附近的元素不存在，则停止执行
if(!cacheNearElem[0]) return;
//记录附近的元素，让其成为下一个当前元素
nearElem = thisElem[prevNext]();
dl.children('dd:eq('+index+')').addClass(THIS).siblings().removeClass(THIS);
}
//回车键
//如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
if(!nearDd[0] || nearDd.hasClass(DISABLED)){
return setThisDd(prevNext, nearElem);
}
//标注样式
nearDd.addClass(THIS).siblings().removeClass(THIS);
};
if(keyCode === 38) setThisDd('prev'); //Up 键
if(keyCode === 40) setThisDd('next'); //Down 键
//Enter 键
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);
dl.children('dd.'+THIS).trigger('click');
}
});
//检测值是否不属于select项
//检测值是否不属于 select 项
var notOption = function(value, callback, origin){
var num = 0;
layui.each(dds, function(){
@@ -259,8 +284,9 @@ layui.define('layer', function(exports){
if(isSearch){
input.on('keyup', search).on('blur', function(e){
thatInput = input;
initValue = dl.find('.' + THIS).html();
var selectedIndex = select[0].selectedIndex;
thatInput = input; //当前的 select 中的 input 元素
initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值
setTimeout(function(){
notOption(input.val(), function(none){
initValue || input.val(''); //none && !initValue
@@ -273,15 +299,14 @@ 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);
@@ -300,8 +325,7 @@ layui.define('layer', function(exports){
return false;
});
//关闭下拉
$(document).off('click', hide).on('click', hide);
$(document).off('click', hide).on('click', hide); //点击其它元素关闭 select
}
selects.each(function(index, select){
@@ -320,10 +344,18 @@ layui.define('layer', function(exports){
) : TIPS;
//替代元素
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS + (disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'"><input type="text" placeholder="'+ placeholder +'" value="'+ (value ? selected.html() : '') +'" '+ (isSearch ? '' : 'readonly') +' class="layui-input'+ (isSearch ? '' : ' layui-unselect') + (disabled ? (' ' + DISABLED) : '') +'">'
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
,(disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'">'
,('<input type="text" placeholder="'+ placeholder +'" '
+('value="'+ (value ? selected.html() : '') +'"') //默认值
+(isSearch ? '' : ' readonly') //是否开启搜索
+' class="layui-input'
+(isSearch ? '' : ' layui-unselect')
+ (disabled ? (' ' + DISABLED) : '') +'">') //禁用状态
,'<i class="layui-edge"></i></div>'
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'+ function(options){
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
,function(options){
var arr = [];
layui.each(options, function(index, item){
if(index === 0 && !item.value){
@@ -380,19 +412,34 @@ layui.define('layer', function(exports){
checks.each(function(index, check){
var othis = $(this), skin = othis.attr('lay-skin')
,text = (othis.attr('lay-text')||'').split('|'), disabled = this.disabled;
,text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled;
if(skin === 'switch') skin = '_'+skin;
var RE_CLASS = CLASS[skin] || CLASS.checkbox;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
//替代元素
var hasRender = othis.next('.' + RE_CLASS[0]);
var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0] + (
check.checked ? (' '+RE_CLASS[1]) : '') + (disabled ? ' layui-checkbox-disbaled '+DISABLED : '') +'" lay-skin="'+ (skin||'') +'">'
,{
_switch: '<em>'+ ((check.checked ? text[0] : text[1])||'') +'</em><i></i>'
}[skin] || ((check.title.replace(/\s/g, '') ? ('<span>'+ check.title +'</span>') : '') +'<i class="layui-icon">'+ (skin ? '&#xe605;' : '&#xe618;') +'</i>')
var hasRender = othis.next('.' + RE_CLASS[0])
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
,(check.checked ? (' '+ RE_CLASS[1]) : '') //选中状态
,(disabled ? ' layui-checkbox-disbaled '+ DISABLED : '') //禁用状态
,'"'
,(skin ? ' lay-skin="'+ skin +'"' : '') //风格
,'>'
,function(){ //不同风格的内容
var title = check.title.replace(/\s/g, '')
,type = {
//复选框
checkbox: [
(title ? ('<span>'+ check.title +'</span>') : '')
,'<i class="layui-icon layui-icon-ok"></i>'
].join('')
//开关
,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>'
};
return type[skin] || type['checkbox'];
}()
,'</div>'].join(''));
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
@@ -441,7 +488,9 @@ layui.define('layer', function(exports){
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
//替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS + (radio.checked ? (' '+CLASS+'ed') : '') + (disabled ? ' layui-radio-disbaled '+DISABLED : '') +'">'
var reElem = $(['<div class="layui-unselect '+ CLASS
,(radio.checked ? (' '+CLASS+'ed') : '') //选中状态
,(disabled ? ' layui-radio-disbaled '+DISABLED : '') +'">' //禁用状态
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
,'<div>'+ function(){
var title = radio.title || '';
@@ -550,12 +599,12 @@ layui.define('layer', function(exports){
//自动完成渲染
var form = new Form()
,dom = $(document), win = $(window);
,$dom = $(document), $win = $(window);
form.render();
//表单reset重置渲染
dom.on('reset', ELEM, function(){
$dom.on('reset', ELEM, function(){
var filter = $(this).attr('lay-filter');
setTimeout(function(){
form.render(null, filter);
@@ -563,7 +612,7 @@ layui.define('layer', function(exports){
});
//表单提交事件
dom.on('submit', ELEM, submit)
$dom.on('submit', ELEM, submit)
.on('click', '*[lay-submit]', submit);
exports(MOD_NAME, form);

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

@@ -162,7 +162,7 @@ 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 layui-icon-refresh"></i>'
,'</a>'].join('')

8
src/lay/modules/rate.js
View File

@@ -1,7 +1,7 @@
/**
@Title: layui.rate 评分评星
@Author: star
@Author: star1029
@License：MIT
*/
@@ -58,7 +58,7 @@ layui.define('jquery',function(exports){
Class.prototype.config = {
length: 5 //初始长度
,text: false //是否显示评分等级
,reader: false //是否只读
,readonly: false //是否只读
,half: false //是否可以半星
,value: 0 //星星选中个数
,theme: ''
@@ -80,7 +80,7 @@ layui.define('jquery',function(exports){
}
//组件模板
var temp = '<ul class="layui-rate">';
var temp = '<ul class="layui-rate" '+ (options.readonly ? 'readonly' : '') +'>';
for(var i = 1;i <= options.length;i++){
var item = '<li class="layui-inline"><i class="layui-icon '
+ (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID)
@@ -120,7 +120,7 @@ layui.define('jquery',function(exports){
othis.addClass("layui-inline");
//如果不是只读，那么进行触控事件
if(!options.reader) that.action();
if(!options.readonly) that.action();
};