perf: 同步longbow-select组件脚本
This commit is contained in:
Argo Zhang
parent
6b3600b603
commit
a234d9b0de
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
lgbSelect.VERSION = '1.0';
|
||||
lgbSelect.Author = 'argo@163.com';
|
||||
lgbSelect.DataKey = "lgb.select";
|
||||
lgbSelect.Template = '<div class="form-select" data-toggle="lgbSelect">';
|
||||
lgbSelect.Template += '<input type="text" readonly="readonly" class="form-control form-select-input" />';
|
||||
lgbSelect.Template = '<div class="form-select dropdown" data-toggle="lgbSelect">';
|
||||
lgbSelect.Template += '<span class="form-select-append">';
|
||||
lgbSelect.Template += ' <i class="fa fa-angle-up"></i>';
|
||||
lgbSelect.Template += '</span>';
|
||||
|
|
@ -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();
|
||||
|
||||
// 新控件 <div class="form-select">
|
||||
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.$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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue