innov
/
BootstrapAdmin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: 同步 longbow-select 脚本到 client 网站

This commit is contained in:
Argo Zhang 2019-08-10 20:45:47 +08:00
parent d8c3a5193d
commit aa1d757d81
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
2 changed files with 58 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
Bootstrap.Client/wwwroot/lib/longbow-select/longbow-select.css
View File

@ -1,63 +1,54 @@
.form-select { .form-select .dropdown-menu {
position: relative; margin-top: 10px;
max-height: 274px;
overflow-x: hidden;
padding: 0.25rem 0;
width: 100%;
} }
.form-select .dropdown-menu { .form-select .dropdown-menu-arrow {
margin-top: 14px; width: 0;
max-height: 274px; height: 0;
overflow-x: hidden; border-width: 0 6px 6px;
padding: 0.25rem 0; 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; width: 0;
height: 0; height: 0;
border-width: 0 6px 6px; border-width: 0 6px 6px;
border-style: solid; border-style: solid;
border-color: transparent transparent rgba(0,0,0,.15); border-color: transparent transparent #fff;
position: absolute; position: absolute;
left: 20px; top: 1px;
z-index: 1001; left: -6px;
margin-top: 8px;
} }
.form-select .dropdown-menu, .form-select .dropdown-menu-arrow { .form-select .form-select-input[readonly] {
display: none; background-color: #fff;
opacity: 0; }
transition: opacity .3s;
}
.form-select .dropdown-menu-arrow:after { .form-select.show .dropdown-menu-arrow {
content: " "; display: block;
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 .form-select-input[readonly] { .form-select.show .form-select-append i {
background-color: #fff; transform: rotate(0);
} }
.form-select.open .dropdown-menu, .form-select.open .dropdown-menu-arrow {
display: block;
opacity: 1;
}
.form-select.open .form-select-append i { .form-select.is-disabled .form-select-input {
transform: rotate(0); background-color: #f5f7fa;
} border-color: #e4e7ed;
color: #c0c4cc;
.form-select.is-disabled .form-select-input { cursor: not-allowed;
background-color: #f5f7fa; }
border-color: #e4e7ed;
color: #c0c4cc;
cursor: not-allowed;
}
.form-select-input { .form-select-input {
color: #606266; color: #606266;
@ -102,17 +93,17 @@
border-color: #dc3545; border-color: #dc3545;
} }
.form-select-input.is-invalid + .form-select-append { .form-select-input.is-invalid + .form-select-append {
color: #dc3545; color: #dc3545;
} }
.form-select-input.is-valid:hover { .form-select-input.is-valid:hover {
border-color: #28a745; border-color: #28a745;
} }
.form-select-input.is-valid + .form-select-append { .form-select-input.is-valid + .form-select-append {
color: #28a745; color: #28a745;
} }
input.form-control[data-toggle='lgbSelect'] { input.form-control[data-toggle='lgbSelect'] {
width: 210px; width: 210px;

44
Bootstrap.Client/wwwroot/lib/longbow-select/longbow-select.js
View File

@ -10,8 +10,7 @@
lgbSelect.VERSION = '1.0'; lgbSelect.VERSION = '1.0';
lgbSelect.Author = 'argo@163.com'; lgbSelect.Author = 'argo@163.com';
lgbSelect.DataKey = "lgb.select"; lgbSelect.DataKey = "lgb.select";
lgbSelect.Template = '<div class="form-select" data-toggle="lgbSelect">'; lgbSelect.Template = '<div class="form-select dropdown" data-toggle="lgbSelect">';
lgbSelect.Template += '<input type="text" readonly="readonly" class="form-control form-select-input" />';
lgbSelect.Template += '<span class="form-select-append">'; lgbSelect.Template += '<span class="form-select-append">';
lgbSelect.Template += ' <i class="fa fa-angle-up"></i>'; lgbSelect.Template += ' <i class="fa fa-angle-up"></i>';
lgbSelect.Template += '</span>'; lgbSelect.Template += '</span>';
@ -46,15 +45,6 @@
this.$element.data(lgbSelect.DataKey, this); 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) { this.$ctl.on('click', 'a.dropdown-item', function (e) {
e.preventDefault(); e.preventDefault();
@ -63,11 +53,6 @@
that.val($this.attr('data-val'), true); that.val($this.attr('data-val'), true);
}); });
$(document).on('click', function (e) {
if (that.$input[0] !== e.target)
that.closeMenu();
});
var getUID = function (prefix) { var getUID = function (prefix) {
if (!prefix) prefix = 'lgb'; if (!prefix) prefix = 'lgb';
do prefix += ~~(Math.random() * 1000000); do prefix += ~~(Math.random() * 1000000);
@ -86,16 +71,20 @@
_proto.initBySelect = function () { _proto.initBySelect = function () {
var $input = this.$element.prev(); var $input = this.$element.prev();
if ($input.attr('data-toggle') === 'lgbSelect') $input.remove();
// 新控件 <div class="form-select"> // 新控件 <div class="form-select">
this.$ctl = $(lgbSelect.Template).insertBefore(this.$element); 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 = $('<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>');
}
// 下拉组合框 // 下拉组合框
this.$input = this.$ctl.find('.form-select-input');
this.$menubar = this.$ctl.find('.form-select-append'); this.$menubar = this.$ctl.find('.form-select-append');
this.$menus = this.$ctl.find('.dropdown-menu'); this.$menus = this.$ctl.find('.dropdown-menu');
this.$input.insertBefore(this.$menubar);
// init dropdown-menu data
var data = this.$element.find('option').map(function () { var data = this.$element.find('option').map(function () {
return { value: this.value, text: this.text, selected: this.selected } return { value: this.value, text: this.text, selected: this.selected }
}).toArray(); }).toArray();
@ -106,6 +95,9 @@
// init dropdown-menu // init dropdown-menu
this.reset(data); this.reset(data);
// init dropdown-menu data
this.$input.dropdown();
}; };
_proto.createElement = function () { _proto.createElement = function () {
@ -113,7 +105,7 @@
// move attributes // move attributes
this.options.attributes.forEach(function (name, index) { this.options.attributes.forEach(function (name, index) {
var value = that.$element.attr(name) var value = that.$element.attr(name);
if (value !== undefined) { if (value !== undefined) {
if (name === 'class') that.$input.addClass(value).removeClass('d-none'); if (name === 'class') that.$input.addClass(value).removeClass('d-none');
else that.$input.attr(name, that.$element.attr(name)); else that.$input.attr(name, that.$element.attr(name));
@ -137,10 +129,6 @@
}); });
}; };
_proto.closeMenu = function () {
this.$ctl.removeClass('open');
};
_proto.disabled = function () { _proto.disabled = function () {
this.$ctl.addClass('is-disabled'); this.$ctl.addClass('is-disabled');
this.$input.attr('disabled', 'disabled'); this.$input.attr('disabled', 'disabled');
@ -203,10 +191,6 @@
var params = $.makeArray(arguments).slice(1); var params = $.makeArray(arguments).slice(1);
return this.each(function () { return this.each(function () {
var $this = $(this); var $this = $(this);
// 保护重复生成
if ($this.hasClass('form-select')) return;
var data = $this.data(lgbSelect.DataKey); var data = $this.data(lgbSelect.DataKey);
var options = typeof option === 'object' && option; var options = typeof option === 'object' && option;
@ -222,6 +206,6 @@
$.fn.lgbSelect.Constructor = lgbSelect; $.fn.lgbSelect.Constructor = lgbSelect;
$(function () { $(function () {
$('[data-toggle="lgbSelect"]').lgbSelect(); $('select[data-toggle="lgbSelect"]').lgbSelect();
}); });
})(jQuery); })(jQuery);