feat: 前台支持 AdmintLTE 样式

This commit is contained in:
Argo Zhang 2019-08-18 14:53:04 +08:00
parent 34ec8f6213
commit a72f4de76f
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
30 changed files with 7249 additions and 3902 deletions

View File

@ -1,53 +1,40 @@
(function ($) {
var formatCategoryName = function (menu) {
var ret = "";
if (menu.IsResource === 2) ret = "按钮";
else if (menu.IsResource === 1) ret = "资源";
else ret = menu.CategoryName;
return ret;
};
$.fn.extend({
autoScrollSidebar: function (options) {
var option = $.extend({ target: null, offsetTop: 0 }, options);
var $navItem = option.target;
if ($navItem === null || $navItem.length === 0) return this;
var cascadeMenu = function (menus) {
var html = "";
$.each(menus, function (index, menu) {
if (menu.Menus.length === 0) {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{5}</span><span class="menuOrder">{4}</span></div></li>', menu.Id, menu.Icon, menu.Name, menu.Category, menu.Order, formatCategoryName(menu));
// sidebar scroll animate
var middle = this.outerHeight() / 2;
var top = $navItem.offset().top + option.offsetTop - this.offset().top;
var $scrollInstance = this[0]["__overlayScrollbars__"];
if (top > middle) {
if ($scrollInstance) $scrollInstance.scroll({ x: 0, y: top - middle }, 500, "swing");
else this.animate({ scrollTop: top - middle });
}
return this;
},
addNiceScroll: function () {
if (!$.browser.versions.ios && $(window).width() > 768) {
this.overlayScrollbars({
className: 'os-theme-light',
scrollbars: {
autoHide: 'leave',
autoHideDelay: 100
},
overflowBehavior: {
x: "hidden",
y: "scroll"
}
});
}
else {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{6}</span><span class="menuOrder">{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.Id, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order, formatCategoryName(menu));
this.css('overflow', 'auto');
}
});
return html;
};
var cascadeSubMenu = function (menus) {
var html = "";
$.each(menus, function (index, menu) {
if (menu.Menus.length === 0) {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{5}</span><span class="menuOrder">{4}</span></div></li>', menu.Id, menu.Icon, menu.Name, menu.Category, menu.Order, formatCategoryName(menu));
}
else {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{6}</span><span class="menuOrder">{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.Id, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order, formatCategoryName(menu));
}
});
return html;
};
var setBadge = function (source) {
var data = $.extend({
TasksCount: 0,
AppExceptionsCount: 0,
DbExceptionsCount: 0,
MessagesCount: 0,
NewUsersCount: 0
}, source);
$('#msgHeaderTaskBadge').text(data.TasksCount === 0 ? "" : data.TasksCount);
$('#msgHeaderUserBadge').text(data.NewUsersCount === 0 ? "" : data.NewUsersCount);
$('#msgHeaderAppBadge').text(data.AppExceptionsCount === 0 ? "" : data.AppExceptionsCount);
$('#msgHeaderDbBadge').text(data.DbExceptionsCount === 0 ? "" : data.DbExceptionsCount);
$('#msgHeaderMsgBadge').text(data.MessagesCount === 0 ? "" : data.MessagesCount);
$('#logoutNoti').text(data.NewUsersCount === 0 ? "" : data.NewUsersCount);
};
return this;
}
});
$.fn.extend({
nestMenu: function (callback) {
@ -127,6 +114,56 @@
return this;
}
});
var formatCategoryName = function (menu) {
var ret = "";
if (menu.IsResource === 2) ret = "按钮";
else if (menu.IsResource === 1) ret = "资源";
else ret = menu.CategoryName;
return ret;
};
var cascadeMenu = function (menus) {
var html = "";
$.each(menus, function (index, menu) {
if (menu.Menus.length === 0) {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{5}</span><span class="menuOrder">{4}</span></div></li>', menu.Id, menu.Icon, menu.Name, menu.Category, menu.Order, formatCategoryName(menu));
}
else {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{6}</span><span class="menuOrder">{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.Id, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order, formatCategoryName(menu));
}
});
return html;
};
var cascadeSubMenu = function (menus) {
var html = "";
$.each(menus, function (index, menu) {
if (menu.Menus.length === 0) {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{5}</span><span class="menuOrder">{4}</span></div></li>', menu.Id, menu.Icon, menu.Name, menu.Category, menu.Order, formatCategoryName(menu));
}
else {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><div class="checkbox"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><div class="radio"><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div><span class="menuType">{6}</span><span class="menuOrder">{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.Id, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order, formatCategoryName(menu));
}
});
return html;
};
var setBadge = function (source) {
var data = $.extend({
TasksCount: 0,
AppExceptionsCount: 0,
DbExceptionsCount: 0,
MessagesCount: 0,
NewUsersCount: 0
}, source);
$('#msgHeaderTaskBadge').text(data.TasksCount === 0 ? "" : data.TasksCount);
$('#msgHeaderUserBadge').text(data.NewUsersCount === 0 ? "" : data.NewUsersCount);
$('#msgHeaderAppBadge').text(data.AppExceptionsCount === 0 ? "" : data.AppExceptionsCount);
$('#msgHeaderDbBadge').text(data.DbExceptionsCount === 0 ? "" : data.DbExceptionsCount);
$('#msgHeaderMsgBadge').text(data.MessagesCount === 0 ? "" : data.MessagesCount);
$('#logoutNoti').text(data.NewUsersCount === 0 ? "" : data.NewUsersCount);
};
})(jQuery);
$(function () {
@ -137,43 +174,6 @@ $(function () {
var arch = $sideMenu.find('a.active').last();
$breadNav.removeClass('d-none').text(arch.text() || $('title').text());
$.fn.extend({
autoScrollSidebar: function (options) {
var option = $.extend({ target: null, offsetTop: 0 }, options);
var $navItem = option.target;
if ($navItem === null || $navItem.length === 0) return this;
// sidebar scroll animate
var middle = this.outerHeight() / 2;
var top = $navItem.offset().top + option.offsetTop - this.offset().top;
var $scrollInstance = this[0]["__overlayScrollbars__"];
if (top > middle) {
if ($scrollInstance) $scrollInstance.scroll({ x: 0, y: top - middle }, 500, "swing");
else this.animate({ scrollTop: top - middle });
}
return this;
},
addNiceScroll: function () {
if (!$.browser.versions.ios && $(window).width() > 768) {
this.overlayScrollbars({
className: 'os-theme-light',
scrollbars: {
autoHide: 'leave',
autoHideDelay: 100
},
overflowBehavior: {
x: "hidden",
y: "scroll"
}
});
}
else {
this.css('overflow', 'auto');
}
return this;
}
});
// custom scrollbar
var $sidebar = $('.sidebar').addNiceScroll().autoScrollSidebar({ target: arch.parent(), offsetTop: arch.parent().innerHeight() / 2 });

View File

@ -3,12 +3,12 @@
namespace Bootstrap.Client.Models
{
/// <summary>
///
/// ModelBase 基础类
/// </summary>
public class ModelBase
{
/// <summary>
///
/// 默认构造函数
/// </summary>
public ModelBase()
{
@ -16,17 +16,30 @@ namespace Bootstrap.Client.Models
Footer = DbHelper.RetrieveFooter();
Theme = DbHelper.RetrieveActiveTheme();
}
/// <summary>
///
/// 获取 网站标题
/// </summary>
public string Title { get; }
public string Title { get; private set; }
/// <summary>
///
/// 获取 网站页脚
/// </summary>
public string Footer { get; }
public string Footer { get; private set; }
/// <summary>
///
/// 网站样式全局设置
/// </summary>
public string Theme { get; protected set; }
/// <summary>
/// 是否显示卡片标题
/// </summary>
public string ShowCardTitle { get; protected set; } = "";
/// <summary>
/// 是否收缩侧边栏
/// </summary>
public string ShowSideBar { get; protected set; } = "";
}
}

View File

@ -28,6 +28,15 @@
<span id="userDisplayName" data-userName="@Model.UserName" class="username text-truncate d-inline-block">@Model.DisplayName</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="d-flex flex-fill align-items-center">
<img src="@Url.Content(Model.Icon)">
<div class="flex-fill">
<div class="username text-truncate">@Model.DisplayName</div>
<div>登录名:@Model.UserName</div>
</div>
</div>
</div>
<div class="dropdown-item">
<a href="@Model.ProfilesUrl"><i class=" fa fa-suitcase"></i>个人中心</a>
<a href="@Model.SettingsUrl"><i class="fa fa-cog"></i>设置</a>

View File

@ -1,11 +1,26 @@
@model NavigatorBarModel
<aside>
<aside class="@Model.ShowSideBar">
<div class="bg"></div>
<div class="nav-brand justify-content-center">
<a href="#">
<img src="~/favicon.png" />
<span>@Model.Title</span>
</a>
</div>
<div class="nav-header flex-fill align-items-center">
<a href="~/Home/Index">
<img src="@Url.Content(Model.Icon)" />
<span class="username d-inline-block text-truncate font-weight-bold flex-fill">@Model.DisplayName</span>
</a>
</div>
<!-- sidebar menu start-->
<ul class="sidebar nav nav-pills flex-column flex-nowrap">
@foreach (var menu in Model.Navigations)
{
@await Html.PartialAsync("SubNavItem", menu)
}
</ul>
<div class="sidebar">
<ul class="nav-sidebar nav nav-pills flex-column flex-nowrap">
@foreach (var menu in Model.Navigations)
{
@await Html.PartialAsync("SubNavItem", menu)
}
</ul>
</div>
<!-- sidebar menu end-->
</aside>

View File

@ -1,8 +1,32 @@
@model Bootstrap.Security.BootstrapMenu
<li class="nav-item @Model.Active">
<a href="@Url.Content(Model.Url)" class="nav-link @Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
@if (Model.Menus.Any())
{
@await Html.PartialAsync("SubNavigation", Model.Menus)
}
</li>
@if(Model.Menus.Any())
{
<li class="nav-item parent">
@if(Model.Active == "active")
{
<a href="@string.Format("#collapse_{0}", Model.Id)" role="button" data-toggle="collapse" class="nav-link active"><i class="@Model.Icon"></i><span class="flex-fill">@Model.Name</span><i class="fa fa-angle-left"></i></a>
<div class="show" id="@string.Format("collapse_{0}", Model.Id)">
@if (Model.Menus.Any())
{
@await Html.PartialAsync("SubNavigation", Model.Menus)
}
</div>
}
else
{
<a href="@string.Format("#collapse_{0}", Model.Id)" role="button" data-toggle="collapse" class="nav-link collapsed"><i class="@Model.Icon"></i><span class="flex-fill">@Model.Name</span><i class="fa fa-angle-left"></i></a>
<div class="collapse" id="@string.Format("collapse_{0}", Model.Id)">
@if (Model.Menus.Any())
{
@await Html.PartialAsync("SubNavigation", Model.Menus)
}
</div>
}
</li>
}
else
{
<li class="nav-item">
<a href="@Url.Content(Model.Url)" class="nav-link @Model.Active" target="@Model.Target"><i class="@Model.Icon"></i><span class="flex-fill">@Model.Name</span></a>
</li>
}

View File

@ -1,5 +1,5 @@
@model IEnumerable<Bootstrap.Security.BootstrapMenu>
<ul class="sub nav nav-pills flex-column flex-nowrap" style="display: none;">
<ul class="sub nav flex-column">
@foreach (var menu in Model)
{
@await Html.PartialAsync("SubNavItem", menu)

View File

@ -7,11 +7,13 @@
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="~/lib/toastr.js/toastr.css" rel="stylesheet" />
<link href="~/lib/overlayscrollbars/OverlayScrollbars.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/lib/toastr.js/toastr.min.css" rel="stylesheet" />
<link href="~/lib/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
</environment>
@RenderSection("css", false)
<link href="~/css/theme.css" rel="stylesheet" asp-append-version="true" />
@ -27,15 +29,14 @@
<environment include="Development">
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"></script>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.dcjqaccordion.2.7.min.js"></script>
<script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
</environment>
<script src="~/lib/toastr.js/toastr.min.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.cookie.js"></script>
<script src="~/lib/longbow/longbow.common.js" asp-append-version="true"></script>
<script src="~/js/common-scripts.js" asp-append-version="true"></script>
@RenderSection("javascript", false)
@ -43,6 +44,12 @@
@await Html.PartialAsync("Header")
@await Html.PartialAsync("navigator")
<section class="container-fluid">
<div class="main-header">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="@Url.Content("~/Admin/Index")"><i class="fa fa-home"></i>首页</a></li>
<li class="breadcrumb-item d-none"></li>
</ol>
</div>
@RenderBody()
</section>
@await Html.PartialAsync("Footer")

View File

@ -1,4 +1,8 @@
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
.sidebar-toggle-box .fa-bars {
color: #007bff;
}
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
color: rgb(51, 122, 183);
}
@ -47,20 +51,20 @@
border-bottom: solid 1px #307eb6;
}
.card {
.main-content:not(.no-card-header) .card {
border-top-width: 1px;
}
.card:hover {
border-top-color: #84bbe2;
}
.card, .modal-footer, .form-control, .popover, .date .input-group-text,
.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger),
.form-select-input:hover {
border-color: #84bbe2;
}
.card:hover {
border-top-color: #337ab7;
}
.card .card-header, .modal-header {
background-image: linear-gradient(to bottom, #5893be 0%, #63a6d7 100%);
}
@ -90,6 +94,20 @@
background-color: rgba(84, 189, 220, 0.21);
}
.sidebar .nav-sidebar > .nav-item > .nav-link.active {
background-color: #337ab7;
}
.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"],
.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before
{
background-color: rgba(51, 122, 183, 0.5);
}
.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"] {
color: #fff;
}
.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
border-right-color: #305873;
}

View File

@ -0,0 +1,376 @@
#nprogress .spinner {
display: none;
}
.header .nav {
justify-content: flex-end;
}
.header .nav .dropdown, .userinfo {
display: flex;
align-items: center;
height: 54px;
transition: all .3s linear;
cursor: pointer;
margin: 0;
padding: 0 6px;
}
.header nav, userinfo, .userinfo .dropdown-toggle:after {
display: none;
}
.header .sidebar-toggle-box {
cursor: pointer;
}
.header .sidebar-toggle-box span, aside .nav-brand a {
transition: all .3s ease-in-out;
}
.header .badge {
top: 4px;
}
.userinfo .badge {
top: 64px;
}
.username {
font-size: 1rem;
font-weight: 500;
vertical-align: middle;
max-width: 120px;
}
.username, aside:hover .nav-header span, .userinfo .dropdown-item .username + div {
margin-left: 0.625rem;
}
.userinfo img {
border-radius: 4px;
width: 40px;
height: 40px;
}
.userinfo .username {
max-width: 110px;
}
.userinfo .dropdown-toggle, .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"], .nav [data-toggle="dropdown"]:hover {
border: none !important;
}
.userinfo .shadow-default, .nav [data-toggle="dropdown"], .nav [data-toggle="dropdown"]:hover {
box-shadow: none;
}
.userinfo .dropdown-item {
border-bottom: solid 1px rgba(255, 255, 255, 0.4);
padding: 0.375rem 0.625rem;
}
.userinfo .dropdown-item:first-child {
display: flex;
}
.userinfo .dropdown-item:first-child .font-weight-bold {
font-size: 1rem;
}
.userinfo .dropdown-item img {
width: 60px;
height: 60px;
}
.userinfo .dropdown-item .username {
max-width: 180px;
}
.userinfo .dropdown-item a {
padding: 0.25rem 0.625rem;
}
.userinfo .dropdown-item a:hover {
color: #333;
}
.userinfo .dropdown-item a i {
display: inline-block;
margin-right: 10px;
}
.userinfo .dropdown-item:last-child {
border-bottom: none;
}
.userinfo .dropdown-item:last-child a {
background: none;
}
.userinfo.show .dropdown-menu {
margin-top: 8px;
left: auto !important;
}
aside {
top: 55px;
background-color: #1a2226;
}
aside .bg {
background-color: #337ab7;
height: 3px;
margin: 0 -15px;
}
aside .nav-brand, .sidebar-open aside:hover .nav-brand {
height: 54px;
align-items: center;
padding: 0 0.625rem;
}
aside .nav-brand span, .header .sidebar-toggle-box {
font-size: 1.25rem;
font-weight: 700;
white-space: nowrap;
}
aside .nav-brand img, .sidebar-open aside:hover .nav-brand img {
opacity: 0;
visibility: hidden;
width: 2.75rem;
height: auto;
border-radius: 0.42rem;
position: absolute;
top: 9px;
left: 4px;
}
aside .nav-link span {
display: inline-block;
white-space: nowrap;
}
.main-content {
top: 58px;
transition: margin-left .3s linear;
}
.main-header .breadcrumb {
margin-top: -10px;
padding: 8px 0;
}
.main-header {
display: block;
margin-bottom: 5px;
}
.main-header .text-dark {
font-size: 1.5rem;
}
.breadcrumb {
border-top: none;
}
/* color */
body {
background: #ecf0f5;
}
.header, aside .nav-brand, .userinfo .dropdown-menu, .userinfo .dropdown-item {
background: #3c8dbc;
}
.header .nav .dropdown:hover, .userinfo:hover {
background-color: rgba(0,0,0,0.1);
}
.sidebar .nav-link {
color: #b8c7ce;
}
.header, .header .breadcrumb-item a, aside .nav-brand a, .sidebar-toggle-box, .userinfo .dropdown-toggle, .nav [data-toggle="dropdown"], .userinfo .dropdown-item, .userinfo .dropdown-item a, .userinfo .dropdown-item:last-child a {
color: #eee;
}
.sidebar-toggle-box:hover, aside .nav-brand a:hover, .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover, .sidebar .nav-link:hover, .userinfo .dropdown-item:hover, .userinfo .dropdown-item a:hover, .userinfo .dropdown-item:last-child a:hover {
color: #fff;
}
.sidebar .nav-sidebar .has-treeview .nav-link.active {
background-color: rgba(60, 141, 188, 0.8);
}
.sidebar .nav-sidebar > .nav-item > .nav-link.active {
background-color: #3c8dbc;
}
.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"],
.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before
{
background-color: rgba(59, 141, 188, 0.7);
}
.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"] {
color: #fff;
}
.header, aside .nav-brand {
border-bottom: 1px solid #3c8dbc;
}
.card {
border-top-color: #3c8dbc;
color: #444;
}
.card:hover {
border-top-color: #2c6ca2;
}
@media (min-width: 769px) {
.header {
margin-left: 13.375rem;
transition: margin-left .3s linear;
}
.header .sidebar-toggle-box span {
opacity: 0;
}
.sidebar-open .header .sidebar-toggle-box span {
opacity: 1;
}
aside {
top: 0;
}
aside .bg {
display: block;
}
aside .sidebar, .sidebar-open aside:hover .sidebar {
top: 139px;
transition: top .3s linear;
}
aside .sub .nav-tem, .sidebar-open aside:hover .sidebar .sub .nav-item {
margin-left: 10px;
}
aside .nav-brand, .sidebar-open aside:hover .nav-brand, aside .nav-header {
display: flex;
}
aside .nav-header {
padding: 0.625rem 0.625rem 0.625rem 0.625rem;
border-bottom: solid 1px rgba(221, 221, 221, 0.5);
}
aside .nav-header a {
white-space: nowrap;
}
aside .nav-header img, .sidebar-open aside:hover .nav-header img {
width: 3.75rem;
height: 3.75rem;
border-radius: 50%;
}
aside .nav-header span, .sidebar-open aside:hover .nav-header span {
color: #eee;
}
aside .sub .nav-link, .userinfo .dropdown-item, aside .sidebar .sub .nav-item, aside, aside .nav-header img {
transition: all .3s linear;
}
aside .nav-link span, aside .nav-brand span, aside .nav-header span, aside .nav-brand img {
transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
}
.sidebar-open aside:hover {
width: 13.375rem;
z-index: 15;
}
.sidebar-open .header {
margin-left: 3.375rem;
}
.sidebar-open aside {
transform: translate(0);
width: 3.375rem;
}
.sidebar-open aside .nav-item span, .sidebar-open aside .nav-header span, .sidebar-open .nav-brand span {
opacity: 0;
visibility: hidden;
margin-left: -10px;
}
.sidebar-open aside .nav-header img {
width: 2.25rem;
height: 2.25rem;
}
.sidebar-open aside .nav-brand img, .sidebar-open aside:hover .nav-brand span, .sidebar-open aside:hover .nav-header span, .sidebar-open aside:hover .nav-item span {
opacity: 1;
visibility: visible;
}
.sidebar-open aside:hover .nav-link i + span, .sidebar-open aside:hover .nav-brand span {
margin-left: 0;
}
.sidebar-open aside .sidebar {
top: 115px;
}
.sidebar-open .main-content {
margin-left: 3.375rem;
transition: margin-left .3s linear;
}
.sidebar-open aside .sidebar .sub .nav-item {
margin-left: 0;
}
aside {
display: block;
}
aside .bg {
display: none;
}
aside .nav-brand {
background-image: linear-gradient(to bottom, #196eac 0,#7fb4d9 100%);
}
aside .nav-brand img {
display: none;
}
header .navbar {
display: none !important;
}
.container-fluid {
margin-left: 13.375rem;
transition: margin-left .3s linear;
}
.sidebar-open .container-fluid {
margin-left: 54px;
display: block;
}
aside .nav-brand, .sidebar-open aside:hover .nav-brand {
height: 55px;
}
}

View File

@ -1,4 +1,4 @@
@media print {
@media print {
a:link {
text-decoration: none !important;
}
@ -95,10 +95,19 @@
aside {
transform: translate(0);
width: 210px;
width: 13.375rem;
overflow: hidden;
bottom: 40px;
}
aside .sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
}
@media (min-width: 940px) {

View File

@ -11,12 +11,15 @@ body {
-webkit-overflow-scrolling: touch;
}
aside .bg, aside .nav-brand, aside .nav-header, .header .nav, .userinfo .dropdown-item:first-child {
display: none;
}
.header {
background: #fff;
}
.header .nav {
display: none;
margin-left: 15px;
}
@ -238,63 +241,65 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
}
.sidebar {
padding: 20px 0;
background: inherit;
}
.sidebar .nav-item {
margin: 5px 10px;
margin: 2px 10px;
flex: 1 1 auto;
}
.sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
background: #35404d;
color: #fff;
}
.sidebar .nav-item.active > .nav-link {
color: #FF6C60;
}
.sidebar .nav-sidebar {
margin: 10px 0;
}
.sidebar .nav-link {
color: #aeb2b7;
padding: 15px 10px;
padding: 10px 10px;
transition: background .3s linear, color .3s linear;
display: flex;
align-items: center;
}
.sidebar .nav-link .dcjq-icon {
height: 17px;
width: 17px;
background: url(../images/nav-expand.png) no-repeat;
margin-left: auto;
}
.sidebar .nav-link i {
.sidebar .nav-link i:first-child {
width: 22px;
}
.sidebar .nav-link.active, .sidebar .nav-link.active + .sub,
.sidebar .sub .sub .nav-item .nav-link:hover, .sidebar .sub .sub .nav-item .nav-link:focus {
background: #35404D;
}
.sidebar .nav-link.active .dcjq-icon {
background-position: bottom;
}
.sidebar .sub .nav-item.dcjq-parent-li {
margin-left: 0;
.sidebar .sub .nav-item {
margin-right: 0;
}
.sidebar .sub .nav-item.dcjq-parent-li .nav-link {
padding-left: 20px;
}
.sidebar .nav-link .fa-angle-left {
transition: all .3s linear;
transform-origin: center;
}
.sidebar .sub .dcjq-parent-li .nav-link.active, .sidebar .sub .dcjq-parent-li .nav-link.active + .sub,
.sidebar .sub .nav-item .nav-link:hover, .sidebar .sub .nav-item .nav-link:focus {
background: #3a4756;
.sidebar .nav-link:not(.collapsed) .fa-angle-left {
transform: rotate(-90deg);
}
.sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar .nav-sidebar > .nav-item > .nav-link[aria-expanded="true"],
.sidebar .show .nav-item .nav-link:hover:before,
.sidebar .nav-sidebar .nav-item:not(.parent) .nav-link.active:before,
.sidebar .nav-sidebar .nav-link.active {
background-color: rgba(255,255,255,.1);
}
.sidebar .nav-sidebar .show .nav-link, .sidebar .nav-sidebar .collapsing .nav-link {
background-color: transparent;
}
.sidebar .sub .nav-item .nav-link:before {
background-color: transparent;
content: '';
position: absolute;
left: 10px;
right: 10px;
border-radius: 4px;
z-index: -1;
height: 41px;
transition: all .3s linear;
}
.sidebar-toggle-box {
@ -315,14 +320,14 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
}
aside {
transition: transform .4s ease-in-out;
transition: transform .3s ease-in-out;
transform: translate(-100%);
position: absolute;
top: 96px;
bottom: 0;
left: 0;
right: 0;
z-index: 1080;
z-index: 5;
background: #2a3542;
}
@ -338,6 +343,10 @@ aside {
padding-right: 6px;
}
.main-header {
display: none;
}
footer {
background: #5b6e84;
color: #fff;
@ -346,7 +355,7 @@ footer {
left: 0;
bottom: 0;
right: 0;
z-index: 1040;
z-index: 4;
display: flex;
}
@ -548,6 +557,10 @@ input.pending {
margin-top: -10px;
}
.no-card-header .card-header {
display: none;
}
.btn i + span {
margin-left: 4px;
}
@ -859,4 +872,33 @@ label[for] {
.badge-md {
font-size: 0.75rem;
padding: 4px 6px;
}
}
.toggle .btn-default, .toggle.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-color: #ccc;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.toggle .btn-default.active {
background-image: none;
background-color: #e0e0e0;
border-color: #dbdbdb;
}
.toggle .btn-default.active:hover {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
.toggle.btn .toggle-handle {
display: inline-block;
margin-left: 0;
}

View File

@ -1,15 +1,72 @@
$(function () {
var $sideMenu = $(".sidebar");
$sideMenu.dcAccordion({
autoExpand: true,
saveState: false
(function ($) {
$.fn.extend({
autoScrollSidebar: function (options) {
var option = $.extend({ target: null, offsetTop: 0 }, options);
var $navItem = option.target;
if ($navItem === null || $navItem.length === 0) return this;
// sidebar scroll animate
var middle = this.outerHeight() / 2;
var top = $navItem.offset().top + option.offsetTop - this.offset().top;
var $scrollInstance = this[0]["__overlayScrollbars__"];
if (top > middle) {
if ($scrollInstance) $scrollInstance.scroll({ x: 0, y: top - middle }, 500, "swing");
else this.animate({ scrollTop: top - middle });
}
return this;
},
addNiceScroll: function () {
if (!$.browser.versions.ios && $(window).width() > 768) {
this.overlayScrollbars({
className: 'os-theme-light',
scrollbars: {
autoHide: 'leave',
autoHideDelay: 100
},
overflowBehavior: {
x: "hidden",
y: "scroll"
}
});
}
else {
this.css('overflow', 'auto');
}
return this;
}
});
var $breadNav = $('#breadNav');
})(jQuery);
$(function () {
var $sideMenu = $(".sidebar ul");
// breadcrumb
var $breadNav = $('#breadNav, .main-header .breadcrumb-item:last');
var arch = $sideMenu.find('a.active').last();
$breadNav.removeClass('d-none').text(arch.text() || $('title').text());
// custom scrollbar
var $sidebar = $('.sidebar').addNiceScroll().autoScrollSidebar({ target: arch.parent(), offsetTop: arch.parent().innerHeight() / 2 });
$sideMenu.on('click', 'a.dcjq-parent', function () {
return;
var $this = $(this);
if (!$.browser.versions.ios && $(window).width() > 768) {
setTimeout(function () {
var offsetScroll = parseInt($this.parents('.mCSB_container').css('top').replace('px', ''));
$sidebar.autoScrollSidebar({ target: $this.parent(), offsetTop: 25.5 - offsetScroll });
}, 600);
}
else if ($.browser.versions.ios && $(window).width() > 768) {
var offsetScroll = parseInt($this.parents('aside').scrollTop());
$sidebar.autoScrollSidebar({ target: $this.parent(), offsetTop: 25.5 + offsetScroll });
}
});
$('.sidebar-toggle-box').on('click', function (e) {
if ($(window).width() >= 768) {
// 判断是否为 LTE 模式
if ($(window).width() >= 768 && $('aside').is(':hidden')) {
e.preventDefault();
return false;
}

View File

@ -0,0 +1,83 @@
/*! ========================================================================
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0
* http://www.bootstraptoggle.com
* ========================================================================
* Copyright 2014 Min Hur, The New York Times Company
* Licensed under MIT
* ======================================================================== */
.checkbox label .toggle,
.checkbox-inline .toggle {
margin-left: -20px;
margin-right: 5px;
}
.toggle {
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-group {
position: absolute;
width: 200%;
top: 0;
bottom: 0;
left: 0;
transition: left 0.35s;
-webkit-transition: left 0.35s;
-moz-user-select: none;
-webkit-user-select: none;
}
.toggle.off .toggle-group {
left: -100%;
}
.toggle-on {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
margin: 0;
border: 0;
border-radius: 0;
}
.toggle-off {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
margin: 0;
border: 0;
border-radius: 0;
}
.toggle-handle {
position: relative;
margin: 0 auto;
padding-top: 0px;
padding-bottom: 0px;
height: 100%;
width: 0px;
border-width: 0 1px;
}
.toggle.btn { min-width: 59px; min-height: 34px; }
.toggle-on.btn { padding-right: 24px; }
.toggle-off.btn { padding-left: 24px; }
.toggle.btn-lg { min-width: 79px; min-height: 45px; }
.toggle-on.btn-lg { padding-right: 31px; }
.toggle-off.btn-lg { padding-left: 31px; }
.toggle-handle.btn-lg { width: 40px; }
.toggle.btn-sm { min-width: 50px; min-height: 30px;}
.toggle-on.btn-sm { padding-right: 20px; }
.toggle-off.btn-sm { padding-left: 20px; }
.toggle.btn-xs { min-width: 35px; min-height: 22px;}
.toggle-on.btn-xs { padding-right: 12px; }
.toggle-off.btn-xs { padding-left: 12px; }

View File

@ -0,0 +1,28 @@
/*! ========================================================================
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0
* http://www.bootstraptoggle.com
* ========================================================================
* Copyright 2014 Min Hur, The New York Times Company
* Licensed under MIT
* ======================================================================== */
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}

View File

@ -0,0 +1,180 @@
/*! ========================================================================
* Bootstrap Toggle: bootstrap-toggle.js v2.2.0
* http://www.bootstraptoggle.com
* ========================================================================
* Copyright 2014 Min Hur, The New York Times Company
* Licensed under MIT
* ======================================================================== */
+function ($) {
'use strict';
// TOGGLE PUBLIC CLASS DEFINITION
// ==============================
var Toggle = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, this.defaults(), options)
this.render()
}
Toggle.VERSION = '2.2.0'
Toggle.DEFAULTS = {
on: 'On',
off: 'Off',
onstyle: 'primary',
offstyle: 'default',
size: 'normal',
style: '',
width: null,
height: null
}
Toggle.prototype.defaults = function() {
return {
on: this.$element.attr('data-on') || Toggle.DEFAULTS.on,
off: this.$element.attr('data-off') || Toggle.DEFAULTS.off,
onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle,
offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle,
size: this.$element.attr('data-size') || Toggle.DEFAULTS.size,
style: this.$element.attr('data-style') || Toggle.DEFAULTS.style,
width: this.$element.attr('data-width') || Toggle.DEFAULTS.width,
height: this.$element.attr('data-height') || Toggle.DEFAULTS.height
}
}
Toggle.prototype.render = function () {
this._onstyle = 'btn-' + this.options.onstyle
this._offstyle = 'btn-' + this.options.offstyle
var size = this.options.size === 'large' ? 'btn-lg'
: this.options.size === 'small' ? 'btn-sm'
: this.options.size === 'mini' ? 'btn-xs'
: ''
var $toggleOn = $('<label class="btn">').html(this.options.on)
.addClass(this._onstyle + ' ' + size)
var $toggleOff = $('<label class="btn">').html(this.options.off)
.addClass(this._offstyle + ' ' + size + ' active')
var $toggleHandle = $('<span class="toggle-handle btn btn-default">')
.addClass(size)
var $toggleGroup = $('<div class="toggle-group">')
.append($toggleOn, $toggleOff, $toggleHandle)
var $toggle = $('<div class="toggle btn" data-toggle="toggle">')
.addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' )
.addClass(size).addClass(this.options.style)
this.$element.wrap($toggle)
$.extend(this, {
$toggle: this.$element.parent(),
$toggleOn: $toggleOn,
$toggleOff: $toggleOff,
$toggleGroup: $toggleGroup
})
this.$toggle.append($toggleGroup)
var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2)
var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight())
$toggleOn.addClass('toggle-on')
$toggleOff.addClass('toggle-off')
this.$toggle.css({ width: width, height: height })
if (this.options.height) {
$toggleOn.css('line-height', $toggleOn.height() + 'px')
$toggleOff.css('line-height', $toggleOff.height() + 'px')
}
this.update(true)
this.trigger(true)
}
Toggle.prototype.toggle = function () {
if (this.$element.prop('checked')) this.off()
else this.on()
}
Toggle.prototype.on = function (silent) {
if (this.$element.prop('disabled')) return false
this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle)
this.$element.prop('checked', true)
if (!silent) this.trigger()
}
Toggle.prototype.off = function (silent) {
if (this.$element.prop('disabled')) return false
this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off')
this.$element.prop('checked', false)
if (!silent) this.trigger()
}
Toggle.prototype.enable = function () {
this.$toggle.removeAttr('disabled')
this.$element.prop('disabled', false)
}
Toggle.prototype.disable = function () {
this.$toggle.attr('disabled', 'disabled')
this.$element.prop('disabled', true)
}
Toggle.prototype.update = function (silent) {
if (this.$element.prop('disabled')) this.disable()
else this.enable()
if (this.$element.prop('checked')) this.on(silent)
else this.off(silent)
}
Toggle.prototype.trigger = function (silent) {
this.$element.off('change.bs.toggle')
if (!silent) this.$element.change()
this.$element.on('change.bs.toggle', $.proxy(function() {
this.update()
}, this))
}
Toggle.prototype.destroy = function() {
this.$element.off('change.bs.toggle')
this.$toggleGroup.remove()
this.$element.removeData('bs.toggle')
this.$element.unwrap()
}
// TOGGLE PLUGIN DEFINITION
// ========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.toggle')
var options = typeof option == 'object' && option
if (!data) $this.data('bs.toggle', (data = new Toggle(this, options)))
if (typeof option == 'string' && data[option]) data[option]()
})
}
var old = $.fn.bootstrapToggle
$.fn.bootstrapToggle = Plugin
$.fn.bootstrapToggle.Constructor = Toggle
// TOGGLE NO CONFLICT
// ==================
$.fn.toggle.noConflict = function () {
$.fn.bootstrapToggle = old
return this
}
// TOGGLE DATA-API
// ===============
$(function() {
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle()
})
$(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) {
var $checkbox = $(this).find('input[type=checkbox]')
$checkbox.bootstrapToggle('toggle')
e.preventDefault()
})
}(jQuery);

View File

@ -0,0 +1,9 @@
/*! ========================================================================
* Bootstrap Toggle: bootstrap-toggle.js v2.2.0
* http://www.bootstraptoggle.com
* ========================================================================
* Copyright 2014 Min Hur, The New York Times Company
* Licensed under MIT
* ======================================================================== */
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
//# sourceMappingURL=bootstrap-toggle.min.js.map

View File

@ -0,0 +1,81 @@
.form-checkbox {
font-weight: 500;
cursor: pointer;
display: inline-block;
user-select: none;
white-space: nowrap;
margin: 0;
}
.form-checkbox .checkbox-input {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.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;
}
@media (min-width: 576px) {
.form-inline .form-checkbox {
display: inline-block;
}
}

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

View File

@ -500,6 +500,17 @@
});
}
// extend bootstrap-toggle
if($.fn.bootstrapToggle) {
var toggle = $.fn.bootstrapToggle.Constructor;
var oldFunc = toggle.prototype.render;
toggle.prototype.render = function() {
var defaultVal = this.$element.attr('data-default-val') || '';
if(defaultVal === '') this.$element.prop('checked', true);
oldFunc.call(this);
}
}
if (window.NProgress) {
$(document).ajaxStart(function () {
return NProgress.start();
@ -526,13 +537,13 @@
"hideMethod": "fadeOut"
};
$('.collapse').on('shown.bs.collapse', function () {
$('body > section .collapse').on('shown.bs.collapse', function () {
$.footer().removeClass('d-none');
}).on('hidden.bs.collapse', function () {
}).on('body > section hidden.bs.collapse', function () {
$.footer().removeClass('d-none');
}).on('hide.bs.collapse', function () {
}).on('body > section hide.bs.collapse', function () {
$('footer').addClass('d-none');
}).on('show.bs.collapse', function () {
}).on('body > section show.bs.collapse', function () {
$('footer').addClass('d-none');
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 906 B