mirror of https://github.com/layui/layui
fix(form): 修复 select 组件的字符转义问题 (#2661)
* fix(form): 修复 select 组件的字符转义问题 * Update src/modules/form.js Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com> --------- Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>2.9.x-stable
贤心
parent
467a8de205
commit
0a80e99024
|
|
@ -6,7 +6,7 @@
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="format-detection" content="telephone=no">
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
|
||||||
|
|
@ -140,7 +140,7 @@
|
||||||
<div class="layui-col-md12">
|
<div class="layui-col-md12">
|
||||||
<button class="layui-btn" id="testSubmit">立即提交</button>
|
<button class="layui-btn" id="testSubmit">立即提交</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
@ -163,7 +163,7 @@
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
|
<input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-form-mid" style="padding: 0!important;">
|
<div class="layui-form-mid" style="padding: 0!important;">
|
||||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
|
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -200,8 +200,8 @@
|
||||||
<div class="layui-inline">
|
<div class="layui-inline">
|
||||||
<label class="layui-form-label">行内表单</label>
|
<label class="layui-form-label">行内表单</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
<select name="quiz" lay-verify="required" lay-vertype="tips" lay-filter="quiz111">
|
<select name="quiz" lay-verify="required" lay-vertype="tips" lay-filter="quiz">
|
||||||
<option value="">请"选择"问题</option>
|
<option value="">请"选择"问题 😀</option>
|
||||||
<option value="0">你工"作"的 第一个城市</option>
|
<option value="0">你工"作"的 第一个城市</option>
|
||||||
<option value="1" disabled>你的工号</option>
|
<option value="1" disabled>你的工号</option>
|
||||||
<option value="2">
|
<option value="2">
|
||||||
|
|
@ -213,7 +213,7 @@
|
||||||
<div class="layui-inline">
|
<div class="layui-inline">
|
||||||
<label class="layui-form-label">select分组</label>
|
<label class="layui-form-label">select分组</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
<select name="quiz" lay-filter="quiz">
|
<select name="quiz111" lay-filter="quiz111">
|
||||||
<option value="">请选择问题</option>
|
<option value="">请选择问题</option>
|
||||||
<optgroup label="城市记忆">
|
<optgroup label="城市记忆">
|
||||||
<option value="0">你工作的第一个城市</option>
|
<option value="0">你工作的第一个城市</option>
|
||||||
|
|
@ -226,7 +226,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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">
|
||||||
|
|
@ -240,12 +240,12 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<div class="layui-inline">
|
<div class="layui-inline">
|
||||||
<label class="layui-form-label">搜索选择框</label>
|
<label class="layui-form-label">搜索选择框</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
<select name="interest-search" lay-filter="interest-search" lay-search="">
|
<select name="interest-search" lay-filter="interest-search" lay-search="" lay-creatable>
|
||||||
<option value="">请搜索</option>
|
<option value="">请搜索</option>
|
||||||
<option value="写作">写"作"</option>
|
<option value="写作">写"作"</option>
|
||||||
<option value="阅读" disabled>阅读</option>
|
<option value="阅读" disabled>阅读</option>
|
||||||
|
|
@ -309,7 +309,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="layui-form-item" pane>
|
<div class="layui-form-item" pane>
|
||||||
<label class="layui-form-label">复选框</label>
|
<label class="layui-form-label">复选框</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
|
|
@ -398,14 +398,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
form.on('submit(top)', function(data){
|
form.on('submit(top)', function(data){
|
||||||
console.log(data);
|
console.log(data);
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
*/
|
*/
|
||||||
|
|
||||||
//方法提交
|
//方法提交
|
||||||
$('#testSubmit').on('click', function(){
|
$('#testSubmit').on('click', function(){
|
||||||
form.submit('top', function(data){
|
form.submit('top', function(data){
|
||||||
|
|
@ -416,18 +416,18 @@
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
alert(JSON.stringify(data.field));
|
alert(JSON.stringify(data.field));
|
||||||
})
|
})
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
//日期
|
//日期
|
||||||
laydate.render({
|
laydate.render({
|
||||||
elem: '#date'
|
elem: '#date'
|
||||||
});
|
});
|
||||||
|
|
||||||
//初始赋值
|
//初始赋值
|
||||||
var thisValue = form.val('first', {
|
var thisValue = form.val('first', {
|
||||||
'title': '测试测试测试'
|
'title': '测试测试测试'
|
||||||
|
|
@ -449,32 +449,32 @@
|
||||||
var elem = data.elem;
|
var elem = data.elem;
|
||||||
elem.value = '通过自定义事件设置的值';
|
elem.value = '通过自定义事件设置的值';
|
||||||
});
|
});
|
||||||
|
|
||||||
//事件
|
//事件
|
||||||
form.on('select(quiz111)', function(data){
|
|
||||||
console.log('select: ', this, data);
|
|
||||||
});
|
|
||||||
|
|
||||||
form.on('select(quiz)', function(data){
|
form.on('select(quiz)', function(data){
|
||||||
console.log('select.quiz：', this, data);
|
console.log('select.quiz: ', this, data);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
form.on('select(quiz111)', function(data){
|
||||||
|
console.log('select.quiz111：', this, data);
|
||||||
|
});
|
||||||
|
|
||||||
form.on('select(interest)', function(data){
|
form.on('select(interest)', function(data){
|
||||||
console.log('select.interest: ', this, data);
|
console.log('select.interest: ', this, data);
|
||||||
});
|
});
|
||||||
|
|
||||||
form.on('checkbox', function(data){
|
form.on('checkbox', function(data){
|
||||||
console.log(this.checked, data.elem.checked);
|
console.log(this.checked, data.elem.checked);
|
||||||
});
|
});
|
||||||
|
|
||||||
form.on('switch', function(data){
|
form.on('switch', function(data){
|
||||||
console.log(data);
|
console.log(data);
|
||||||
});
|
});
|
||||||
|
|
||||||
form.on('radio', function(data){
|
form.on('radio', function(data){
|
||||||
console.log(data);
|
console.log(data);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 提交事件
|
// 提交事件
|
||||||
form.on('submit(*)', function(data){
|
form.on('submit(*)', function(data){
|
||||||
console.log(data)
|
console.log(data)
|
||||||
|
|
@ -497,12 +497,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<h3>设置 lay-ignore 忽略渲染</h3>
|
||||||
|
<hr>
|
||||||
|
<div class="layui-form">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">未设置 ignore 时：</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<input type="checkbox" name="like[write]" title="checkbox">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">忽略指令直接设置：</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<input type="checkbox" name="like[write]" lay-ignore title="写作">
|
||||||
|
<input type="radio" name="sex" value="1" lay-ignore title="男">
|
||||||
|
<select name="quiz" lay-ignore>
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="AAAAA" selected>AAAAA</option>
|
||||||
|
<option value="BBBBB">BBBBB</option>
|
||||||
|
<option value="CCCCC">CCCCC</option>
|
||||||
|
<option value="DDDDD" disabled>DDDDD</option>
|
||||||
|
<option value="EEEEE">EEEEE</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">忽略指令父元素设置：</div>
|
||||||
|
<div class="layui-inline" lay-ignore>
|
||||||
|
<input type="checkbox" name="like[write]" title="写作">
|
||||||
|
<input type="radio" name="sex" value="1" title="男">
|
||||||
|
<select name="quiz111">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="AAAAA">AAAAA</option>
|
||||||
|
<option value="BBBBB">BBBBB</option>
|
||||||
|
<option value="CCCCC" selected>CCCCC</option>
|
||||||
|
<option value="DDDDD" disabled>DDDDD</option>
|
||||||
|
<option value="EEEEE">EEEEE</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>原始表单调试：</h3>
|
<h3>原始表单调试：</h3>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
/**
|
/**
|
||||||
* form 表单组件
|
* form 表单组件
|
||||||
*/
|
*/
|
||||||
|
|
||||||
layui.define(['lay', 'layer', 'util'], function(exports){
|
layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var $ = layui.$;
|
var $ = layui.$;
|
||||||
var layer = layui.layer;
|
var layer = layui.layer;
|
||||||
var util = layui.util;
|
var util = layui.util;
|
||||||
var hint = layui.hint();
|
var hint = layui.hint();
|
||||||
var device = layui.device();
|
var device = layui.device();
|
||||||
var needCheckboxFallback = lay.ie && parseFloat(lay.ie) === 8;
|
var needCheckboxFallback = lay.ie && parseFloat(lay.ie) === 8;
|
||||||
|
|
||||||
var MOD_NAME = 'form';
|
var MOD_NAME = 'form';
|
||||||
var ELEM = '.layui-form';
|
var ELEM = '.layui-form';
|
||||||
var THIS = 'layui-this';
|
var THIS = 'layui-this';
|
||||||
|
|
@ -19,7 +19,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var HIDE = 'layui-hide';
|
var HIDE = 'layui-hide';
|
||||||
var DISABLED = 'layui-disabled';
|
var DISABLED = 'layui-disabled';
|
||||||
var OUT_OF_RANGE = 'layui-input-number-out-of-range';
|
var OUT_OF_RANGE = 'layui-input-number-out-of-range';
|
||||||
|
|
||||||
var Form = function(){
|
var Form = function(){
|
||||||
this.config = {
|
this.config = {
|
||||||
// 内置的验证规则
|
// 内置的验证规则
|
||||||
|
|
@ -68,14 +68,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
autocomplete: null // 全局 autocomplete 状态。 null 表示不干预
|
autocomplete: null // 全局 autocomplete 状态。 null 表示不干预
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// 全局设置
|
// 全局设置
|
||||||
Form.prototype.set = function(options){
|
Form.prototype.set = function(options){
|
||||||
var that = this;
|
var that = this;
|
||||||
$.extend(true, that.config, options);
|
$.extend(true, that.config, options);
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 验证规则设定
|
// 验证规则设定
|
||||||
Form.prototype.verify = function(settings){
|
Form.prototype.verify = function(settings){
|
||||||
var that = this;
|
var that = this;
|
||||||
|
|
@ -89,21 +89,21 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
return filter ? ('[lay-filter="' + filter +'"]') : '';
|
return filter ? ('[lay-filter="' + filter +'"]') : '';
|
||||||
}());
|
}());
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表单事件
|
// 表单事件
|
||||||
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){
|
Form.prototype.val = function(filter, object){
|
||||||
var that = this
|
var that = this
|
||||||
,formElem = that.getFormElem(filter);
|
,formElem = that.getFormElem(filter);
|
||||||
|
|
||||||
// 遍历
|
// 遍历
|
||||||
formElem.each(function(index, item){
|
formElem.each(function(index, item){
|
||||||
var itemForm = $(this);
|
var itemForm = $(this);
|
||||||
|
|
||||||
// 赋值
|
// 赋值
|
||||||
for(var key in object){
|
for(var key in object){
|
||||||
if(!lay.hasOwn(object, key)) continue;
|
if(!lay.hasOwn(object, key)) continue;
|
||||||
|
|
@ -111,11 +111,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var type;
|
var type;
|
||||||
var value = object[key];
|
var value = object[key];
|
||||||
var itemElem = itemForm.find('[name="'+ key +'"]');
|
var itemElem = itemForm.find('[name="'+ key +'"]');
|
||||||
|
|
||||||
// 如果对应的表单不存在，则不执行
|
// 如果对应的表单不存在，则不执行
|
||||||
if(!itemElem[0]) continue;
|
if(!itemElem[0]) continue;
|
||||||
type = itemElem[0].type;
|
type = itemElem[0].type;
|
||||||
|
|
||||||
// 如果为复选框
|
// 如果为复选框
|
||||||
if(type === 'checkbox'){
|
if(type === 'checkbox'){
|
||||||
itemElem[0].checked = value;
|
itemElem[0].checked = value;
|
||||||
|
|
@ -128,47 +128,47 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
form.render(null, filter);
|
form.render(null, filter);
|
||||||
|
|
||||||
// 返回值
|
// 返回值
|
||||||
return that.getValue(filter);
|
return that.getValue(filter);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 取值
|
// 取值
|
||||||
Form.prototype.getValue = function(filter, itemForm){
|
Form.prototype.getValue = function(filter, itemForm){
|
||||||
itemForm = itemForm || this.getFormElem(filter);
|
itemForm = itemForm || this.getFormElem(filter);
|
||||||
|
|
||||||
var nameIndex = {} // 数组 name 索引
|
var nameIndex = {} // 数组 name 索引
|
||||||
,field = {}
|
,field = {}
|
||||||
,fieldElem = itemForm.find('input,select,textarea') // 获取所有表单域
|
,fieldElem = itemForm.find('input,select,textarea') // 获取所有表单域
|
||||||
|
|
||||||
layui.each(fieldElem, function(_, item){
|
layui.each(fieldElem, function(_, item){
|
||||||
var othis = $(this)
|
var othis = $(this)
|
||||||
,init_name; // 初始 name
|
,init_name; // 初始 name
|
||||||
|
|
||||||
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
|
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
|
||||||
if(!item.name) return;
|
if(!item.name) return;
|
||||||
|
|
||||||
// 用于支持数组 name
|
// 用于支持数组 name
|
||||||
if(/^.*\[\]$/.test(item.name)){
|
if(/^.*\[\]$/.test(item.name)){
|
||||||
var key = item.name.match(/^(.*)\[\]$/g)[0];
|
var key = item.name.match(/^(.*)\[\]$/g)[0];
|
||||||
nameIndex[key] = nameIndex[key] | 0;
|
nameIndex[key] = nameIndex[key] | 0;
|
||||||
init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
|
init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
|
||||||
}
|
}
|
||||||
|
|
||||||
if(/^(checkbox|radio)$/.test(item.type) && !item.checked) return; // 复选框和单选框未选中，不记录字段
|
if(/^(checkbox|radio)$/.test(item.type) && !item.checked) return; // 复选框和单选框未选中，不记录字段
|
||||||
// select 多选用 jQuery 方式取值，未选中 option 时，
|
// select 多选用 jQuery 方式取值，未选中 option 时，
|
||||||
// jQuery v2.2.4 及以下版本返回 null，以上(3.x) 返回 []。
|
// jQuery v2.2.4 及以下版本返回 null，以上(3.x) 返回 []。
|
||||||
// 统一规范化为 []，参考 https://github.com/jquery/jquery/issues/2562
|
// 统一规范化为 []，参考 https://github.com/jquery/jquery/issues/2562
|
||||||
field[init_name || item.name] = (this.tagName === 'SELECT' && typeof this.getAttribute('multiple') === 'string')
|
field[init_name || item.name] = (this.tagName === 'SELECT' && typeof this.getAttribute('multiple') === 'string')
|
||||||
? othis.val() || []
|
? othis.val() || []
|
||||||
: this.value;
|
: this.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
return field;
|
return field;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表单控件渲染
|
// 表单控件渲染
|
||||||
Form.prototype.render = function(type, filter){
|
Form.prototype.render = function(type, filter){
|
||||||
var that = this;
|
var that = this;
|
||||||
|
|
@ -273,7 +273,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
});
|
});
|
||||||
return arr.join('');
|
return arr.join('');
|
||||||
}());
|
}());
|
||||||
|
|
||||||
elemAffix.append(elemIcon); // 插入图标元素
|
elemAffix.append(elemIcon); // 插入图标元素
|
||||||
|
|
||||||
// 追加 className
|
// 追加 className
|
||||||
|
|
@ -298,8 +298,8 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
hasElemSuffix.prepend(elemAffix);
|
hasElemSuffix.prepend(elemAffix);
|
||||||
|
|
||||||
othis.css('padding-right', function(){
|
othis.css('padding-right', function(){
|
||||||
var paddingRight = othis.closest('.layui-input-group')[0]
|
var paddingRight = othis.closest('.layui-input-group')[0]
|
||||||
? 0
|
? 0
|
||||||
: hasElemSuffix.outerWidth();
|
: hasElemSuffix.outerWidth();
|
||||||
return paddingRight + elemAffix.outerWidth()
|
return paddingRight + elemAffix.outerWidth()
|
||||||
});
|
});
|
||||||
|
|
@ -309,9 +309,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
|
|
||||||
opts.show === 'auto' && showAffix(elemAffix, othis.val());
|
opts.show === 'auto' && showAffix(elemAffix, othis.val());
|
||||||
|
|
||||||
typeof opts.init === 'function' && opts.init.call(this, othis, opts);
|
typeof opts.init === 'function' && opts.init.call(this, othis, opts);
|
||||||
|
|
||||||
// 输入事件
|
// 输入事件
|
||||||
othis.on('input propertychange', function(){
|
othis.on('input propertychange', function(){
|
||||||
var value = this.value;
|
var value = this.value;
|
||||||
|
|
@ -322,14 +322,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
othis.on('blur', function(){
|
othis.on('blur', function(){
|
||||||
typeof opts.blur === 'function' && opts.blur.call(this, othis, opts);
|
typeof opts.blur === 'function' && opts.blur.call(this, othis, opts);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 点击动态后缀事件
|
// 点击动态后缀事件
|
||||||
elemIcon.on('click', function(){
|
elemIcon.on('click', function(){
|
||||||
var inputFilter = othis.attr('lay-filter');
|
var inputFilter = othis.attr('lay-filter');
|
||||||
if($(this).hasClass(DISABLED)) return;
|
if($(this).hasClass(DISABLED)) return;
|
||||||
|
|
||||||
typeof opts.click === 'function' && opts.click.call(this, othis, opts);
|
typeof opts.click === 'function' && opts.click.call(this, othis, opts);
|
||||||
|
|
||||||
// 对外事件
|
// 对外事件
|
||||||
layui.event.call(this, MOD_NAME, 'input-affix('+ inputFilter +')', {
|
layui.event.call(this, MOD_NAME, 'input-affix('+ inputFilter +')', {
|
||||||
elem: othis[0],
|
elem: othis[0],
|
||||||
|
|
@ -338,7 +338,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 动态点缀配置项
|
// 动态点缀配置项
|
||||||
var affixOptions = {
|
var affixOptions = {
|
||||||
eye: { // 密码显隐
|
eye: { // 密码显隐
|
||||||
|
|
@ -346,7 +346,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
click: function(elem, opts){ // 事件
|
click: function(elem, opts){ // 事件
|
||||||
var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW';
|
var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW';
|
||||||
var isShow = elem.data(SHOW_NAME);
|
var isShow = elem.data(SHOW_NAME);
|
||||||
|
|
||||||
elem.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow);
|
elem.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow);
|
||||||
|
|
||||||
renderAffix({
|
renderAffix({
|
||||||
|
|
@ -379,11 +379,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
renderAffix();
|
renderAffix();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 下拉选择框
|
// 下拉选择框
|
||||||
,select: function(elem){
|
,select: function(elem){
|
||||||
var TIPS = '请选择';
|
var TIPS = '请选择';
|
||||||
|
|
@ -406,11 +406,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var index = this.selectedIndex; // 当前选中的索引
|
var index = this.selectedIndex; // 当前选中的索引
|
||||||
var initValue = '';
|
var initValue = '';
|
||||||
var removeClickOutsideEvent;
|
var removeClickOutsideEvent;
|
||||||
|
|
||||||
if(disabled) return;
|
if(disabled) return;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 搜索项
|
* 搜索项
|
||||||
* @typedef searchOption
|
* @typedef searchOption
|
||||||
* @prop {boolean} [caseSensitive=false] 是否区分大小写
|
* @prop {boolean} [caseSensitive=false] 是否区分大小写
|
||||||
* @prop {boolean} [fuzzy=false] 是否开启模糊匹配，开启后将会忽略模式出现在字符串中的位置。
|
* @prop {boolean} [fuzzy=false] 是否开启模糊匹配，开启后将会忽略模式出现在字符串中的位置。
|
||||||
|
|
@ -425,7 +425,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
// IE10 和 11 中，带有占位符的 input 元素获得/失去焦点时，会触发 input 事件
|
// IE10 和 11 中，带有占位符的 input 元素获得/失去焦点时，会触发 input 事件
|
||||||
// 当鼠标按下时，根据 input 元素上的 __ieph 标识忽略 input 事件
|
// 当鼠标按下时，根据 input 元素上的 __ieph 标识忽略 input 事件
|
||||||
var needPlaceholderPatch = !!(lay.ie && (lay.ie === '10' || lay.ie === '11') && input.attr('placeholder'));
|
var needPlaceholderPatch = !!(lay.ie && (lay.ie === '10' || lay.ie === '11') && input.attr('placeholder'));
|
||||||
|
|
||||||
// 展开下拉
|
// 展开下拉
|
||||||
var showDown = function(){
|
var showDown = function(){
|
||||||
if(isAppendTo){
|
if(isAppendTo){
|
||||||
|
|
@ -446,7 +446,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop();
|
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop();
|
||||||
var dlHeight = dl.outerHeight();
|
var dlHeight = dl.outerHeight();
|
||||||
var dds = dl.children('dd');
|
var dds = dl.children('dd');
|
||||||
|
|
||||||
index = select[0].selectedIndex; // 获取最新的 selectedIndex
|
index = select[0].selectedIndex; // 获取最新的 selectedIndex
|
||||||
title.parent().addClass(CLASS+'ed');
|
title.parent().addClass(CLASS+'ed');
|
||||||
dds.removeClass(HIDE);
|
dds.removeClass(HIDE);
|
||||||
|
|
@ -481,7 +481,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
{ignore: title}
|
{ignore: title}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 隐藏下拉
|
// 隐藏下拉
|
||||||
var hideDown = function(choose){
|
var hideDown = function(choose){
|
||||||
title.parent().removeClass(CLASS+'ed ' + CLASS+'up');
|
title.parent().removeClass(CLASS+'ed ' + CLASS+'up');
|
||||||
|
|
@ -492,16 +492,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
reElem.detach();
|
reElem.detach();
|
||||||
$(window).off('resize.lay_select_resize');
|
$(window).off('resize.lay_select_resize');
|
||||||
}
|
}
|
||||||
|
|
||||||
if(choose) return;
|
if(choose) return;
|
||||||
|
|
||||||
notOption(input.val(), function(none){
|
notOption(input.val(), function(none){
|
||||||
var selectedIndex = select[0].selectedIndex;
|
var selectedIndex = select[0].selectedIndex;
|
||||||
|
|
||||||
// 未查询到相关值
|
// 未查询到相关值
|
||||||
if(none){
|
if(none){
|
||||||
initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值
|
initValue = $(select[0].options[selectedIndex]).text(); // 重新获得初始选中值
|
||||||
|
|
||||||
// 如果是第一项，且文本值等于 placeholder，则清空初始值
|
// 如果是第一项，且文本值等于 placeholder，则清空初始值
|
||||||
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
|
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
|
||||||
initValue = '';
|
initValue = '';
|
||||||
|
|
@ -512,28 +512,28 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 定位下拉滚动条
|
// 定位下拉滚动条
|
||||||
var followScroll = function(){
|
var followScroll = function(){
|
||||||
var thisDd = dl.children('dd.'+ THIS);
|
var thisDd = dl.children('dd.'+ THIS);
|
||||||
|
|
||||||
if(!thisDd[0]) return;
|
if(!thisDd[0]) return;
|
||||||
|
|
||||||
var posTop = thisDd.position().top;
|
var posTop = thisDd.position().top;
|
||||||
var dlHeight = dl.height();
|
var dlHeight = dl.height();
|
||||||
var ddHeight = thisDd.height();
|
var ddHeight = thisDd.height();
|
||||||
|
|
||||||
// 若选中元素在滚动条不可见底部
|
// 若选中元素在滚动条不可见底部
|
||||||
if(posTop > dlHeight){
|
if(posTop > dlHeight){
|
||||||
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
|
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 若选择元素在滚动条不可见顶部
|
// 若选择元素在滚动条不可见顶部
|
||||||
if(posTop < 0){
|
if(posTop < 0){
|
||||||
dl.scrollTop(posTop + dl.scrollTop() - 5);
|
dl.scrollTop(posTop + dl.scrollTop() - 5);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击标题区域
|
// 点击标题区域
|
||||||
title.on('click', function(e){
|
title.on('click', function(e){
|
||||||
title.parent().hasClass(CLASS+'ed') ? (
|
title.parent().hasClass(CLASS+'ed') ? (
|
||||||
|
|
@ -542,17 +542,17 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
showDown()
|
showDown()
|
||||||
);
|
);
|
||||||
dl.find('.'+NONE).remove();
|
dl.find('.'+NONE).remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 点击箭头获取焦点
|
// 点击箭头获取焦点
|
||||||
title.find('.layui-edge').on('click', function(){
|
title.find('.layui-edge').on('click', function(){
|
||||||
input.focus();
|
input.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
// select 中 input 键盘事件
|
// select 中 input 键盘事件
|
||||||
input.on('keyup', function(e){ // 键盘松开
|
input.on('keyup', function(e){ // 键盘松开
|
||||||
var keyCode = e.keyCode;
|
var keyCode = e.keyCode;
|
||||||
|
|
||||||
// Tab键展开
|
// Tab键展开
|
||||||
if(keyCode === 9){
|
if(keyCode === 9){
|
||||||
showDown();
|
showDown();
|
||||||
|
|
@ -564,7 +564,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
if(keyCode === 9){
|
if(keyCode === 9){
|
||||||
hideDown();
|
hideDown();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标注 dd 的选中状态
|
// 标注 dd 的选中状态
|
||||||
var setThisDd = function(prevNext){
|
var setThisDd = function(prevNext){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -580,7 +580,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
var nextIndex = prevNext === 'prev'
|
var nextIndex = prevNext === 'prev'
|
||||||
? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1)
|
? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1)
|
||||||
: (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1)
|
: (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1)
|
||||||
|
|
@ -589,19 +589,19 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式
|
selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式
|
||||||
followScroll(); // 定位滚动条
|
followScroll(); // 定位滚动条
|
||||||
};
|
};
|
||||||
|
|
||||||
if(keyCode === 38) setThisDd('prev'); // Up 键
|
if(keyCode === 38) setThisDd('prev'); // Up 键
|
||||||
if(keyCode === 40) setThisDd('next'); // Down 键
|
if(keyCode === 40) setThisDd('next'); // Down 键
|
||||||
|
|
||||||
// Enter 键
|
// Enter 键
|
||||||
if(keyCode === 13){
|
if(keyCode === 13){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dl.children('dd.'+THIS).trigger('click');
|
dl.children('dd.'+THIS).trigger('click');
|
||||||
}
|
}
|
||||||
}).on('paste', function(){
|
}).on('paste', function(){
|
||||||
showDown();
|
showDown();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 检测值是否不属于 select 项
|
// 检测值是否不属于 select 项
|
||||||
var notOption = function(value, callback, origin){
|
var notOption = function(value, callback, origin){
|
||||||
var num = 0;
|
var num = 0;
|
||||||
|
|
@ -629,10 +629,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
if(!laySearch.caseSensitive){
|
if(!laySearch.caseSensitive){
|
||||||
text = text.toLowerCase();
|
text = text.toLowerCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 匹配
|
// 匹配
|
||||||
var not = laySearch.fuzzy ? !fuzzyMatchRE.test(text) : text.indexOf(value) === -1;
|
var not = laySearch.fuzzy ? !fuzzyMatchRE.test(text) : text.indexOf(value) === -1;
|
||||||
|
|
||||||
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
|
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
|
||||||
origin === 'keyup' && othis[(isCreatable ? (not && !isCreateOption) : not) ? 'addClass' : 'removeClass'](HIDE);
|
origin === 'keyup' && othis[(isCreatable ? (not && !isCreateOption) : not) ? 'addClass' : 'removeClass'](HIDE);
|
||||||
});
|
});
|
||||||
|
|
@ -647,23 +647,23 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var none = num === dds.length;
|
var none = num === dds.length;
|
||||||
return callback(none, hasEquals), none;
|
return callback(none, hasEquals), none;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 搜索匹配
|
// 搜索匹配
|
||||||
var search = function(e){
|
var search = function(e){
|
||||||
var value = this.value, keyCode = e.keyCode;
|
var value = this.value, keyCode = e.keyCode;
|
||||||
|
|
||||||
if(keyCode === 9 || keyCode === 13
|
if(keyCode === 9 || keyCode === 13
|
||||||
|| keyCode === 37 || keyCode === 38
|
|| keyCode === 37 || keyCode === 38
|
||||||
|| keyCode === 39 || keyCode === 40
|
|| keyCode === 39 || keyCode === 40
|
||||||
){
|
){
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(needPlaceholderPatch && e.target.__ieph){
|
if(needPlaceholderPatch && e.target.__ieph){
|
||||||
e.target.__ieph = false;
|
e.target.__ieph = false;
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
notOption(value, function(none, hasEquals){
|
notOption(value, function(none, hasEquals){
|
||||||
if(isCreatable){
|
if(isCreatable){
|
||||||
if(hasEquals){
|
if(hasEquals){
|
||||||
|
|
@ -671,10 +671,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}else{
|
}else{
|
||||||
var createOptionElem = dl.children('.' + CREATE_OPTION);
|
var createOptionElem = dl.children('.' + CREATE_OPTION);
|
||||||
if(createOptionElem[0]){
|
if(createOptionElem[0]){
|
||||||
createOptionElem.attr('lay-value', value).html(util.escape(value));
|
createOptionElem.attr('lay-value', value).text(value);
|
||||||
}else{
|
}else{
|
||||||
// 临时显示在顶部
|
// 临时显示在顶部
|
||||||
var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value));
|
var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).text(value);
|
||||||
var firstOptionELem = dl.children().eq(0);
|
var firstOptionELem = dl.children().eq(0);
|
||||||
var hasTips = firstOptionELem.hasClass('layui-select-tips');
|
var hasTips = firstOptionELem.hasClass('layui-select-tips');
|
||||||
firstOptionELem[hasTips ? 'after' : 'before'](ddElem);
|
firstOptionELem[hasTips ? 'after' : 'before'](ddElem);
|
||||||
|
|
@ -688,7 +688,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 'keyup');
|
}, 'keyup');
|
||||||
|
|
||||||
// 当搜索值清空时
|
// 当搜索值清空时
|
||||||
if(value === ''){
|
if(value === ''){
|
||||||
// 取消选中项
|
// 取消选中项
|
||||||
|
|
@ -698,21 +698,21 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
dl.find('.'+ NONE).remove();
|
dl.find('.'+ NONE).remove();
|
||||||
isCreatable && dl.children('.' + CREATE_OPTION).remove();
|
isCreatable && dl.children('.' + CREATE_OPTION).remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
followScroll(); // 定位滚动条
|
followScroll(); // 定位滚动条
|
||||||
};
|
};
|
||||||
|
|
||||||
if(isSearch){
|
if(isSearch){
|
||||||
input.on('input propertychange', layui.debounce(search, 50)).on('blur', function(e){
|
input.on('input propertychange', layui.debounce(search, 50)).on('blur', function(e){
|
||||||
var selectedIndex = select[0].selectedIndex;
|
var selectedIndex = select[0].selectedIndex;
|
||||||
|
|
||||||
initValue = $(select[0].options[selectedIndex]).text(); // 重新获得初始选中值
|
initValue = $(select[0].options[selectedIndex]).text(); // 重新获得初始选中值
|
||||||
|
|
||||||
// 如果是第一项，且文本值等于 placeholder，则清空初始值
|
// 如果是第一项，且文本值等于 placeholder，则清空初始值
|
||||||
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
|
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
|
||||||
initValue = '';
|
initValue = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
notOption(input.val(), function(none){
|
notOption(input.val(), function(none){
|
||||||
initValue || input.val(''); // none && !initValue
|
initValue || input.val(''); // none && !initValue
|
||||||
|
|
@ -725,9 +725,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
dl.on('click', 'dd', function(){
|
dl.on('click', 'dd', 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('');
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -759,7 +759,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
dl.on('mousedown pointerdown touchstart', function(e){
|
dl.on('mousedown pointerdown touchstart', function(e){
|
||||||
layui.stope(e);
|
layui.stope(e);
|
||||||
})
|
})
|
||||||
|
|
||||||
reElem.find('dl>dt').on('click', function(e){
|
reElem.find('dl>dt').on('click', function(e){
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
@ -777,81 +777,128 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
handleObj.handler();
|
handleObj.handler();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 初始渲染 select 组件选项
|
// 初始渲染 select 组件选项
|
||||||
selects.each(function(index, select){
|
selects.each(function(index, select) {
|
||||||
var othis = $(this);
|
var othis = $(this);
|
||||||
var hasRender = othis.next('.'+CLASS);
|
var hasRender = othis.next('.'+CLASS);
|
||||||
var disabled = this.disabled;
|
var disabled = this.disabled;
|
||||||
var value = select.value;
|
var value = select.value;
|
||||||
var selected = $(select.options[select.selectedIndex]); // 获取当前选中项
|
var selected = $(select.options[select.selectedIndex]); // 获取当前选中项
|
||||||
var optionsFirst = select.options[0];
|
var optionsFirst = select.options[0];
|
||||||
|
|
||||||
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
// 为忽略渲染的 select 元素保持原生显示状态
|
||||||
|
if (othis.closest('[lay-ignore]').length) {
|
||||||
var isSearch = typeof othis.attr('lay-search') === 'string'
|
return othis.show();
|
||||||
var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch
|
}
|
||||||
var isAppendTo = typeof othis.attr('lay-append-to') === 'string'
|
|
||||||
|
var isSearch = typeof othis.attr('lay-search') === 'string';
|
||||||
|
var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch;
|
||||||
|
var isAppendTo = typeof othis.attr('lay-append-to') === 'string';
|
||||||
var placeholder = optionsFirst
|
var placeholder = optionsFirst
|
||||||
? (optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS))
|
? (optionsFirst.value ? TIPS : (optionsFirst.innerText || TIPS))
|
||||||
: TIPS;
|
: TIPS;
|
||||||
|
|
||||||
// 替代元素
|
// 用于替代 select 的外层容器
|
||||||
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
|
var selectWrapper = (function() {
|
||||||
,(disabled ? ' layui-select-disabled' : '') + '"></div>'].join(''));
|
var elem = $('<div class="'+ CLASS +'"></div>');
|
||||||
|
if (!isSearch) {
|
||||||
|
elem.addClass('layui-unselect');
|
||||||
|
}
|
||||||
|
if (disabled) {
|
||||||
|
elem.addClass('layui-select-disabled');
|
||||||
|
}
|
||||||
|
return elem;
|
||||||
|
})();
|
||||||
|
|
||||||
var triggerElem = $([
|
var inputElem = (function() {
|
||||||
'<div class="'+ TITLE +'">'
|
var elem = $('<input type="text" class="layui-input">');
|
||||||
,('<input type="text" placeholder="'+ util.escape($.trim(placeholder)) +'" '
|
|
||||||
+('value="'+ util.escape($.trim(value ? selected.html() : '')) +'"') // 默认值
|
|
||||||
+((!disabled && isSearch) ? '' : ' readonly') // 是否开启搜索
|
|
||||||
+' class="layui-input'
|
|
||||||
+(isSearch ? '' : ' layui-unselect')
|
|
||||||
+ (disabled ? (' ' + DISABLED) : '') +'">') // 禁用状态
|
|
||||||
,'<i class="layui-edge"></i>'
|
|
||||||
,'</div>'].join(''));
|
|
||||||
|
|
||||||
var contentElem = $(['<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
|
// 设置占位符和默认值
|
||||||
,function(options){
|
elem.prop('placeholder', $.trim(placeholder));
|
||||||
|
elem.val($.trim(value ? selected.text() : ''));
|
||||||
|
|
||||||
|
// 设置未开启搜索或禁用时的输入框只读状态
|
||||||
|
if (!isSearch || disabled) {
|
||||||
|
elem.prop('readonly', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加禁用状态时的 className
|
||||||
|
if (disabled) {
|
||||||
|
elem.addClass(DISABLED);
|
||||||
|
}
|
||||||
|
|
||||||
|
return elem;
|
||||||
|
})();
|
||||||
|
|
||||||
|
var titleElem = (function() {
|
||||||
|
var elem = $('<div class="'+ TITLE +'"></div>');
|
||||||
|
elem.append(inputElem);
|
||||||
|
elem.append('<i class="layui-edge"></i>');
|
||||||
|
return elem;
|
||||||
|
})();
|
||||||
|
|
||||||
|
var contentElem = (function() {
|
||||||
|
var elem = $('<dl class="layui-anim layui-anim-upbit"></dl>');
|
||||||
|
if (othis.find('optgroup')[0]) {
|
||||||
|
elem.addClass('layui-select-group');
|
||||||
|
}
|
||||||
|
var content = function() {
|
||||||
var arr = [];
|
var arr = [];
|
||||||
layui.each(options, function(index, item){
|
layui.each(othis.find('optgroup,option'), function(index, item) {
|
||||||
var tagName = item.tagName.toLowerCase();
|
var tagName = item.tagName.toLowerCase();
|
||||||
|
var dd = $('<dd lay-value=""></dd>');
|
||||||
if(index === 0 && !item.value && tagName !== 'optgroup'){
|
if (index === 0 && !item.value && tagName !== 'optgroup') {
|
||||||
arr.push('<dd lay-value="" class="layui-select-tips">'+ $.trim(item.innerHTML || TIPS) +'</dd>');
|
dd.addClass('layui-select-tips');
|
||||||
} else if(tagName === 'optgroup'){
|
dd.text($.trim(item.innerText || TIPS));
|
||||||
arr.push('<dt>'+ item.label +'</dt>');
|
arr.push(dd.prop('outerHTML'));
|
||||||
|
} else if(tagName === 'optgroup') {
|
||||||
|
var dt = $('<dt></dt>');
|
||||||
|
dt.text(item.label);
|
||||||
|
arr.push(dt.prop('outerHTML'));
|
||||||
} else {
|
} else {
|
||||||
arr.push('<dd lay-value="'+ util.escape(item.value) +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>');
|
dd.attr('lay-value', item.value);
|
||||||
|
if (value === item.value) {
|
||||||
|
dd.addClass(THIS);
|
||||||
|
}
|
||||||
|
if (item.disabled) {
|
||||||
|
dd.addClass(DISABLED);
|
||||||
|
}
|
||||||
|
dd.text($.trim(item.innerText));
|
||||||
|
arr.push(dd.prop('outerHTML'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
|
if (arr.length === 0) {
|
||||||
|
arr.push('<dd lay-value="" class="'+ DISABLED +'">None</dd>');
|
||||||
|
}
|
||||||
return arr.join('');
|
return arr.join('');
|
||||||
}(othis.find('*')) +'</dl>'
|
}();
|
||||||
].join(''));
|
elem.html(content);
|
||||||
|
return elem;
|
||||||
// 如果已经渲染，则Rerender
|
})();
|
||||||
if(hasRender[0]){
|
|
||||||
if(isAppendTo){
|
// 如果已经渲染，则 Rerender
|
||||||
|
if (hasRender[0]) {
|
||||||
|
if (isAppendTo) {
|
||||||
var panelWrapElem = hasRender.data(PANEL_ELEM_DATA);
|
var panelWrapElem = hasRender.data(PANEL_ELEM_DATA);
|
||||||
panelWrapElem && panelWrapElem.remove();
|
panelWrapElem && panelWrapElem.remove();
|
||||||
}
|
}
|
||||||
hasRender.remove();
|
hasRender.remove();
|
||||||
}
|
}
|
||||||
if(isAppendTo){
|
if (isAppendTo) {
|
||||||
reElem.append(triggerElem);
|
selectWrapper.append(titleElem);
|
||||||
othis.after(reElem);
|
othis.after(selectWrapper);
|
||||||
var contentWrapElem = $('<div class="'+ CLASS + ' ' + PANEL_WRAP +'"></div>').append(contentElem);
|
var contentWrapElem = $('<div class="'+ CLASS + ' ' + PANEL_WRAP +'"></div>').append(contentElem);
|
||||||
reElem.data(PANEL_ELEM_DATA, contentWrapElem); // 将面板元素对象记录在触发元素 data 中，重新渲染时需要清理旧面板元素
|
selectWrapper.data(PANEL_ELEM_DATA, contentWrapElem); // 将面板元素对象记录在触发元素 data 中，重新渲染时需要清理旧面板元素
|
||||||
events.call(this, contentWrapElem, triggerElem, disabled, isSearch, isCreatable, isAppendTo);
|
events.call(this, contentWrapElem, titleElem, disabled, isSearch, isCreatable, isAppendTo);
|
||||||
}else{
|
} else {
|
||||||
reElem.append(triggerElem).append(contentElem);
|
selectWrapper.append(titleElem).append(contentElem);
|
||||||
othis.after(reElem);
|
othis.after(selectWrapper);
|
||||||
events.call(this, reElem, triggerElem, disabled, isSearch, isCreatable, isAppendTo);
|
events.call(this, selectWrapper, titleElem, disabled, isSearch, isCreatable, isAppendTo);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 复选框/开关
|
// 复选框/开关
|
||||||
,checkbox: function(elem){
|
,checkbox: function(elem){
|
||||||
var CLASS = {
|
var CLASS = {
|
||||||
|
|
@ -872,14 +919,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var skin = check.attr('lay-skin') || 'primary';
|
var skin = check.attr('lay-skin') || 'primary';
|
||||||
var isSwitch = skin === 'switch';
|
var isSwitch = skin === 'switch';
|
||||||
var isPrimary = skin === 'primary';
|
var isPrimary = skin === 'primary';
|
||||||
|
|
||||||
// 勾选
|
// 勾选
|
||||||
reElem.on('click', function(){
|
reElem.on('click', function(){
|
||||||
var filter = check.attr('lay-filter') // 获取过滤器
|
var filter = check.attr('lay-filter') // 获取过滤器
|
||||||
|
|
||||||
// 禁用
|
// 禁用
|
||||||
if(check[0].disabled) return;
|
if(check[0].disabled) return;
|
||||||
|
|
||||||
// 半选
|
// 半选
|
||||||
if (check[0].indeterminate) {
|
if (check[0].indeterminate) {
|
||||||
check[0].indeterminate = false;
|
check[0].indeterminate = false;
|
||||||
|
|
@ -887,7 +934,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
|
|
||||||
// 开关
|
// 开关
|
||||||
check[0].checked = !check[0].checked
|
check[0].checked = !check[0].checked
|
||||||
|
|
||||||
// 事件
|
// 事件
|
||||||
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
|
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
|
||||||
elem: check[0],
|
elem: check[0],
|
||||||
|
|
@ -898,7 +945,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
|
|
||||||
that.syncAppearanceOnPropChanged(this, 'checked', function(){
|
that.syncAppearanceOnPropChanged(this, 'checked', function(){
|
||||||
if(isSwitch){
|
if(isSwitch){
|
||||||
var title = (reElem.next('*[lay-checkbox]')[0]
|
var title = (reElem.next('*[lay-checkbox]')[0]
|
||||||
? reElem.next().html()
|
? reElem.next().html()
|
||||||
: check.attr('title') || ''
|
: check.attr('title') || ''
|
||||||
).split('|');
|
).split('|');
|
||||||
|
|
@ -917,7 +964,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 遍历复选框
|
// 遍历复选框
|
||||||
checks.each(function(index, check){
|
checks.each(function(index, check){
|
||||||
var othis = $(this);
|
var othis = $(this);
|
||||||
|
|
@ -933,7 +980,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
// 替代元素
|
// 替代元素
|
||||||
var hasRender = othis.next('.' + RE_CLASS[0]);
|
var hasRender = othis.next('.' + RE_CLASS[0]);
|
||||||
hasRender[0] && hasRender.remove(); // 若已经渲染，则 Rerender
|
hasRender[0] && hasRender.remove(); // 若已经渲染，则 Rerender
|
||||||
|
|
||||||
// 若存在标题模板，则优先读取标题模板
|
// 若存在标题模板，则优先读取标题模板
|
||||||
var titleTplAttrs = [];
|
var titleTplAttrs = [];
|
||||||
if(othis.next('[lay-checkbox]')[0]){
|
if(othis.next('[lay-checkbox]')[0]){
|
||||||
|
|
@ -951,7 +998,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
|
|
||||||
// 若为开关，则对 title 进行分隔解析
|
// 若为开关，则对 title 进行分隔解析
|
||||||
title = skin === 'switch' ? title.split('|') : [title];
|
title = skin === 'switch' ? title.split('|') : [title];
|
||||||
|
|
||||||
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
||||||
|
|
||||||
// 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
|
// 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
|
||||||
|
|
@ -985,7 +1032,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
events.call(this, reElem, RE_CLASS);
|
events.call(this, reElem, RE_CLASS);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 单选框
|
// 单选框
|
||||||
,radio: function(elem){
|
,radio: function(elem){
|
||||||
var CLASS = 'layui-form-radio';
|
var CLASS = 'layui-form-radio';
|
||||||
|
|
@ -996,14 +1043,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var events = function(reElem){
|
var events = function(reElem){
|
||||||
var radio = $(this);
|
var radio = $(this);
|
||||||
var ANIM = 'layui-anim-scaleSpring';
|
var ANIM = 'layui-anim-scaleSpring';
|
||||||
|
|
||||||
reElem.on('click', function(){
|
reElem.on('click', function(){
|
||||||
var filter = radio.attr('lay-filter'); // 获取过滤器
|
var filter = radio.attr('lay-filter'); // 获取过滤器
|
||||||
|
|
||||||
if(radio[0].disabled) return;
|
if(radio[0].disabled) return;
|
||||||
|
|
||||||
radio[0].checked = true;
|
radio[0].checked = true;
|
||||||
|
|
||||||
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
|
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
|
||||||
elem: radio[0],
|
elem: radio[0],
|
||||||
value: radio[0].value,
|
value: radio[0].value,
|
||||||
|
|
@ -1028,13 +1075,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
// 初始渲染
|
// 初始渲染
|
||||||
radios.each(function(index, radio){
|
radios.each(function(index, radio){
|
||||||
var othis = $(this), hasRender = othis.next('.' + CLASS);
|
var othis = $(this), hasRender = othis.next('.' + CLASS);
|
||||||
var disabled = this.disabled;
|
var disabled = this.disabled;
|
||||||
var skin = othis.attr('lay-skin');
|
var skin = othis.attr('lay-skin');
|
||||||
|
|
||||||
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
||||||
|
|
||||||
if(needCheckboxFallback){
|
if(needCheckboxFallback){
|
||||||
|
|
@ -1057,9 +1104,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
titleTplAttrs = titleTplAttrs.join(' ');
|
titleTplAttrs = titleTplAttrs.join(' ');
|
||||||
|
|
||||||
// 替代元素
|
// 替代元素
|
||||||
var reElem = $(['<div class="layui-unselect '+ CLASS,
|
var reElem = $(['<div class="layui-unselect '+ CLASS,
|
||||||
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
|
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
|
||||||
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态
|
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态
|
||||||
(skin ? ' lay-skin="'+ skin +'"' : ''),
|
(skin ? ' lay-skin="'+ skin +'"' : ''),
|
||||||
|
|
@ -1112,7 +1159,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* checkbox 和 radio 指定属性变化时自动更新 UI
|
* checkbox 和 radio 指定属性变化时自动更新 UI
|
||||||
* 只能用于 boolean 属性
|
* 只能用于 boolean 属性
|
||||||
|
|
@ -1139,12 +1186,12 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
handler.call(this);
|
handler.call(this);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return function(elem, propName, handler){
|
return function(elem, propName, handler){
|
||||||
var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
|
var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
|
||||||
|
|
||||||
Object.defineProperty(elem, propName,
|
Object.defineProperty(elem, propName,
|
||||||
lay.extend({}, originProps, {
|
lay.extend({}, originProps, {
|
||||||
// 此处的 get 是为了兼容 IE<9
|
// 此处的 get 是为了兼容 IE<9
|
||||||
|
|
@ -1195,31 +1242,31 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
value = typeof value === 'string' ? $.trim(value) : value;
|
value = typeof value === 'string' ? $.trim(value) : value;
|
||||||
|
|
||||||
othis.removeClass(DANGER); // 移除警示样式
|
othis.removeClass(DANGER); // 移除警示样式
|
||||||
|
|
||||||
// 遍历元素绑定的验证规则
|
// 遍历元素绑定的验证规则
|
||||||
layui.each(vers, function(_, thisVer) {
|
layui.each(vers, function(_, thisVer) {
|
||||||
var verst; // 校验结果
|
var verst; // 校验结果
|
||||||
var errorText = ''; // 错误提示文本
|
var errorText = ''; // 错误提示文本
|
||||||
var rule = verify[thisVer]; // 获取校验规则
|
var rule = verify[thisVer]; // 获取校验规则
|
||||||
|
|
||||||
// 匹配验证规则
|
// 匹配验证规则
|
||||||
if (rule) {
|
if (rule) {
|
||||||
verst = typeof rule === 'function'
|
verst = typeof rule === 'function'
|
||||||
? errorText = rule(value, item)
|
? errorText = rule(value, item)
|
||||||
: !rule[0].test(value); // 兼容早期数组中的正则写法
|
: !rule[0].test(value); // 兼容早期数组中的正则写法
|
||||||
|
|
||||||
// 是否属于美化替换后的表单元素
|
// 是否属于美化替换后的表单元素
|
||||||
var isForm2Elem = item.tagName.toLowerCase() === 'select' || (
|
var isForm2Elem = item.tagName.toLowerCase() === 'select' || (
|
||||||
/^(checkbox|radio)$/.test(item.type)
|
/^(checkbox|radio)$/.test(item.type)
|
||||||
);
|
);
|
||||||
|
|
||||||
errorText = errorText || rule[1];
|
errorText = errorText || rule[1];
|
||||||
|
|
||||||
// 获取自定义必填项提示文本
|
// 获取自定义必填项提示文本
|
||||||
if (thisVer === 'required') {
|
if (thisVer === 'required') {
|
||||||
errorText = othis.attr('lay-reqtext') || errorText;
|
errorText = othis.attr('lay-reqtext') || errorText;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 若命中校验规则
|
// 若命中校验规则
|
||||||
if (verst) {
|
if (verst) {
|
||||||
// 提示层风格
|
// 提示层风格
|
||||||
|
|
@ -1234,7 +1281,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
}(), {tips: 1});
|
}(), {tips: 1});
|
||||||
} else if(verType === 'alert') {
|
} else if(verType === 'alert') {
|
||||||
layer.alert(errorText, {title: '提示', shadeClose: true});
|
layer.alert(errorText, {title: '提示', shadeClose: true});
|
||||||
}
|
}
|
||||||
// 若返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示
|
// 若返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示
|
||||||
else if(/\b(string|number)\b/.test(typeof errorText)) {
|
else if(/\b(string|number)\b/.test(typeof errorText)) {
|
||||||
layer.msg(errorText, {icon: 5, shift: 6});
|
layer.msg(errorText, {icon: 5, shift: 6});
|
||||||
|
|
@ -1243,7 +1290,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
(isForm2Elem ? othis.next().find('input') : item).focus();
|
(isForm2Elem ? othis.next().find('input') : item).focus();
|
||||||
}, 7);
|
}, 7);
|
||||||
|
|
||||||
othis.addClass(DANGER);
|
othis.addClass(DANGER);
|
||||||
return intercept = true;
|
return intercept = true;
|
||||||
}
|
}
|
||||||
|
|
@ -1262,13 +1309,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var button = $(this); // 当前触发的按钮
|
var button = $(this); // 当前触发的按钮
|
||||||
|
|
||||||
// 表单域 lay-filter 属性值
|
// 表单域 lay-filter 属性值
|
||||||
var layFilter = typeof filter === 'string'
|
var layFilter = typeof filter === 'string'
|
||||||
? filter
|
? filter
|
||||||
: button.attr('lay-filter');
|
: button.attr('lay-filter');
|
||||||
|
|
||||||
// 当前所在表单域
|
// 当前所在表单域
|
||||||
var elem = this.getFormElem
|
var elem = this.getFormElem
|
||||||
? this.getFormElem(layFilter)
|
? this.getFormElem(layFilter)
|
||||||
: button.parents(ELEM).eq(0);
|
: button.parents(ELEM).eq(0);
|
||||||
|
|
||||||
// 获取需要校验的元素
|
// 获取需要校验的元素
|
||||||
|
|
@ -1286,10 +1333,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
,form: this.getFormElem ? elem[0] : button.parents('form')[0] // 当前所在的 form 元素，如果存在的话
|
,form: this.getFormElem ? elem[0] : button.parents('form')[0] // 当前所在的 form 元素，如果存在的话
|
||||||
,field: field // 当前表单数据
|
,field: field // 当前表单数据
|
||||||
};
|
};
|
||||||
|
|
||||||
// 回调
|
// 回调
|
||||||
typeof callback === 'function' && callback(params);
|
typeof callback === 'function' && callback(params);
|
||||||
|
|
||||||
// 事件
|
// 事件
|
||||||
return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
|
return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
|
||||||
};
|
};
|
||||||
|
|
@ -1344,16 +1391,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var form = new Form();
|
var form = new Form();
|
||||||
var $dom = $(document);
|
var $dom = $(document);
|
||||||
var $win = $(window);
|
var $win = $(window);
|
||||||
|
|
||||||
// 初始自动完成渲染
|
// 初始自动完成渲染
|
||||||
$(function(){
|
$(function(){
|
||||||
form.render();
|
form.render();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 表单 reset 重置渲染
|
// 表单 reset 重置渲染
|
||||||
$dom.on('reset', ELEM, function(){
|
$dom.on('reset', ELEM, function(){
|
||||||
var filter = $(this).attr('lay-filter');
|
var filter = $(this).attr('lay-filter');
|
||||||
|
|
@ -1361,12 +1408,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
form.render(null, filter);
|
form.render(null, filter);
|
||||||
}, 50);
|
}, 50);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 表单提交事件
|
// 表单提交事件
|
||||||
$dom.on('submit', ELEM, submit)
|
$dom.on('submit', ELEM, submit)
|
||||||
.on('click', '*[lay-submit]', submit);
|
.on('click', '*[lay-submit]', submit);
|
||||||
|
|
||||||
exports(MOD_NAME, form);
|
exports(MOD_NAME, form);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue