orga0063
/
BootstrapAdmin11
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 增加 lgbCheckbox 控件代替原生控件

This commit is contained in:
Argo Zhang 2019-08-12 14:43:36 +08:00
parent 2283bfc06f
commit 9d84b3e4ca
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
8 changed files with 172 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Bootstrap.Admin/Views/Shared/_Default.cshtml
View File

@ -9,6 +9,7 @@
<environment exclude="Development">
<link href="~/lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
</environment>
<link href="~/lib/longbow-checkbox/longbow-checkbox.css" rel="stylesheet" />
@RenderSection("css", false)
}
@section javascript {
@ -28,6 +29,7 @@
<script src="~/lib/validate/jquery.validate.min.js"></script>
<script src="~/lib/validate/localization/messages_zh.min.js"></script>
</environment>
<script src="~/lib/longbow-checkbox/longbow-checkbox.js"></script>
<script src="~/lib/longbow/longbow.dataentity.js" asp-append-version="true"></script>
<script src="~/lib/longbow/longbow.validate.js" asp-append-version="true"></script>
@RenderSection("javascript", false)

2
Bootstrap.Admin/wwwroot/js/common-scripts.js
View File

@ -276,7 +276,7 @@ $(function () {
url: 'api/Notifications'
};
window.CheckboxHtmlTemplate = '<div class="form-group col-md-3 col-sm-4 col-6"><div class="form-check"><label class="form-check-label" title="{3}" data-toggle="tooltip"><input type="checkbox" class="form-check-input" value="{0}" {2}/><span>{1}</span></label></div></div>';
window.CheckboxHtmlTemplate = '<div class="form-group col-md-3 col-sm-4 col-6"><label title="{3}" data-toggle="tooltip" role="checkbox" aria-checked="false" class="form-checkbox is-{2}"><span class="checkbox-input"><span class="checkbox-inner"></span><input type="checkbox" value="{0}" {2} /></span><span class="checkbox-label">{1}</span></label></div>';
// load widget data
$('.header .nav').reloadWidget().notifi({

2
Bootstrap.Admin/wwwroot/js/groups.js
View File

@ -28,6 +28,7 @@ $(function () {
$dialogRoleForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogRoleForm.find('.form-checkbox').lgbCheckbox();
$dialogRole.modal('show');
}
});
@ -44,6 +45,7 @@ $(function () {
$dialogUserForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogUserForm.find('.form-checkbox').lgbCheckbox();
$dialogUser.modal('show');
}
});

1
Bootstrap.Admin/wwwroot/js/menus.js
View File

@ -52,6 +52,7 @@ $(function () {
$dialogRoleForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogRoleForm.find('.form-checkbox').lgbCheckbox();
$dialogRole.modal('show');
}
});

3
Bootstrap.Admin/wwwroot/js/roles.js
View File

@ -36,6 +36,7 @@ $(function () {
$dialogUserForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogUserForm.find('.form-checkbox').lgbCheckbox();
$dialogUser.modal('show');
}
});
@ -52,6 +53,7 @@ $(function () {
$dialogGroupForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogGroupForm.find('.form-checkbox').lgbCheckbox();
$dialogGroup.modal('show');
}
});
@ -86,6 +88,7 @@ $(function () {
$dialogAppForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogAppForm.find('.form-checkbox').lgbCheckbox();
$dialogApp.modal('show');
}
});

2
Bootstrap.Admin/wwwroot/js/users.js
View File

@ -33,6 +33,7 @@ $(function () {
$dialogRoleForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogRoleForm.find('.form-checkbox').lgbCheckbox();
$dialogRole.modal('show');
}
});
@ -49,6 +50,7 @@ $(function () {
$dialogGroupForm.html(html).find('[data-toggle="tooltip"]').each(function (index, label) {
if (label.title === "") label.title = "未设置";
}).tooltip();
$dialogGroupForm.find('.form-checkbox').lgbCheckbox();
$dialogGroup.modal('show');
}
});

75
Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.css Normal file
View File

@ -0,0 +1,75 @@
.form-checkbox {
font-weight: 500;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
margin: 0;
}
.form-checkbox .checkbox-input {
display: flex;
align-items: center;
}
.form-checkbox .checkbox-input input {
display: none;
}
.form-checkbox .checkbox-input .checkbox-inner {
display: inline-block;
border: 1px solid #dcdfe6;
border-radius: 2px;
width: 14px;
height: 14px;
position: relative;
background-color: #fff;
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}
.form-checkbox .checkbox-input .checkbox-inner:after {
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 3px;
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center;
}
.form-checkbox .checkbox-label {
margin-left: 10px;
}
.form-checkbox.is-checked .checkbox-input .checkbox-inner {
background-color: #409eff;
border-color: #409eff;
}
.form-checkbox.is-checked .checkbox-input .checkbox-inner:after {
transform: rotate(45deg) scaleY(1);
}
.form-checkbox.is-disabled {
cursor: not-allowed;
}
.form-checkbox.is-disabled .checkbox-input .checkbox-inner {
background-color: #edf2fc;
border-color: #dcdfe6;
}
.form-checkbox.is-disabled .checkbox-label {
color: #c0c4cc;
}
.form-checkbox.is-disabled.is-checked .checkbox-input .checkbox-inner:after {
border-color: #c0c4cc;
}

86
Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.js Normal file
View File

@ -0,0 +1,86 @@
(function ($) {
'use strict';
var lgbCheckbox = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, lgbCheckbox.DEFAULTS, options);
var that = this;
this.$element.on('click', function (e) {
e.preventDefault();
if (that.$element.hasClass(that.options.disabledClass)) return;
that.$element.toggleClass(that.options.checkedClass);
// set checkbox-original val
var checkbox = that.$element.find(':checkbox');
var checked = checkbox.prop('checked');
checkbox.prop('checked', !checked);
});
};
lgbCheckbox.VERSION = '1.0';
lgbCheckbox.Author = 'argo@163.com';
lgbCheckbox.DataKey = "lgb.checkbox";
lgbCheckbox.Template = '<label role="checkbox" aria-checked="false" class="form-checkbox">';
lgbCheckbox.Template += '<span class="checkbox-input"><span class="checkbox-inner"></span><input type="checkbox" /></span><span class="checkbox-label"></span>';
lgbCheckbox.Template += '</label>';
lgbCheckbox.DEFAULTS = {
borderClass: null,
disabledClass: 'is-disabled',
checkedClass: 'is-checked',
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"]
};
lgbCheckbox.AllowMethods = /disabled|enable|val/;
var _proto = lgbCheckbox.prototype;
_proto.disabled = function () {
this.$element.addClass(this.options.disabledClass);
};
_proto.enable = function () {
this.$element.removeClass(this.options.disabledClass);
};
_proto.val = function (value, valid) {
if (value !== undefined) {
this.$element.find(':checkbox').val(value);
// trigger changed.lgbCheckbox
this.$element.trigger('changed.lgbCheckbox');
// trigger lgbValidate
if (valid && this.$input.attr('data-valid') === 'true') this.$input.trigger('input.lgb.validate');
}
};
function Plugin(option) {
var params = $.makeArray(arguments).slice(1);
return this.each(function () {
var $this = $(this);
var data = $this.data(lgbCheckbox.DataKey);
var options = typeof option === 'object' && option;
if (!data) $this.data(lgbCheckbox.DataKey, data = new lgbCheckbox(this, options));
if (!lgbCheckbox.AllowMethods.test(option)) return;
if (typeof option === 'string') {
data[option].apply(data, params);
}
});
}
$.fn.lgbCheckbox = Plugin;
$.fn.lgbCheckbox.Constructor = lgbCheckbox;
$(function () {
$('.form-checkbox').lgbCheckbox();
});
})(jQuery);