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

Bootstrap.Admin/Views/Shared/_Default.cshtml

@@ -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)

Bootstrap.Admin/wwwroot/js/common-scripts.js

@@ -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({

Bootstrap.Admin/wwwroot/js/groups.js

@@ -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');
                         }
                     });

Bootstrap.Admin/wwwroot/js/menus.js

@@ -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');
                         }
                     });

Bootstrap.Admin/wwwroot/js/roles.js

@@ -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');
                         }
                     });

Bootstrap.Admin/wwwroot/js/users.js

@@ -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');
                         }
                     });

Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.css

@@ -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;
+        }

Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.js

@@ -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);