From 9d84b3e4ca80cb8e7f1a816a03423e4fa9542afd Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 12 Aug 2019 14:43:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20lgbCheckbox=20?= =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E4=BB=A3=E6=9B=BF=E5=8E=9F=E7=94=9F=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Bootstrap.Admin/Views/Shared/_Default.cshtml | 2 + Bootstrap.Admin/wwwroot/js/common-scripts.js | 2 +- Bootstrap.Admin/wwwroot/js/groups.js | 2 + Bootstrap.Admin/wwwroot/js/menus.js | 1 + Bootstrap.Admin/wwwroot/js/roles.js | 3 + Bootstrap.Admin/wwwroot/js/users.js | 2 + .../lib/longbow-checkbox/longbow-checkbox.css | 75 ++++++++++++++++ .../lib/longbow-checkbox/longbow-checkbox.js | 86 +++++++++++++++++++ 8 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.css create mode 100644 Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.js diff --git a/Bootstrap.Admin/Views/Shared/_Default.cshtml b/Bootstrap.Admin/Views/Shared/_Default.cshtml index 50e46582..b1d868f7 100644 --- a/Bootstrap.Admin/Views/Shared/_Default.cshtml +++ b/Bootstrap.Admin/Views/Shared/_Default.cshtml @@ -9,6 +9,7 @@ + @RenderSection("css", false) } @section javascript { @@ -28,6 +29,7 @@ + @RenderSection("javascript", false) diff --git a/Bootstrap.Admin/wwwroot/js/common-scripts.js b/Bootstrap.Admin/wwwroot/js/common-scripts.js index 6d88027c..25f8c26d 100644 --- a/Bootstrap.Admin/wwwroot/js/common-scripts.js +++ b/Bootstrap.Admin/wwwroot/js/common-scripts.js @@ -276,7 +276,7 @@ $(function () { url: 'api/Notifications' }; - window.CheckboxHtmlTemplate = '
'; + window.CheckboxHtmlTemplate = '
'; // load widget data $('.header .nav').reloadWidget().notifi({ diff --git a/Bootstrap.Admin/wwwroot/js/groups.js b/Bootstrap.Admin/wwwroot/js/groups.js index 1cd3bae3..4cf4176a 100644 --- a/Bootstrap.Admin/wwwroot/js/groups.js +++ b/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'); } }); diff --git a/Bootstrap.Admin/wwwroot/js/menus.js b/Bootstrap.Admin/wwwroot/js/menus.js index 9745209d..a9e797e7 100644 --- a/Bootstrap.Admin/wwwroot/js/menus.js +++ b/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'); } }); diff --git a/Bootstrap.Admin/wwwroot/js/roles.js b/Bootstrap.Admin/wwwroot/js/roles.js index a71127b0..82939cdd 100644 --- a/Bootstrap.Admin/wwwroot/js/roles.js +++ b/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'); } }); diff --git a/Bootstrap.Admin/wwwroot/js/users.js b/Bootstrap.Admin/wwwroot/js/users.js index 10e6aaf2..a35484d3 100644 --- a/Bootstrap.Admin/wwwroot/js/users.js +++ b/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'); } }); diff --git a/Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.css b/Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.css new file mode 100644 index 00000000..888200fa --- /dev/null +++ b/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; + } diff --git a/Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.js b/Bootstrap.Admin/wwwroot/lib/longbow-checkbox/longbow-checkbox.js new file mode 100644 index 00000000..52436ecf --- /dev/null +++ b/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 = ''; + 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);