github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1104 from layui/2.x 

为 v2.7.6: 修复若干问题和加强若干功能
pull/1109/head
贤心 2022-07-29 11:10:38 +08:00 committed by GitHub
parent 1339f44975 a0770c7034
commit 591bd70231
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 175 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/layui.js vendored
View File

File diff suppressed because one or more lines are too long

14
examples/colorpicker.html
View File

@ -41,6 +41,12 @@ body{padding:20px;}
<div class="test-box"> <div class="test-box">
<div id="test6"></div> <div id="test6"></div>
</div> </div>
<div class="test-box">
<div class="test-more" lay-options="{color: '#FF0000'}"></div>
<div class="test-more" lay-options="{color: '#008000'}"></div>
<div class="test-more" lay-options="{color: '#0000FF'}"></div>
</div>
</div> </div>
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
@ -101,6 +107,14 @@ body{padding:20px;}
,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'] ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,size: 'xs' ,size: 'xs'
}); });
// 同时绑定多个
colorpicker.render({
elem: '.test-more',
done: function(color){
console.log(this.elem, color);
}
});
}) })
</script> </script>
</body> </body>

8
examples/form.html
View File

@ -91,8 +91,8 @@
<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="quiz111">
<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">
你最喜欢的老师 你最喜欢的老师
@ -135,9 +135,9 @@
<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="">
<option value="">请搜索</option> <option value="">请搜索</option>
<option value="写作">写作</option> <option value="写作">写"作"</option>
<option value="阅读" disabled>阅读</option> <option value="阅读" disabled>阅读</option>
<option value="游戏" disabled>游戏</option> <option value="游戏" disabled>游戏</option>
<option value="音乐">音乐</option> <option value="音乐">音乐</option>

4
examples/transfer.html
View File

@ -50,11 +50,11 @@
,{"value": "3", "title": "贤心"} ,{"value": "3", "title": "贤心"}
,{"value": "4", "title": "鲁迅", "disabled": true} ,{"value": "4", "title": "鲁迅", "disabled": true}
,{"value": "5", "title": "巴金"} ,{"value": "5", "title": "巴金"}
,{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"} ,{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "Bbb"},{"value": "6", "title": "BB"},{"value": "6", "title": "Aa"},{"value": "6", "title": "aa"}
] ]
,id: 'demoId' ,id: 'demoId'
,value: ["2", "3"] ,value: ["2", "3"]
,showSearch: true ,showSearch: true // 若区分大小写，设置 'cs'
}); });
//按钮事件 //按钮事件

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "layui", "name": "layui",
"realname": "layui", "realname": "layui",
"version": "2.7.5", "version": "2.7.6",
"description": "Classic modular Front-End UI library", "description": "Classic modular Front-End UI library",
"main": "dist/layui.js", "main": "dist/layui.js",
"license": "MIT", "license": "MIT",

2
src/layui.js
View File

@ -15,7 +15,7 @@
} }
,Layui = function(){ ,Layui = function(){
this.v = '2.7.5'; // layui 版本号 this.v = '2.7.6'; // layui 版本号
} }
//识别预先可能定义的指定全局对象 //识别预先可能定义的指定全局对象

22
src/modules/colorpicker.js
View File

@ -162,11 +162,25 @@ layui.define(['jquery', 'lay'], function(exports){
//初始颜色选择框 //初始颜色选择框
Class.prototype.render = function(){ Class.prototype.render = function(){
var that = this var that = this;
,options = that.config var options = that.config;
// 若 elem 非唯一，则拆分为多个实例
var elem = $(options.elem);
if(elem.length > 1){
layui.each(elem, function(){
colorpicker.render($.extend({}, options, {
elem: this
}));
});
return that;
}
// 合并 lay-options 属性上的配置信息
that.config = $.extend(options, lay.options(elem[0]));
//颜色选择框对象 //颜色选择框对象
,elemColorBox = $(['<div class="layui-unselect layui-colorpicker">' var elemColorBox = $(['<div class="layui-unselect layui-colorpicker">'
,'<span '+ (options.format == 'rgb' && options.alpha ,'<span '+ (options.format == 'rgb' && options.alpha
? 'class="layui-colorpicker-trigger-bgcolor"' ? 'class="layui-colorpicker-trigger-bgcolor"'
: '') +'>' : '') +'>'
@ -196,7 +210,7 @@ layui.define(['jquery', 'lay'], function(exports){
,'</div>'].join('')) ,'</div>'].join(''))
//初始化颜色选择框 //初始化颜色选择框
var othis = $(options.elem); var othis = options.elem = $(options.elem);
options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸 options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
//插入颜色选择框 //插入颜色选择框

240
src/modules/form.js
View File

@ -1,20 +1,20 @@
/** /**
* form 表单组件 * form 表单组件
* MIT Licensed
*/ */
layui.define('layer', function(exports){ layui.define(['layer', 'util'], function(exports){
"use strict"; "use strict";
var $ = layui.$ var $ = layui.$;
,layer = layui.layer var layer = layui.layer;
,hint = layui.hint() var util = layui.util;
,device = layui.device() var hint = layui.hint();
var device = layui.device();
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this' var MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this';
,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' var SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled';
,Form = function(){ var Form = function(){
this.config = { this.config = {
verify: { verify: {
required: [ required: [
@ -45,64 +45,64 @@ layui.define('layer', 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;
$.extend(true, that.config.verify, settings); $.extend(true, that.config.verify, settings);
return that; return that;
}; };
//获取指定表单对象 // 获取指定表单对象
Form.prototype.getFormElem = function(filter){ Form.prototype.getFormElem = function(filter){
return $(ELEM + function(){ return $(ELEM + function(){
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);
//赋值 // 赋值
layui.each(object, function(key, value){ layui.each(object, function(key, value){
var itemElem = itemForm.find('[name="'+ key +'"]') var itemElem = itemForm.find('[name="'+ key +'"]')
,type; ,type;
//如果对应的表单不存在，则不执行 // 如果对应的表单不存在，则不执行
if(!itemElem[0]) return; if(!itemElem[0]) return;
type = itemElem[0].type; type = itemElem[0].type;
//如果为复选框 // 如果为复选框
if(type === 'checkbox'){ if(type === 'checkbox'){
itemElem[0].checked = value; itemElem[0].checked = value;
} else if(type === 'radio') { //如果为单选框 } else if(type === 'radio') { // 如果为单选框
itemElem.each(function(){ itemElem.each(function(){
if(this.value == value ){ if(this.value == value ){
this.checked = true this.checked = true
} }
}); });
} else { //其它类型的表单 } else { // 其它类型的表单
itemElem.val(value); itemElem.val(value);
} }
}); });
@ -110,40 +110,40 @@ layui.define('layer', 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; // 复选框和单选框未选中，不记录字段
field[init_name || item.name] = item.value; field[init_name || item.name] = item.value;
}); });
return field; return field;
}; };
//表单控件渲染 // 表单控件渲染
Form.prototype.render = function(type, filter){ Form.prototype.render = function(type, filter){
var that = this var that = this
,options = that.config ,options = that.config
@ -151,21 +151,21 @@ layui.define('layer', function(exports){
return filter ? ('[lay-filter="' + filter +'"]') : ''; return filter ? ('[lay-filter="' + filter +'"]') : '';
}()) }())
,items = { ,items = {
//输入框 // 输入框
input: function(elem){ input: function(elem){
var inputs = elem || elemForm.find('input,textarea'); var inputs = elem || elemForm.find('input,textarea');
//初始化全局的 autocomplete // 初始化全局的 autocomplete
options.autocomplete && inputs.attr('autocomplete', options.autocomplete); options.autocomplete && inputs.attr('autocomplete', options.autocomplete);
} }
//下拉选择框 // 下拉选择框
,select: function(elem){ ,select: function(elem){
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title' var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = '', thatInput ,NONE = 'layui-select-none', initValue = '', thatInput
,selects = elem || elemForm.find('select') ,selects = elem || elemForm.find('select')
//隐藏 select // 隐藏 select
,hide = function(e, clear){ ,hide = function(e, clear){
if(!$(e.target).parent().hasClass(TITLE) || clear){ if(!$(e.target).parent().hasClass(TITLE) || clear){
$('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up'); $('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up');
@ -174,7 +174,7 @@ layui.define('layer', function(exports){
thatInput = null; thatInput = null;
} }
//各种事件 // 各种事件
,events = function(reElem, disabled, isSearch){ ,events = function(reElem, disabled, isSearch){
var select = $(this) var select = $(this)
,title = reElem.find('.' + TITLE) ,title = reElem.find('.' + TITLE)
@ -182,29 +182,29 @@ layui.define('layer', function(exports){
,dl = reElem.find('dl') ,dl = reElem.find('dl')
,dds = dl.children('dd') ,dds = dl.children('dd')
,dts = dl.children('dt') // select分组dt元素 ,dts = dl.children('dt') // select分组dt元素
,index = this.selectedIndex //当前选中的索引 ,index = this.selectedIndex // 当前选中的索引
,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能 ,nearElem; // select 组件当前选中的附近元素，用于辅助快捷键功能
if(disabled) return; if(disabled) return;
// 搜索项 // 搜索项
var laySearch = select.attr('lay-search'); var laySearch = select.attr('lay-search');
//展开下拉 // 展开下拉
var showDown = function(){ 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(); ,dlHeight = dl.outerHeight();
index = select[0].selectedIndex; //获取最新的 selectedIndex index = select[0].selectedIndex; // 获取最新的 selectedIndex
reElem.addClass(CLASS+'ed'); reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE); dds.removeClass(HIDE);
dts.removeClass(HIDE); dts.removeClass(HIDE);
nearElem = null; nearElem = null;
//初始选中样式 // 初始选中样式
dds.eq(index).addClass(THIS).siblings().removeClass(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'); reElem.addClass(CLASS + 'up');
} }
@ -212,7 +212,7 @@ layui.define('layer', function(exports){
followScroll(); followScroll();
} }
//隐藏下拉 // 隐藏下拉
,hideDown = function(choose){ ,hideDown = function(choose){
reElem.removeClass(CLASS+'ed ' + CLASS+'up'); reElem.removeClass(CLASS+'ed ' + CLASS+'up');
input.blur(); input.blur();
@ -223,22 +223,22 @@ layui.define('layer', function(exports){
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]).html(); // 重新获得初始选中值
//如果是第一项，且文本值等于 placeholder，则清空初始值 // 如果是第一项，且文本值等于 placeholder，则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){ if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = ''; initValue = '';
}; };
//如果有选中值，则将输入框纠正为该值。否则清空输入框 // 如果有选中值，则将输入框纠正为该值。否则清空输入框
input.val(initValue || ''); input.val(initValue || '');
} }
}); });
} }
//定位下拉滚动条 // 定位下拉滚动条
,followScroll = function(){ ,followScroll = function(){
var thisDd = dl.children('dd.'+ THIS); var thisDd = dl.children('dd.'+ THIS);
@ -248,18 +248,18 @@ layui.define('layer', function(exports){
,dlHeight = dl.height() ,dlHeight = dl.height()
,ddHeight = thisDd.height(); ,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){
reElem.hasClass(CLASS+'ed') ? ( reElem.hasClass(CLASS+'ed') ? (
hideDown() hideDown()
@ -270,38 +270,38 @@ layui.define('layer', function(exports){
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();
} }
}).on('keydown', function(e){ //键盘按下 }).on('keydown', function(e){ // 键盘按下
var keyCode = e.keyCode; var keyCode = e.keyCode;
//Tab键隐藏 // Tab键隐藏
if(keyCode === 9){ if(keyCode === 9){
hideDown(); hideDown();
} }
//标注 dd 的选中状态 // 标注 dd 的选中状态
var setThisDd = function(prevNext, thisElem1){ var setThisDd = function(prevNext, thisElem1){
var nearDd, cacheNearElem var nearDd, cacheNearElem
e.preventDefault(); e.preventDefault();
//得到当前队列元素 // 得到当前队列元素
var thisElem = function(){ var thisElem = function(){
var thisDd = dl.children('dd.'+ THIS); var thisDd = dl.children('dd.'+ THIS);
//如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前， // 如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前，
//则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断 // 则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断
if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){ if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){
var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')') var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')')
,firstIndex = showDd.eq(0).index(); ,firstIndex = showDd.eq(0).index();
@ -318,31 +318,31 @@ layui.define('layer', function(exports){
} }
return thisDd; return thisDd;
//return dds.eq(index); // return dds.eq(index);
}(); }();
cacheNearElem = thisElem[prevNext](); //当前元素的附近元素 cacheNearElem = thisElem[prevNext](); // 当前元素的附近元素
nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素 nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); // 当前可视元素的 dd 元素
//如果附近的元素不存在，则停止执行，并清空 nearElem // 如果附近的元素不存在，则停止执行，并清空 nearElem
if(!cacheNearElem[0]) return nearElem = null; if(!cacheNearElem[0]) return nearElem = null;
//记录附近的元素，让其成为下一个当前元素 // 记录附近的元素，让其成为下一个当前元素
nearElem = thisElem[prevNext](); nearElem = thisElem[prevNext]();
//如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找 // 如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){ if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){
return setThisDd(prevNext, nearElem); return setThisDd(prevNext, nearElem);
} }
nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式 nearDd.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');
@ -357,7 +357,7 @@ layui.define('layer', function(exports){
var text = othis.text(); var text = othis.text();
// 是否区分大小写 // 是否区分大小写
if(laySearch !== 'exact'){ if(laySearch !== 'cs'){
text = text.toLowerCase(); text = text.toLowerCase();
value = value.toLowerCase(); value = value.toLowerCase();
} }
@ -379,7 +379,7 @@ layui.define('layer', function(exports){
return callback(none), none; return callback(none), none;
}; };
//搜索匹配 // 搜索匹配
var search = function(e){ var search = function(e){
var value = this.value, keyCode = e.keyCode; var value = this.value, keyCode = e.keyCode;
@ -402,33 +402,33 @@ layui.define('layer', function(exports){
dl.find('.'+NONE).remove(); dl.find('.'+NONE).remove();
} }
followScroll(); //定位滚动条 followScroll(); // 定位滚动条
}; };
if(isSearch){ if(isSearch){
input.on('keyup', search).on('blur', function(e){ input.on('keyup', search).on('blur', function(e){
var selectedIndex = select[0].selectedIndex; var selectedIndex = select[0].selectedIndex;
thatInput = input; //当前的 select 中的 input 元素 thatInput = input; // 当前的 select 中的 input 元素
initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值 initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值
//如果是第一项，且文本值等于 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
}, 'blur'); }, 'blur');
}, 200); }, 200);
}); });
} }
//选择 // 选择
dds.on('click', function(){ dds.on('click', 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;
@ -455,7 +455,7 @@ layui.define('layer', function(exports){
return false; return false;
}); });
$(document).off('click', hide).on('click', hide); //点击其它元素关闭 select $(document).off('click', hide).on('click', hide); // 点击其它元素关闭 select
} }
selects.each(function(index, select){ selects.each(function(index, select){
@ -463,7 +463,7 @@ layui.define('layer', function(exports){
,hasRender = othis.next('.'+CLASS) ,hasRender = othis.next('.'+CLASS)
,disabled = this.disabled ,disabled = this.disabled
,value = select.value ,value = select.value
,selected = $(select.options[select.selectedIndex]) //获取当前选中项 ,selected = $(select.options[select.selectedIndex]) // 获取当前选中项
,optionsFirst = select.options[0]; ,optionsFirst = select.options[0];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
@ -473,16 +473,16 @@ layui.define('layer', function(exports){
optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS) optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)
) : TIPS; ) : TIPS;
//替代元素 // 替代元素
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
,(disabled ? ' layui-select-disabled' : '') +'">' ,(disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'">' ,'<div class="'+ TITLE +'">'
,('<input type="text" placeholder="'+ $.trim(placeholder) +'" ' ,('<input type="text" placeholder="'+ util.escape($.trim(placeholder)) +'" '
+('value="'+ $.trim(value ? selected.html() : '') +'"') //默认值 +('value="'+ util.escape($.trim(value ? selected.html() : '')) +'"') // 默认值
+((!disabled && isSearch) ? '' : ' readonly') //是否开启搜索 +((!disabled && isSearch) ? '' : ' readonly') // 是否开启搜索
+' class="layui-input' +' class="layui-input'
+(isSearch ? '' : ' layui-unselect') +(isSearch ? '' : ' layui-unselect')
+ (disabled ? (' ' + DISABLED) : '') +'">') //禁用状态 + (disabled ? (' ' + DISABLED) : '') +'">') // 禁用状态
,'<i class="layui-edge"></i></div>' ,'<i class="layui-edge"></i></div>'
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">' ,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
,function(options){ ,function(options){
@ -493,7 +493,7 @@ layui.define('layer', function(exports){
} else if(item.tagName.toLowerCase() === 'optgroup'){ } else if(item.tagName.toLowerCase() === 'optgroup'){
arr.push('<dt>'+ item.label +'</dt>'); arr.push('<dt>'+ item.label +'</dt>');
} else { } else {
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>'); arr.push('<dd lay-value="'+ util.escape(item.value) +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>');
} }
}); });
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>'); arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
@ -501,13 +501,13 @@ layui.define('layer', function(exports){
}(othis.find('*')) +'</dl>' }(othis.find('*')) +'</dl>'
,'</div>'].join('')); ,'</div>'].join(''));
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem); othis.after(reElem);
events.call(this, reElem, disabled, isSearch); events.call(this, reElem, disabled, isSearch);
}); });
} }
//复选框/开关 // 复选框/开关
,checkbox: function(elem){ ,checkbox: function(elem){
var CLASS = { var CLASS = {
checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox'] checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox']
@ -518,9 +518,9 @@ layui.define('layer', function(exports){
,events = function(reElem, RE_CLASS){ ,events = function(reElem, RE_CLASS){
var check = $(this); var check = $(this);
//勾选 // 勾选
reElem.on('click', function(){ reElem.on('click', function(){
var filter = check.attr('lay-filter') //获取过滤器 var filter = check.attr('lay-filter') // 获取过滤器
,text = (check.attr('lay-text')||'').split('|'); ,text = (check.attr('lay-text')||'').split('|');
if(check[0].disabled) return; if(check[0].disabled) return;
@ -549,37 +549,37 @@ layui.define('layer', function(exports){
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
//替代元素 // 替代元素
var hasRender = othis.next('.' + RE_CLASS[0]) var hasRender = othis.next('.' + RE_CLASS[0])
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0] ,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
,(check.checked ? (' '+ RE_CLASS[1]) : '') //选中状态 ,(check.checked ? (' '+ RE_CLASS[1]) : '') // 选中状态
,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') //禁用状态 ,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') // 禁用状态
,'"' ,'"'
,(skin ? ' lay-skin="'+ skin +'"' : '') //风格 ,(skin ? ' lay-skin="'+ skin +'"' : '') // 风格
,'>' ,'>'
,function(){ //不同风格的内容 ,function(){ // 不同风格的内容
var title = check.title.replace(/\s/g, '') var title = check.title.replace(/\s/g, '')
,type = { ,type = {
//复选框 // 复选框
checkbox: [ checkbox: [
(title ? ('<span>'+ check.title +'</span>') : '') (title ? ('<span>'+ check.title +'</span>') : '')
,'<i class="layui-icon layui-icon-ok"></i>' ,'<i class="layui-icon layui-icon-ok"></i>'
].join('') ].join('')
//开关 // 开关
,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>' ,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>'
}; };
return type[skin] || type['checkbox']; return type[skin] || type['checkbox'];
}() }()
,'</div>'].join('')); ,'</div>'].join(''));
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem); othis.after(reElem);
events.call(this, reElem, RE_CLASS); events.call(this, reElem, RE_CLASS);
}); });
} }
//单选框 // 单选框
,radio: function(elem){ ,radio: function(elem){
var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;'] var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;']
,radios = elem || elemForm.find('input[type=radio]') ,radios = elem || elemForm.find('input[type=radio]')
@ -589,8 +589,8 @@ layui.define('layer', function(exports){
reElem.on('click', function(){ reElem.on('click', function(){
var name = radio[0].name, forms = radio.parents(ELEM); var name = radio[0].name, forms = radio.parents(ELEM);
var filter = radio.attr('lay-filter'); //获取过滤器 var filter = radio.attr('lay-filter'); // 获取过滤器
var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); //找到相同name的兄弟 var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); // 找到相同name的兄弟
if(radio[0].disabled) return; if(radio[0].disabled) return;
@ -617,18 +617,18 @@ layui.define('layer', function(exports){
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled; var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
//替代元素 // 替代元素
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 : '') +'">' // 禁用状态
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>' ,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
,'<div>'+ function(){ ,'<div>'+ function(){
var title = radio.title || ''; var title = radio.title || '';
if(typeof othis.next().attr('lay-radio') === 'string'){ if(typeof othis.next().attr('lay-radio') === 'string'){
title = othis.next().html(); title = othis.next().html();
//othis.next().remove(); // othis.next().remove();
} }
return title return title
}() +'</div>' }() +'</div>'
@ -759,8 +759,8 @@ layui.define('layer', function(exports){
// 提交表单并校验 // 提交表单并校验
var submit = Form.prototype.submit = function(filter, callback){ var submit = Form.prototype.submit = function(filter, callback){
var field = {}; //字段集合 var field = {}; // 字段集合
var button = $(this); //当前触发的按钮 var button = $(this); // 当前触发的按钮
// 表单域 lay-filter 属性值 // 表单域 lay-filter 属性值
var layFilter = typeof filter === 'string' var layFilter = typeof filter === 'string'
@ -775,27 +775,27 @@ layui.define('layer', function(exports){
// 获取需要校验的元素 // 获取需要校验的元素
var verifyElem = elem.find('*[lay-verify]'); var verifyElem = elem.find('*[lay-verify]');
//开始校验 // 开始校验
if(!form.validate(verifyElem)) return false; if(!form.validate(verifyElem)) return false;
//获取当前表单值 // 获取当前表单值
field = form.getValue(null, elem); field = form.getValue(null, elem);
//返回的参数 // 返回的参数
var params = { var params = {
elem: this.getFormElem ? (window.event && window.event.target) : this //触发事件的对象 elem: this.getFormElem ? (window.event && window.event.target) : this // 触发事件的对象
,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);
}; };
//自动完成渲染 // 自动完成渲染
var form = new Form() var form = new Form()
,$dom = $(document), $win = $(window); ,$dom = $(document), $win = $(window);
@ -803,7 +803,7 @@ layui.define('layer', function(exports){
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');
setTimeout(function(){ setTimeout(function(){
@ -811,7 +811,7 @@ layui.define('layer', function(exports){
}, 50); }, 50);
}); });
//表单提交事件 // 表单提交事件
$dom.on('submit', ELEM, submit) $dom.on('submit', ELEM, submit)
.on('click', '*[lay-submit]', submit); .on('click', '*[lay-submit]', submit);

20
src/modules/transfer.js
View File

@ -427,14 +427,22 @@ layui.define(['laytpl', 'form'], function(exports){
//搜索 //搜索
that.laySearch.find('input').on('keyup', function(){ that.laySearch.find('input').on('keyup', function(){
var value = this.value var value = this.value;
,thisDataElem = $(this).parents('.'+ ELEM_SEARCH).eq(0).siblings('.'+ ELEM_DATA) var thisDataElem = $(this).parents('.'+ ELEM_SEARCH).eq(0).siblings('.'+ ELEM_DATA);
,thisListElem = thisDataElem.children('li'); var thisListElem = thisDataElem.children('li');
thisListElem.each(function(){ thisListElem.each(function(){
var thisList = $(this) var thisList = $(this);
,thisElemCheckbox = thisList.find('input[type="checkbox"]') var thisElemCheckbox = thisList.find('input[type="checkbox"]');
,isMatch = thisElemCheckbox[0].title.indexOf(value) !== -1; var title = thisElemCheckbox[0].title;
// 是否区分大小写
if(options.showSearch !== 'cs'){
title = title.toLowerCase();
value = value.toLowerCase();
}
var isMatch = title.indexOf(value) !== -1;
thisList[isMatch ? 'removeClass': 'addClass'](HIDE); thisList[isMatch ? 'removeClass': 'addClass'](HIDE);
thisElemCheckbox.data('hide', isMatch ? false : true); thisElemCheckbox.data('hide', isMatch ? false : true);