refactor: 同步 lgbSelect 脚本
This commit is contained in:
Argo Zhang
parent
fcb50ffda4
commit
0a943114eb
|
|
@ -66,69 +66,58 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select-input:hover {
|
||||
.form-select-input:hover, .form-select-input:focus {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.form-select-input.primary:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
||||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
.form-select-input.info:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
|
||||
border-color: #17a2b8;
|
||||
}
|
||||
|
||||
.form-select-input.success:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.form-select-input.warning:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.form-select-input.danger:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
|
||||
border: 1px solid #dc3545;
|
||||
}
|
||||
|
||||
.form-select-input:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-select-input.border-primary:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
||||
}
|
||||
|
||||
.form-select-input.primary:focus {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
||||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
.form-select-input.info:focus {
|
||||
.form-select-input.border-info:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
|
||||
border-color: #17a2b8;
|
||||
}
|
||||
|
||||
.form-select-input.success:focus {
|
||||
.form-select-input.border-success:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.form-select-input.warning:focus {
|
||||
.form-select-input.border-warning:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.form-select-input.danger:focus {
|
||||
.form-select-input.border-danger:hover {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
|
||||
border: 1px solid #dc3545;
|
||||
}
|
||||
|
||||
.form-select-input.is-valid, .form-select-input.is-invalid {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.form-select-input.is-invalid:hover {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.form-select-input.is-invalid + .form-select-append {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.form-select-input.is-valid:hover {
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.form-select-input.is-valid + .form-select-append {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
input.form-control[data-toggle='lgbSelect'] {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.form-select-append {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -20,38 +20,27 @@
|
|||
lgbSelect.Template += '</div>';
|
||||
lgbSelect.DEFAULTS = {
|
||||
placeholder: "请选择 ...",
|
||||
borderClass: null
|
||||
borderClass: null,
|
||||
textClass: {
|
||||
'border-primary': 'text-primary',
|
||||
'border-info': 'text-info',
|
||||
'border-success': 'text-success',
|
||||
'border-warning': 'text-warning',
|
||||
'border-danger': 'text-danger',
|
||||
'border-secondary': 'text-secondary'
|
||||
},
|
||||
attributes: ["data-valid", "data-required-msg", "class"]
|
||||
};
|
||||
lgbSelect.AllowMethods = /disabled|enable|val|reset|get/;
|
||||
|
||||
function Plugin(option) {
|
||||
var params = $.makeArray(arguments).slice(1);
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data(lgbSelect.DataKey);
|
||||
var options = typeof option === 'object' && option;
|
||||
|
||||
if (!data) $this.data(lgbSelect.DataKey, data = new lgbSelect(this, options));
|
||||
if (!lgbSelect.AllowMethods.test(option)) return;
|
||||
if (typeof option === 'string') {
|
||||
data[option].apply(data, params);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.lgbSelect = Plugin;
|
||||
$.fn.lgbSelect.Constructor = lgbSelect;
|
||||
|
||||
var _proto = lgbSelect.prototype;
|
||||
_proto.initDom = function () {
|
||||
var that = this;
|
||||
|
||||
// 初始化根据不同的控件进行不同的方案
|
||||
if (this.$element.prop('nodeName') === 'SELECT') this.initBySelect();
|
||||
else this.init();
|
||||
|
||||
this.initBySelect();
|
||||
if (this.options.borderClass) {
|
||||
this.$input.addClass(this.options.borderClass);
|
||||
this.$menubar.addClass(this.options.textClass[this.options.borderClass]);
|
||||
}
|
||||
this.$input.attr('placeholder', this.options.placeholder);
|
||||
|
||||
|
|
@ -95,70 +84,57 @@
|
|||
}
|
||||
};
|
||||
|
||||
_proto.init = function () {
|
||||
this.$ctl = this.$element;
|
||||
this.$element = this.$ctl.find('input:hidden[data-toggle="lgbSelect"]');
|
||||
|
||||
// 下拉组合框
|
||||
this.$input = this.$ctl.find('.form-select-input');
|
||||
this.$menus = this.$ctl.find('.dropdown-menu');
|
||||
|
||||
this.source = this.$menus.children().map(function (index, ele) {
|
||||
return { value: $(ele).attr('data-val'), text: $(ele).text(), selected: $(ele).selected };
|
||||
});
|
||||
|
||||
// 设置值
|
||||
var value = this.$input.val();
|
||||
var option = this.$menus.find('a[data-val="' + value + '"]');
|
||||
if (option.length === 0) option = this.$menus.find('a[data-val="' + this.$element.attr('data-default-val') + '"]');
|
||||
if (option.length === 1) option.addClass('active');
|
||||
|
||||
this.$input.val(option.text());
|
||||
this.$element.val(option.attr('data-val')).attr('data-text', option.text());
|
||||
};
|
||||
|
||||
_proto.initBySelect = function () {
|
||||
var that = this;
|
||||
|
||||
// 原有控件
|
||||
this.$element.addClass('d-none');
|
||||
|
||||
var $input = this.$element.prev();
|
||||
if ($input.attr('data-toggle') === 'lgbSelect') $input.remove();
|
||||
// 新控件 <div class="form-select">
|
||||
this.$ctl = $(lgbSelect.Template).insertBefore(this.$element);
|
||||
|
||||
// 下拉组合框
|
||||
this.$input = this.$ctl.find('.form-select-input');
|
||||
this.$menubar = this.$ctl.find('.form-select-append');
|
||||
this.$menus = this.$ctl.find('.dropdown-menu');
|
||||
|
||||
// init dropdown-menu data
|
||||
var data = this.$element.find('option').map(function () {
|
||||
return { value: this.value, text: this.text, selected: this.selected }
|
||||
});
|
||||
}).toArray();
|
||||
|
||||
// bind attribute
|
||||
["data-valid", "data-required-msg"].forEach(function (v, index) {
|
||||
if (that.$element.attr(v) !== undefined) {
|
||||
that.$input.attr(v, that.$element.attr(v));
|
||||
// create new element
|
||||
// <input type="hidden" data-toggle="lgbSelect" />
|
||||
this.createElement();
|
||||
|
||||
// init dropdown-menu
|
||||
this.reset(data);
|
||||
};
|
||||
|
||||
_proto.createElement = function () {
|
||||
var that = this;
|
||||
|
||||
// move attributes
|
||||
this.options.attributes.forEach(function (name, index) {
|
||||
var value = that.$element.attr(name)
|
||||
if (value !== undefined) {
|
||||
if (name === 'class') that.$input.addClass(value).removeClass('d-none');
|
||||
else that.$input.attr(name, that.$element.attr(name));
|
||||
}
|
||||
});
|
||||
|
||||
// save ori attrs
|
||||
// save attributes
|
||||
var attrs = [];
|
||||
["id", "data-default-val"].forEach(function (v, index) {
|
||||
attrs.push({ name: v, value: that.$element.attr(v) });
|
||||
var value = that.$element.attr(v);
|
||||
if (value !== undefined) attrs.push({ name: v, value: value });
|
||||
});
|
||||
|
||||
// replace element select -> input hidden
|
||||
this.$element.remove();
|
||||
this.$element = $('<input type="hidden" data-toggle="lgbSelect" />').val(that.val()).insertBefore(this.$input);
|
||||
|
||||
// bind ori atts
|
||||
// restore attributes
|
||||
attrs.forEach(function (v) {
|
||||
that.$element.attr(v.name, v.value);
|
||||
});
|
||||
|
||||
// init dropdown-menu
|
||||
this.reset(data);
|
||||
};
|
||||
|
||||
_proto.closeMenu = function () {
|
||||
|
|
@ -179,11 +155,11 @@
|
|||
var that = this;
|
||||
|
||||
// keep old value
|
||||
var oldValue = this.$input.val();
|
||||
var oldValue = this.$input.attr('value');
|
||||
|
||||
// warning: must use attr('value') method instead of val(). otherwise the others input html element will filled by first element value.
|
||||
// see https://gitee.com/LongbowEnterprise/longbow-select/issues/IZ3BR?from=project-issue
|
||||
this.$input.attr('value', '');
|
||||
this.$input.attr('value', '').removeClass('is-valid is-invalid');
|
||||
this.$menus.html('');
|
||||
$.each(value, function (index) {
|
||||
var $item = $('<a class="dropdown-item" href="#" data-val="' + this.value + '">' + this.text + '</a>');
|
||||
|
|
@ -223,6 +199,28 @@
|
|||
}
|
||||
};
|
||||
|
||||
function Plugin(option) {
|
||||
var params = $.makeArray(arguments).slice(1);
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
|
||||
// 保护重复生成
|
||||
if ($this.hasClass('form-select')) return;
|
||||
|
||||
var data = $this.data(lgbSelect.DataKey);
|
||||
var options = typeof option === 'object' && option;
|
||||
|
||||
if (!data) $this.data(lgbSelect.DataKey, data = new lgbSelect(this, options));
|
||||
if (!lgbSelect.AllowMethods.test(option)) return;
|
||||
if (typeof option === 'string') {
|
||||
data[option].apply(data, params);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.lgbSelect = Plugin;
|
||||
$.fn.lgbSelect.Constructor = lgbSelect;
|
||||
|
||||
$(function () {
|
||||
$('[data-toggle="lgbSelect"]').lgbSelect();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue