refactor: 侧边栏树状控件使用collaps实现
This commit is contained in:
Argo Zhang
parent
b5f933b76e
commit
d925e284ee
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
<!-- sidebar menu start-->
|
||||
<div class="sidebar">
|
||||
<ul class="nav-sidebar nav nav-pills flex-column flex-nowrap" data-widget="treeview">
|
||||
<ul class="nav-sidebar nav nav-pills flex-column flex-nowrap">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
{
|
||||
@await Html.PartialAsync("SubNavItem", menu)
|
||||
|
|
|
|||
|
|
@ -1,18 +1,28 @@
|
|||
@model Bootstrap.Security.BootstrapMenu
|
||||
@if(Model.Menus.Any())
|
||||
{
|
||||
if(@Model.Active == "active")
|
||||
{
|
||||
<li class="nav-item has-treeview menu-open">
|
||||
@await Html.PartialAsync("SubNavItemLink", Model)
|
||||
</li>
|
||||
}
|
||||
else
|
||||
{
|
||||
<li class="nav-item has-treeview">
|
||||
@await Html.PartialAsync("SubNavItemLink", Model)
|
||||
</li>
|
||||
}
|
||||
<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
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
@model Bootstrap.Security.BootstrapMenu
|
||||
<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><i class="fa fa-angle-left"></i></a>
|
||||
@if (Model.Menus.Any())
|
||||
{
|
||||
@await Html.PartialAsync("SubNavigation", Model.Menus)
|
||||
}
|
||||
|
|
@ -20,17 +20,16 @@
|
|||
<environment include="Development">
|
||||
<script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.js"></script>
|
||||
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.js" rel="stylesheet"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.js"></script>
|
||||
<script src="~/lib/nprogress/nprogress.js"></script>
|
||||
</environment>
|
||||
<environment exclude="Development">
|
||||
<script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
|
||||
<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.min.js" rel="stylesheet"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.min.js"></script>
|
||||
<script src="~/lib/nprogress/nprogress.min.js"></script>
|
||||
</environment>
|
||||
<script src="~/lib/toastr.js/toastr.min.js"></script>
|
||||
<script src="~/lib/longbow-tree/longbow-tree.js"></script>
|
||||
<script src="~/js/common-scripts.js" asp-append-version="true"></script>
|
||||
@RenderSection("javascript", false)
|
||||
<script src="~/js/log.js" asp-append-version="true"></script>
|
||||
|
|
|
|||
|
|
@ -94,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -174,6 +174,24 @@ body {
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,14 +244,6 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
|
|||
background: inherit;
|
||||
}
|
||||
|
||||
.sidebar .nav-treeview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .menu-open > .nav-treeview {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar .nav-item {
|
||||
margin: 2px 10px;
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -277,32 +269,39 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
|
||||
background-color: rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.sidebar .nav-sidebar .nav-item .nav-link.active {
|
||||
background-color: rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.sidebar .sub .nav-item .nav-link.active {
|
||||
background-color: inherit;
|
||||
color: #FF6C60;
|
||||
}
|
||||
|
||||
.sidebar .sub .nav-item.has-treeview > .nav-link.active {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.sidebar .nav-item .fa-angle-left {
|
||||
.sidebar .nav-link .fa-angle-left {
|
||||
transition: all .3s linear;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.sidebar .nav-item.menu-open > a .fa-angle-left {
|
||||
.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 {
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
|
|
|
|||
|
|
@ -1,157 +0,0 @@
|
|||
(function ($) {
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
var NAME = 'Treeview';
|
||||
var DATA_KEY = 'lte.treeview';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var Event = {
|
||||
SELECTED: "selected" + EVENT_KEY,
|
||||
EXPANDED: "expanded" + EVENT_KEY,
|
||||
COLLAPSED: "collapsed" + EVENT_KEY,
|
||||
LOAD_DATA_API: "load" + EVENT_KEY
|
||||
};
|
||||
var Selector = {
|
||||
LI: '.nav-item',
|
||||
LINK: '.nav-link',
|
||||
TREEVIEW_MENU: '.nav-treeview',
|
||||
OPEN: '.menu-open',
|
||||
DATA_WIDGET: '[data-widget="treeview"]'
|
||||
};
|
||||
var ClassName = {
|
||||
LI: 'nav-item',
|
||||
LINK: 'nav-link',
|
||||
TREEVIEW_MENU: 'nav-treeview',
|
||||
OPEN: 'menu-open',
|
||||
SHOW: 'show'
|
||||
};
|
||||
var Default = {
|
||||
trigger: Selector.DATA_WIDGET + " " + Selector.LINK,
|
||||
animationSpeed: 300,
|
||||
accordion: true
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
};
|
||||
|
||||
var Treeview =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Treeview(element, config) {
|
||||
this._config = config;
|
||||
this._element = element;
|
||||
} // Public
|
||||
|
||||
|
||||
var _proto = Treeview.prototype;
|
||||
|
||||
_proto.init = function init() {
|
||||
this._setupListeners();
|
||||
};
|
||||
|
||||
_proto.expand = function expand(treeviewMenu, parentLi) {
|
||||
var _this = this;
|
||||
|
||||
var expandedEvent = $.Event(Event.EXPANDED);
|
||||
|
||||
if (this._config.accordion) {
|
||||
var openMenuLi = parentLi.siblings(Selector.OPEN).first();
|
||||
var openTreeview = openMenuLi.find(Selector.TREEVIEW_MENU).first();
|
||||
this.collapse(openTreeview, openMenuLi);
|
||||
}
|
||||
|
||||
parentLi.addClass(ClassName.SHOW);
|
||||
treeviewMenu.slideDown(this._config.animationSpeed, function () {
|
||||
parentLi.addClass(ClassName.OPEN);
|
||||
$(_this._element).trigger(expandedEvent);
|
||||
});
|
||||
};
|
||||
|
||||
_proto.collapse = function collapse(treeviewMenu, parentLi) {
|
||||
var _this2 = this;
|
||||
|
||||
var collapsedEvent = $.Event(Event.COLLAPSED);
|
||||
parentLi.removeClass(ClassName.SHOW);
|
||||
treeviewMenu.slideUp(this._config.animationSpeed, function () {
|
||||
parentLi.removeClass(ClassName.OPEN);
|
||||
$(_this2._element).trigger(collapsedEvent);
|
||||
treeviewMenu.find(Selector.OPEN + " > " + Selector.TREEVIEW_MENU).slideUp();
|
||||
treeviewMenu.find(Selector.OPEN).removeClass(ClassName.OPEN);
|
||||
});
|
||||
};
|
||||
|
||||
_proto.toggle = function toggle(event) {
|
||||
var $relativeTarget = $(event.currentTarget);
|
||||
var treeviewMenu = $relativeTarget.next();
|
||||
|
||||
if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
var parentLi = $relativeTarget.parents(Selector.LI).first();
|
||||
var isOpen = parentLi.hasClass(ClassName.OPEN);
|
||||
if (isOpen) {
|
||||
this.collapse($(treeviewMenu), parentLi);
|
||||
} else {
|
||||
this.expand($(treeviewMenu), parentLi);
|
||||
}
|
||||
} // Private
|
||||
;
|
||||
|
||||
_proto._setupListeners = function _setupListeners() {
|
||||
var _this3 = this;
|
||||
|
||||
$(document).on('click', this._config.trigger, function (event) {
|
||||
_this3.toggle(event);
|
||||
});
|
||||
} // Static
|
||||
;
|
||||
|
||||
Treeview._jQueryInterface = function _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
var data = $(this).data(DATA_KEY);
|
||||
|
||||
var _config = $.extend({}, Default, $(this).data());
|
||||
|
||||
if (!data) {
|
||||
data = new Treeview($(this), _config);
|
||||
$(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (config === 'init') {
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return Treeview;
|
||||
}();
|
||||
/**
|
||||
* Data API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
|
||||
$(window).on(Event.LOAD_DATA_API, function () {
|
||||
$(Selector.DATA_WIDGET).each(function () {
|
||||
Treeview._jQueryInterface.call($(this), 'init');
|
||||
});
|
||||
});
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Treeview._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Treeview;
|
||||
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Treeview._jQueryInterface;
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -526,13 +526,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');
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue