-
+
-
-
+
+
+
+
+
+
+
+
diff --git a/src/css/layui.css b/src/css/layui.css
index 6f131003..57941caa 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -551,6 +551,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-tab-card,
.layui-input, .layui-textarea, .layui-select,
+.layui-input-split,
.layui-form-pane .layui-form-label,
.layui-form-pane .layui-form-item[pane]{border-color: #eee;}
@@ -687,8 +688,43 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-danger:focus,
.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
+/* 输入框套件 */
+.layui-input-wrap{position: relative; height: 38px; line-height: 38px;}
+.layui-input-wrap .layui-input{padding-right: 35px; cursor: pointer;}
+.layui-input-wrap .layui-input::-ms-clear,
+.layui-input-wrap .layui-input::-ms-reveal{display: none;}
+.layui-input-wrap-prefix .layui-input{padding-left:35px;}
+
+.layui-input-prefix,
+.layui-input-suffix,
+.layui-input-split{position: absolute; right: 0; top: 0; padding: 0 10px; width: 35px; height: 100%; text-align: center; transition: all .3s; cursor: pointer; pointer-events: none; box-sizing: border-box;}
+.layui-input-prefix{left: 0; border-radius: 2px 0 0 2px;}
+.layui-input-suffix{right: 0; border-radius: 0 2px 2px 0;}
+
+.layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #d2d2d2;}
+.layui-input-prefix .layui-icon,
+.layui-input-suffix .layui-icon,
+.layui-input-split .layui-icon{position: relative; font-size: 16px; color: #5F5F5F; transition: all .3s;}
+.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;}
+
+.layui-input-wrap-prefix .layui-form-select{position: static;}
+
+.layui-input-affix-event .layui-icon{color: rgba(0,0,0,.8);}
+.layui-input-affix-event .layui-icon-clear{color: rgba(0,0,0,.3);}
+.layui-input-affix-event .layui-icon:hover{color: rgba(0,0,0,.6);}
+
+.layui-input-split{border-width: 1px; border-style: solid;}
+.layui-input-affix-event{pointer-events: auto;}
+
+/* 输入框组 */
+.layui-input-group{position: relative; display: inline-table; cursor: pointer}
+.layui-input-group>*{display: table-cell; vertical-align: middle; position: relative; cursor: pointer;}
+.layui-input-group .layui-input{padding-right: 15px;}
+.layui-input-group .layui-input-prefix{width: auto; border-right: 0;}
+.layui-input-group .layui-input-suffix{width: auto; border-left: 0;}
+
/* 下拉选择 */
-.layui-form-select{position: relative;}
+.layui-form-select{position: relative; color: #5F5F5F;}
.layui-form-select .layui-input{padding-right: 30px; cursor: pointer;}
.layui-form-select .layui-edge{position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s;}
.layui-form-select dl{display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #eee; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box;}
@@ -699,7 +735,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-select dl dd:hover{background-color: #F6F6F6; -webkit-transition: .5s all; transition: .5s all;}
.layui-form-select .layui-select-group dd{padding-left: 20px;}
.layui-form-select dl dd.layui-select-tips{padding-left: 10px !important; color: #999;}
-.layui-form-select dl dd.layui-this{background-color: #5FB878; color: #fff;}
+.layui-form-select dl dd.layui-this{background-color: #F7F7F7; color: #5FB878; font-weight: 700;}
/*.layui-form-select dl dd.layui-this{background-color: #F6F6F6; color: #5FB878; font-weight: 700;}*/
.layui-form-select dl dd.layui-disabled{background-color: #fff;}
.layui-form-selected dl{display: block;}
diff --git a/src/modules/form.js b/src/modules/form.js
index 0f0260fd..08a602f3 100644
--- a/src/modules/form.js
+++ b/src/modules/form.js
@@ -145,18 +145,81 @@ layui.define(['layer', 'util'], function(exports){
// 表单控件渲染
Form.prototype.render = function(type, filter){
- var that = this
- ,options = that.config
- ,elemForm = $(ELEM + function(){
+ var that = this;
+ var options = that.config;
+ var elemForm = $(ELEM + function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
- }())
- ,items = {
+ }());
+ var items = {
// 输入框
input: function(elem){
var inputs = elem || elemForm.find('input,textarea');
// 初始化全局的 autocomplete
options.autocomplete && inputs.attr('autocomplete', options.autocomplete);
+
+ // 初始化 input 套件
+ elemForm.find('input[lay-affix],textarea[lay-affix]').each(function(){
+ var othis = $(this);
+ var affix = othis.attr('lay-affix');
+ var CLASS_SUFFIX = 'layui-input-suffix';
+ var elemNext = othis.next('.'+ CLASS_SUFFIX);
+ var hideElem = function(elem, value){
+ if(!elem) return;
+ elem[$.trim(value) ? 'removeClass' : 'addClass'](HIDE);
+ };
+ var renderSuffix = function(type){
+ elemNext.remove();
+ elemNext = $(['
'
+ ,''
+ ,'
'].join(''));
+
+ othis.after(elemNext);
+ hideElem(elemNext, othis.val());
+
+ // 输入事件
+ othis.on('input propertychange', function(){
+ var value = this.value;
+ hideElem(elemNext, value);
+ });
+
+ // 点击后缀套件事件
+ elemNext.on('click', function(){
+ var filter = othis.attr('lay-filter');
+ obj[affix] && obj[affix][1].call(this);
+
+ // 对外事件
+ layui.event.call(this, MOD_NAME, 'input-affix('+ filter +')', {
+ elem: othis[0]
+ ,affix: affix
+ });
+ });
+ };
+
+ // 渲染内置套件
+ var obj = {
+ // 清空
+ clear: [function(){ // 渲染
+ renderSuffix('clear');
+ }, function(){ // 事件
+ othis.val('').focus();
+ hideElem(elemNext, null);
+ }]
+
+ // 密码显隐
+ ,eye: [function(){ // 渲染
+ renderSuffix('eye');
+ }, function(){ // 事件
+ var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW';
+ var isShow = othis.data(SHOW_NAME);
+
+ othis.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow);
+ renderSuffix(isShow ? 'eye' : 'eye-invisible');
+ }]
+ };
+
+ obj[affix] && obj[affix][0]();
+ });
}
// 下拉选择框
@@ -440,7 +503,8 @@ layui.define(['layer', 'util'], function(exports){
}
othis.siblings().removeClass(THIS);
- select.val(value).removeClass('layui-form-danger')
+ select.val(value).removeClass('layui-form-danger');
+
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
elem: select[0]
,value: value
@@ -488,9 +552,11 @@ layui.define(['layer', 'util'], function(exports){
,function(options){
var arr = [];
layui.each(options, function(index, item){
- if(index === 0 && !item.value){
+ var tagName = item.tagName.toLowerCase();
+
+ if(index === 0 && !item.value && tagName !== 'optgroup'){
arr.push('
'+ $.trim(item.innerHTML || TIPS) +'');
- } else if(item.tagName.toLowerCase() === 'optgroup'){
+ } else if(tagName === 'optgroup'){
arr.push('
'+ item.label +'');
} else {
arr.push('
'+ $.trim(item.innerHTML) +'');
@@ -562,7 +628,7 @@ layui.define(['layer', 'util'], function(exports){
,type = {
// 复选框
checkbox: [
- (title ? ('
'+ check.title +'') : '')
+ (title ? ('
'+ util.escape(check.title) +'') : '')
,'
'
].join('')
@@ -625,7 +691,7 @@ layui.define(['layer', 'util'], function(exports){
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' // 禁用状态
,'
'+ ICON[radio.checked ? 0 : 1] +''
,'
'+ function(){
- var title = radio.title || '';
+ var title = util.escape(radio.title || '');
if(typeof othis.next().attr('lay-radio') === 'string'){
title = othis.next().html();
// othis.next().remove();
@@ -668,7 +734,7 @@ layui.define(['layer', 'util'], function(exports){
return that;
};
- // elem 即要验证的区域表单选择器 - return true or false
+ // 主动触发验证 -- elem 即要验证的区域表单选择器 / return true or false
Form.prototype.validate = function(elem){
var that = this;
var stop = null; // 验证不通过状态