From a234d9b0dec12b0a5c6c83d6ce0b0ed8c3df91a7 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sat, 10 Aug 2019 16:01:09 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5longbow-select?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=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 | 97 +++++++++---------- .../lib/longbow-select/longbow-select.js | 44 +++------ 2 files changed, 58 insertions(+), 83 deletions(-) diff --git a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css index b0cb80ca..21617440 100644 --- a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css +++ b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.css @@ -1,63 +1,54 @@ -.form-select { - position: relative; +.form-select .dropdown-menu { + margin-top: 10px; + max-height: 274px; + overflow-x: hidden; + padding: 0.25rem 0; + width: 100%; } - .form-select .dropdown-menu { - margin-top: 14px; - max-height: 274px; - overflow-x: hidden; - padding: 0.25rem 0; - } +.form-select .dropdown-menu-arrow { + width: 0; + height: 0; + border-width: 0 6px 6px; + border-style: solid; + border-color: transparent transparent rgba(0,0,0,.15); + position: absolute; + left: 20px; + margin-top: 4px; + z-index: 1001; + display: none; +} - .form-select .dropdown-menu-arrow { + .form-select .dropdown-menu-arrow:after { + content: " "; width: 0; height: 0; border-width: 0 6px 6px; border-style: solid; - border-color: transparent transparent rgba(0,0,0,.15); + border-color: transparent transparent #fff; position: absolute; - left: 20px; - z-index: 1001; - margin-top: 8px; + top: 1px; + left: -6px; } - .form-select .dropdown-menu, .form-select .dropdown-menu-arrow { - display: none; - opacity: 0; - transition: opacity .3s; - } +.form-select .form-select-input[readonly] { + background-color: #fff; +} - .form-select .dropdown-menu-arrow:after { - content: " "; - width: 0; - height: 0; - border-width: 0 6px 6px; - border-style: solid; - border-color: transparent transparent #fff; - position: absolute; - top: 1px; - left: -6px; - } +.form-select.show .dropdown-menu-arrow { + display: block; +} - .form-select .form-select-input[readonly] { - background-color: #fff; - } - - .form-select.open .dropdown-menu, .form-select.open .dropdown-menu-arrow { - display: block; - opacity: 1; - } +.form-select.show .form-select-append i { + transform: rotate(0); +} - .form-select.open .form-select-append i { - transform: rotate(0); - } - - .form-select.is-disabled .form-select-input { - background-color: #f5f7fa; - border-color: #e4e7ed; - color: #c0c4cc; - cursor: not-allowed; - } +.form-select.is-disabled .form-select-input { + background-color: #f5f7fa; + border-color: #e4e7ed; + color: #c0c4cc; + cursor: not-allowed; +} .form-select-input { color: #606266; @@ -102,17 +93,17 @@ border-color: #dc3545; } - .form-select-input.is-invalid + .form-select-append { - 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; - } + .form-select-input.is-valid + .form-select-append { + color: #28a745; + } input.form-control[data-toggle='lgbSelect'] { width: 210px; diff --git a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js index b36828aa..3ca77918 100644 --- a/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js +++ b/Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js @@ -10,8 +10,7 @@ lgbSelect.VERSION = '1.0'; lgbSelect.Author = 'argo@163.com'; lgbSelect.DataKey = "lgb.select"; - lgbSelect.Template = '
'; - lgbSelect.Template += ''; + lgbSelect.Template = '
'; lgbSelect.Template += ''; lgbSelect.Template += ' '; lgbSelect.Template += ''; @@ -46,15 +45,6 @@ this.$element.data(lgbSelect.DataKey, this); - // bind event - this.$ctl.on('click', '.form-select-input', function (e) { - e.preventDefault(); - - that.$ctl.toggleClass('open'); - // calc width - that.$ctl.find('.dropdown-menu').outerWidth(that.$ctl.outerWidth()); - }); - this.$ctl.on('click', 'a.dropdown-item', function (e) { e.preventDefault(); @@ -63,11 +53,6 @@ that.val($this.attr('data-val'), true); }); - $(document).on('click', function (e) { - if (that.$input[0] !== e.target) - that.closeMenu(); - }); - var getUID = function (prefix) { if (!prefix) prefix = 'lgb'; do prefix += ~~(Math.random() * 1000000); @@ -86,16 +71,20 @@ _proto.initBySelect = function () { var $input = this.$element.prev(); - if ($input.attr('data-toggle') === 'lgbSelect') $input.remove(); + // 新控件
this.$ctl = $(lgbSelect.Template).insertBefore(this.$element); + if ($input.attr('data-toggle') === 'lgbSelect') { + this.$input = $input.addClass("form-select-input").attr("aria-haspopup", "true").attr("aria-expanded", "false").attr("data-toggle", "dropdown"); + } + else { + this.$input = $(''); + } // 下拉组合框 - 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 + this.$input.insertBefore(this.$menubar); var data = this.$element.find('option').map(function () { return { value: this.value, text: this.text, selected: this.selected } }).toArray(); @@ -106,6 +95,9 @@ // init dropdown-menu this.reset(data); + + // init dropdown-menu data + this.$input.dropdown(); }; _proto.createElement = function () { @@ -113,7 +105,7 @@ // move attributes this.options.attributes.forEach(function (name, index) { - var value = that.$element.attr(name) + 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)); @@ -137,10 +129,6 @@ }); }; - _proto.closeMenu = function () { - this.$ctl.removeClass('open'); - }; - _proto.disabled = function () { this.$ctl.addClass('is-disabled'); this.$input.attr('disabled', 'disabled'); @@ -203,10 +191,6 @@ 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; @@ -222,6 +206,6 @@ $.fn.lgbSelect.Constructor = lgbSelect; $(function () { - $('[data-toggle="lgbSelect"]').lgbSelect(); + $('select[data-toggle="lgbSelect"]').lgbSelect(); }); })(jQuery);