feat: 整合 AdminLTE 侧边栏控件
This commit is contained in:
Argo Zhang
parent
c3667ddce6
commit
190a624e27
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
<!-- sidebar menu start-->
|
||||
<div class="sidebar">
|
||||
<ul class="nav-sidebar nav nav-pills flex-column flex-nowrap">
|
||||
<ul class="nav-sidebar nav nav-pills flex-column flex-nowrap" data-widget="treeview">
|
||||
@foreach (var menu in Model.Navigations)
|
||||
{
|
||||
@await Html.PartialAsync("SubNavItem", menu)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,21 @@
|
|||
@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><span>@Model.Name</span></a>
|
||||
@if (Model.Menus.Any())
|
||||
{
|
||||
@await Html.PartialAsync("SubNavigation", Model.Menus)
|
||||
}
|
||||
</li>
|
||||
@if(Model.Menus.Any())
|
||||
{
|
||||
<li class="nav-item has-treeview">
|
||||
<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)
|
||||
}
|
||||
</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>
|
||||
@if (Model.Menus.Any())
|
||||
{
|
||||
@await Html.PartialAsync("SubNavigation", Model.Menus)
|
||||
}
|
||||
</li>
|
||||
}
|
||||
|
|
@ -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 nav-treeview">
|
||||
@foreach (var menu in Model)
|
||||
{
|
||||
@await Html.PartialAsync("SubNavItem", menu)
|
||||
|
|
|
|||
|
|
@ -20,19 +20,17 @@
|
|||
<environment include="Development">
|
||||
<script src="~/lib/overlayscrollbars/jquery.overlayScrollbars.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/sweetalert/sweetalert2.js" rel="stylesheet"></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/dcjqaccordion/js/jquery.dcjqaccordion.2.7.min.js"></script>
|
||||
<script src="~/lib/sweetalert/sweetalert2.min.js" rel="stylesheet"></script>
|
||||
<script src="~/lib/nprogress/nprogress.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.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>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,6 @@ aside {
|
|||
aside .nav-brand, .sidebar-open aside:hover .nav-brand {
|
||||
height: 55px;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px #ddd;
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
|
|
@ -219,6 +218,10 @@ body {
|
|||
transition: width .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;
|
||||
}
|
||||
|
|
@ -243,7 +246,7 @@ body {
|
|||
margin-left: 0.625rem;
|
||||
}
|
||||
|
||||
aside .sub .nav-link, .userinfo .dropdown-item {
|
||||
aside .sub .nav-link, .userinfo .dropdown-item, aside .sidebar .sub .nav-item {
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
|
|
@ -252,7 +255,7 @@ body {
|
|||
}
|
||||
|
||||
.sidebar-open aside:hover {
|
||||
width: 210px;
|
||||
width: 13.375rem;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
|
|
@ -293,11 +296,7 @@ body {
|
|||
transition: margin-left .3s linear;
|
||||
}
|
||||
|
||||
.sidebar-open .sub .nav-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-open aside:hover .sub .nav-link {
|
||||
padding-left: 10px;
|
||||
.sidebar-open aside .sidebar .sub .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,28 +244,18 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
|
|||
background: inherit;
|
||||
}
|
||||
|
||||
.sidebar .nav-item {
|
||||
margin: 2px 10px;
|
||||
.sidebar .nav-treeview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
|
||||
background: #35404d;
|
||||
color: #fff;
|
||||
}
|
||||
.sidebar .menu-open .nav-treeview {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.dcjq-parent.active {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.dcjq-parent.active + .sub {
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-item.active > .nav-link {
|
||||
color: #FF6C60;
|
||||
}
|
||||
.sidebar .nav-item {
|
||||
margin: 2px 10px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sidebar .nav-sidebar {
|
||||
margin: 10px 0;
|
||||
|
|
@ -279,38 +269,30 @@ body, .form-control, .dropdown-menu, .btn:not(.btn-lg):not(.btn-xs), .input-grou
|
|||
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-item .nav-link:hover, .sidebar .nav-item .nav-link:focus, .sidebar .nav-sidebar .nav-item .nav-link.active {
|
||||
background-color: #3a4756;
|
||||
}
|
||||
|
||||
.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 .sub .nav-item .nav-link:hover, .sidebar .sub .nav-item .nav-link:focus, .sidebar .nav-sidebar .sub .nav-item .nav-link.active {
|
||||
background-color: inherit;
|
||||
color: #FF6C60;
|
||||
}
|
||||
|
||||
.sidebar .nav-item .fa-angle-left {
|
||||
transition: all .3s linear;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.sidebar .nav-item.menu-open > a .fa-angle-left {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.sidebar-toggle-box {
|
||||
|
|
|
|||
|
|
@ -136,15 +136,10 @@ $(function () {
|
|||
// Issue https://gitee.com/LongbowEnterprise/dashboard/issues?id=I1067G
|
||||
var $activeLink = $sideMenu.find('a.nav-link.active');
|
||||
while ($activeLink.length > 0) {
|
||||
var $li = $activeLink.parent('li').addClass('active');
|
||||
var $li = $activeLink.parent('li').addClass('menu-open');
|
||||
$activeLink = $li.parent().prev().addClass('active');
|
||||
}
|
||||
|
||||
$sideMenu.dcAccordion({
|
||||
autoExpand: true,
|
||||
saveState: false
|
||||
});
|
||||
|
||||
// breadcrumb
|
||||
var $breadNav = $('#breadNav, .main-header .breadcrumb-item:last');
|
||||
var arch = $sideMenu.find('a.active').last();
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
/**
|
||||
* Cookie plugin
|
||||
*
|
||||
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Create a cookie with the given name and value and other optional parameters.
|
||||
*
|
||||
* @example $.cookie('the_cookie', 'the_value');
|
||||
* @desc Set the value of a cookie.
|
||||
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
|
||||
* @desc Create a cookie with all available options.
|
||||
* @example $.cookie('the_cookie', 'the_value');
|
||||
* @desc Create a session cookie.
|
||||
* @example $.cookie('the_cookie', null);
|
||||
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
|
||||
* used when the cookie was set.
|
||||
*
|
||||
* @param String name The name of the cookie.
|
||||
* @param String value The value of the cookie.
|
||||
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
|
||||
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
|
||||
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
|
||||
* If set to null or omitted, the cookie will be a session cookie and will not be retained
|
||||
* when the the browser exits.
|
||||
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
|
||||
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
|
||||
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
|
||||
* require a secure protocol (like HTTPS).
|
||||
* @type undefined
|
||||
*
|
||||
* @name $.cookie
|
||||
* @cat Plugins/Cookie
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
|
||||
/**
|
||||
* Get the value of a cookie with the given name.
|
||||
*
|
||||
* @example $.cookie('the_cookie');
|
||||
* @desc Get the value of a cookie.
|
||||
*
|
||||
* @param String name The name of the cookie.
|
||||
* @return The value of the cookie.
|
||||
* @type String
|
||||
*
|
||||
* @name $.cookie
|
||||
* @cat Plugins/Cookie
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
jQuery.cookie = function(name, value, options) {
|
||||
if (typeof value != 'undefined') { // name and value given, set cookie
|
||||
options = options || {};
|
||||
if (value === null) {
|
||||
value = '';
|
||||
options.expires = -1;
|
||||
}
|
||||
var expires = '';
|
||||
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
|
||||
var date;
|
||||
if (typeof options.expires == 'number') {
|
||||
date = new Date();
|
||||
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
|
||||
} else {
|
||||
date = options.expires;
|
||||
}
|
||||
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
|
||||
}
|
||||
// CAUTION: Needed to parenthesize options.path and options.domain
|
||||
// in the following expressions, otherwise they evaluate to undefined
|
||||
// in the packed version for some reason...
|
||||
var path = options.path ? '; path=' + (options.path) : '';
|
||||
var domain = options.domain ? '; domain=' + (options.domain) : '';
|
||||
var secure = options.secure ? '; secure' : '';
|
||||
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
|
||||
} else { // only name given, get cookie
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie != '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = jQuery.trim(cookies[i]);
|
||||
// Does this cookie string begin with the name we want?
|
||||
if (cookie.substring(0, name.length + 1) == (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
/*
|
||||
* DC jQuery Vertical Accordion Menu - jQuery vertical accordion menu plugin
|
||||
* Copyright (c) 2011 Design Chemical
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
$.fn.dcAccordion = function(options) {
|
||||
//set default options
|
||||
var defaults = {
|
||||
classParent : 'dcjq-parent',
|
||||
classActive : 'active',
classArrow : 'dcjq-icon',
classCount : 'dcjq-count',
|
||||
classExpand : 'dcjq-current-parent',
|
||||
eventType : 'click',
|
||||
hoverDelay : 300,
|
||||
menuClose : true,
|
||||
autoClose : true,
|
||||
autoExpand : false,
|
||||
speed : 'slow',
|
||||
saveState : true,
|
||||
disableLink : true,
showCount : false,
|
||||
cookie : 'dcjq-accordion'
|
||||
};
|
||||
//call in the default otions
|
||||
var options = $.extend(defaults, options);
|
||||
this.each(function(options){
|
||||
var obj = this;
|
||||
setUpAccordion();
|
||||
if(defaults.saveState == true){
|
||||
checkCookie(defaults.cookie, obj);
|
||||
}
|
||||
if(defaults.autoExpand == true){
|
||||
$('li.'+defaults.classExpand+' > a').addClass(defaults.classActive);
|
||||
}
|
||||
resetAccordion();
|
||||
if(defaults.eventType == 'hover'){
|
||||
var config = {
|
||||
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
|
||||
interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
|
||||
over: linkOver, // function = onMouseOver callback (REQUIRED)
|
||||
timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
|
||||
out: linkOut // function = onMouseOut callback (REQUIRED)
|
||||
};
|
||||
$('li a',obj).hoverIntent(config);
|
||||
var configMenu = {
|
||||
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
|
||||
interval: 1000, // number = milliseconds for onMouseOver polling interval
|
||||
over: menuOver, // function = onMouseOver callback (REQUIRED)
|
||||
timeout: 1000, // number = milliseconds delay before onMouseOut
|
||||
out: menuOut // function = onMouseOut callback (REQUIRED)
|
||||
};
|
||||
$(obj).hoverIntent(configMenu);
|
||||
// Disable parent links
|
||||
if(defaults.disableLink == true){
|
||||
$('li a',obj).click(function(e){
|
||||
if($(this).siblings('ul').length >0){
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
$('li a',obj).click(function(e){
|
||||
$activeLi = $(this).parent('li');
|
||||
$parentsLi = $activeLi.parents('li');
|
||||
$parentsUl = $activeLi.parents('ul');
|
||||
// Prevent browsing to link if has child links
|
||||
if(defaults.disableLink == true){
|
||||
if($(this).siblings('ul').length >0){
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
// Auto close sibling menus
|
||||
if(defaults.autoClose == true){
|
||||
autoCloseAccordion($parentsLi, $parentsUl);
|
||||
}
|
||||
if ($('> ul',$activeLi).is(':visible')){
|
||||
$('ul',$activeLi).slideUp(defaults.speed);
|
||||
$('a',$activeLi).removeClass(defaults.classActive);
|
||||
} else {
|
||||
$(this).siblings('ul').slideToggle(defaults.speed);
|
||||
$('> a',$activeLi).addClass(defaults.classActive);
|
||||
}
|
||||
// Write cookie if save state is on
|
||||
if(defaults.saveState == true){
|
||||
createCookie(defaults.cookie, obj);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Set up accordion
|
||||
function setUpAccordion(){
|
||||
$arrow = '<span class="'+defaults.classArrow+'"></span>';
|
||||
var classParentLi = defaults.classParent+'-li';
|
||||
$('> ul',obj).show();
|
||||
$('li',obj).each(function(){
|
||||
if($('> ul',this).length > 0){
$(this).addClass(classParentLi);
|
||||
$('> a',this).addClass(defaults.classParent).append($arrow);
|
||||
}
|
||||
});
|
||||
$('> ul',obj).hide();
|
||||
if(defaults.showCount == true){
|
||||
$('li.'+classParentLi,obj).each(function(){
|
||||
if(defaults.disableLink == true){
|
||||
var getCount = parseInt($('ul a:not(.'+defaults.classParent+')',this).length);
|
||||
} else {
|
||||
var getCount = parseInt($('ul a',this).length);
|
||||
}
|
||||
$('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function linkOver(){
|
||||
|
||||
$activeLi = $(this).parent('li');
|
||||
$parentsLi = $activeLi.parents('li');
|
||||
$parentsUl = $activeLi.parents('ul');
|
||||
|
||||
// Auto close sibling menus
|
||||
if(defaults.autoClose == true){
|
||||
autoCloseAccordion($parentsLi, $parentsUl);
|
||||
|
||||
}
|
||||
|
||||
if ($('> ul',$activeLi).is(':visible')){
|
||||
$('ul',$activeLi).slideUp(defaults.speed);
|
||||
$('a',$activeLi).removeClass(defaults.classActive);
|
||||
} else {
|
||||
$(this).siblings('ul').slideToggle(defaults.speed);
|
||||
$('> a',$activeLi).addClass(defaults.classActive);
|
||||
}
|
||||
|
||||
// Write cookie if save state is on
|
||||
if(defaults.saveState == true){
|
||||
createCookie(defaults.cookie, obj);
|
||||
}
|
||||
}
|
||||
|
||||
function linkOut(){
|
||||
}
|
||||
|
||||
function menuOver(){
|
||||
}
|
||||
|
||||
function menuOut(){
|
||||
|
||||
if(defaults.menuClose == true){
|
||||
$('ul',obj).slideUp(defaults.speed);
|
||||
// Reset active links
|
||||
$('a',obj).removeClass(defaults.classActive);
|
||||
createCookie(defaults.cookie, obj);
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-Close Open Menu Items
|
||||
function autoCloseAccordion($parentsLi, $parentsUl){
|
||||
$('ul',obj).not($parentsUl).slideUp(defaults.speed);
|
||||
// Reset active links
|
||||
$('a',obj).removeClass(defaults.classActive);
|
||||
$('> a',$parentsLi).addClass(defaults.classActive);
|
||||
}
|
||||
// Reset accordion using active links
|
||||
function resetAccordion(){
|
||||
$('ul',obj).hide();
|
||||
$allActiveLi = $('a.'+defaults.classActive,obj);
|
||||
$allActiveLi.siblings('ul').show();
|
||||
}
|
||||
});
|
||||
// Retrieve cookie value and set active items
|
||||
function checkCookie(cookieId, obj){
|
||||
var cookieVal = $.cookie(cookieId);
|
||||
if(cookieVal != null){
|
||||
// create array from cookie string
|
||||
var activeArray = cookieVal.split(',');
|
||||
$.each(activeArray, function(index,value){
|
||||
var $cookieLi = $('li:eq('+value+')',obj);
|
||||
$('> a',$cookieLi).addClass(defaults.classActive);
|
||||
var $parentsLi = $cookieLi.parents('li');
|
||||
$('> a',$parentsLi).addClass(defaults.classActive);
|
||||
});
|
||||
}
|
||||
}
|
||||
// Write cookie
|
||||
function createCookie(cookieId, obj){
|
||||
var activeIndex = [];
|
||||
// Create array of active items index value
|
||||
$('li a.'+defaults.classActive,obj).each(function(i){
|
||||
var $arrayItem = $(this).parent('li');
|
||||
var itemIndex = $('li',obj).index($arrayItem);
|
||||
activeIndex.push(itemIndex);
|
||||
});
|
||||
// Store in cookie
|
||||
$.cookie(cookieId, activeIndex, { path: '/' });
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -1 +0,0 @@
|
|||
(function($){$.fn.dcAccordion=function(options){var defaults={classParent:'dcjq-parent',classActive:'active',classArrow:'dcjq-icon',classCount:'dcjq-count',classExpand:'dcjq-current-parent',eventType:'click',hoverDelay:300,menuClose:true,autoClose:true,autoExpand:false,speed:'slow',saveState:true,disableLink:true,showCount:false,cookie:'dcjq-accordion'};var options=$.extend(defaults,options);this.each(function(options){var obj=this;setUpAccordion();if(defaults.saveState==true){checkCookie(defaults.cookie,obj)}if(defaults.autoExpand==true){$('li.'+defaults.classExpand+' > a').addClass(defaults.classActive)}resetAccordion();if(defaults.eventType=='hover'){var config={sensitivity:2,interval:defaults.hoverDelay,over:linkOver,timeout:defaults.hoverDelay,out:linkOut};$('li a',obj).hoverIntent(config);var configMenu={sensitivity:2,interval:1000,over:menuOver,timeout:1000,out:menuOut};$(obj).hoverIntent(configMenu);if(defaults.disableLink==true){$('li a',obj).click(function(e){if($(this).siblings('ul').length>0){e.preventDefault()}})}}else{$('li a',obj).click(function(e){$activeLi=$(this).parent('li');$parentsLi=$activeLi.parents('li');$parentsUl=$activeLi.parents('ul');if(defaults.disableLink==true){if($(this).siblings('ul').length>0){e.preventDefault()}}if(defaults.autoClose==true){autoCloseAccordion($parentsLi,$parentsUl)}if($('> ul',$activeLi).is(':visible')){$('ul',$activeLi).slideUp(defaults.speed);$('a',$activeLi).removeClass(defaults.classActive)}else{$(this).siblings('ul').slideToggle(defaults.speed);$('> a',$activeLi).addClass(defaults.classActive)}if(defaults.saveState==true){createCookie(defaults.cookie,obj)}})}function setUpAccordion(){$arrow='<span class="'+defaults.classArrow+'"></span>';var classParentLi=defaults.classParent+'-li';$('> ul',obj).show();$('li',obj).each(function(){if($('> ul',this).length>0){$(this).addClass(classParentLi);$('> a',this).addClass(defaults.classParent).append($arrow)}});$('> ul',obj).hide();if(defaults.showCount==true){$('li.'+classParentLi,obj).each(function(){if(defaults.disableLink==true){var getCount=parseInt($('ul a:not(.'+defaults.classParent+')',this).length)}else{var getCount=parseInt($('ul a',this).length)}$('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>')})}}function linkOver(){$activeLi=$(this).parent('li');$parentsLi=$activeLi.parents('li');$parentsUl=$activeLi.parents('ul');if(defaults.autoClose==true){autoCloseAccordion($parentsLi,$parentsUl)}if($('> ul',$activeLi).is(':visible')){$('ul',$activeLi).slideUp(defaults.speed);$('a',$activeLi).removeClass(defaults.classActive)}else{$(this).siblings('ul').slideToggle(defaults.speed);$('> a',$activeLi).addClass(defaults.classActive)}if(defaults.saveState==true){createCookie(defaults.cookie,obj)}}function linkOut(){}function menuOver(){}function menuOut(){if(defaults.menuClose==true){$('ul',obj).slideUp(defaults.speed);$('a',obj).removeClass(defaults.classActive);createCookie(defaults.cookie,obj)}}function autoCloseAccordion($parentsLi,$parentsUl){$('ul',obj).not($parentsUl).slideUp(defaults.speed);$('a',obj).removeClass(defaults.classActive);$('> a',$parentsLi).addClass(defaults.classActive)}function resetAccordion(){$('ul',obj).hide();$allActiveLi=$('a.'+defaults.classActive,obj);$allActiveLi.siblings('ul').show()}});function checkCookie(cookieId,obj){var cookieVal=$.cookie(cookieId);if(cookieVal!=null){var activeArray=cookieVal.split(',');$.each(activeArray,function(index,value){var $cookieLi=$('li:eq('+value+')',obj);$('> a',$cookieLi).addClass(defaults.classActive);var $parentsLi=$cookieLi.parents('li');$('> a',$parentsLi).addClass(defaults.classActive)})}}function createCookie(cookieId,obj){var activeIndex=[];$('li a.'+defaults.classActive,obj).each(function(i){var $arrayItem=$(this).parent('li');var itemIndex=$('li',obj).index($arrayItem);activeIndex.push(itemIndex)});$.cookie(cookieId,activeIndex,{path:'/'})}}})(jQuery);
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
(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'
|
||||
};
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
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);
|
||||
Loading…
Reference in New Issue