From 0a943114ebafffb9795f62aa79273c41341179e1 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 26 Jul 2019 12:42:31 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=90=8C=E6=AD=A5=20lgbSelect=20?= =?UTF-8?q?=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/longbow-select/longbow-select.css | 69 ++++------ .../lib/longbow-select/longbow-select.js | 124 +++++++++--------- 2 files changed, 90 insertions(+), 103 deletions(-) diff --git a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css index bcc7b5b3..b0cb80ca 100644 --- a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css +++ b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css @@ -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%; diff --git a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js index 71a709e3..b36828aa 100644 --- a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js +++ b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js @@ -20,38 +20,27 @@ lgbSelect.Template += ''; 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(); // 新控件
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 + // + 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 = $('').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 = $('' + this.text + ''); @@ -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(); });