123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- /**
- * UI v1.1.0
- * Copyright 2017-2018 Muyao
- * Licensed under the Muyao License 1.0
- */
- (function (window, document, $) {
- 'use strict';
- /***
- * 左侧菜单相关事件功能(默认为折叠效果)
- *
- * 提供了多个可触发事件:
- * deactive.site.menu : 取消菜单选中项
- * active.site.menu : 设置菜单选中项
- * open.site.menu : 展开子菜单
- * close.site.menu : 收起子菜单
- *
- * 可自定义事件:
- * expanded.site.menu : 子菜单展开后动作
- * collapsed.site.menu : 子菜单收起后动作
- * **/
- $.site.menu = {
- speed: 250,
- accordion: true, // 手风琴效果标识
- init: function () {
- var $siteMenubar = this.$siteMenubar = $('#admui-navTabs .site-menu');
- if (!$siteMenubar.length) {
- return;
- }
- this._bind();
- },
- _bind: function () {
- var self = this,
- $body = $('body'),
- $siteMenubar = this.$siteMenubar;
- $siteMenubar
- .on('mouseenter.site.menu', '.site-menu-item', function () {
- var $item = $(this),
- folded = $body.hasClass('site-menubar-fold');
- if (folded === true && $item.is('.has-sub') && $item.parent('.site-menu').length) {
- self.position($item, $item.children('.site-menu-sub'));
- }
- $item.addClass('hover');
- })
- .on('mouseleave.site.menu', '.site-menu-item', function () {
- var $item = $(this),
- folded = $body.hasClass('site-menubar-fold');
- if (folded === true && $item.is('.has-sub') && $item.parent('.site-menu').length) {
- $item.children('.site-menu-sub').css("max-height", "");
- }
- $item.removeClass('hover');
- })
- .on('deactive.site.menu', '.site-menu-item.active', function () {
- $(this).removeClass('active');
- })
- .on('active.site.menu', '.site-menu-item', function () {
- $(this).addClass('active');
- })
- .on('open.site.menu', '.site-menu-item', function (e) {
- var $item = $(this);
- self._expand($item, function () {
- $item.addClass('open');
- });
- if (self.accordion && $item.closest('li.has-sub').length <= 1) {
- $item.siblings('.open').trigger('close.site.menu');
- }
- e.stopPropagation();
- })
- .on('close.site.menu', '.site-menu-item.open', function (e) {
- var $item = $(this);
- self._collapse($item, function () {
- $item.removeClass('open');
- });
- e.stopPropagation();
- })
- .on('click.site.menu ', '.site-menu-item > a', function () {
- var $item = $(this),
- $parent = $item.parent();
- if ($parent.is('.has-sub')) {
- if ($parent.is('.open')) {
- $parent.trigger('close.site.menu');
- } else {
- $parent.trigger('open.site.menu');
- }
- } else {
- $item.closest('li').siblings('.open').trigger('close.site.menu');
- $item.closest('li.has-sub').siblings('.open').trigger('close.site.menu');
- $item.parents('div.tab-pane').siblings().find('li.open').trigger('close.site.menu');
- $siteMenubar.find('li.active').trigger('deactive.site.menu');
- $parent.trigger('active.site.menu');
- }
- })
- //.on('tap.site.menu', '> .site-menu-item > a', function () { // 左侧菜单在移动设备下事件操作
- /*var link = $(this).attr('href');
- if (link) {
- window.location = link;
- }*/
- // })
- .on('touchend.site.menu', '> .site-menu-item > a', function () {
- var $item = $(this).parent('.site-menu-item'),
- folded = $body.hasClass('site-menubar-fold');
- if (!folded) {
- return;
- }
- if ($item.is('.has-sub') && $item.parent('.site-menu').length) {
- $item.siblings('.hover').removeClass('hover');
- if ($item.is('.hover')) {
- $item.removeClass('hover');
- } else {
- $item.addClass('hover');
- }
- }
- })
- .on('scroll.site.menu', '.site-menu-sub', function (e) {
- e.stopPropagation();
- });
- },
- _collapse: function ($item, callback) { // 子菜单的收起动作
- var self = this;
- $item.children('.site-menu-sub').slideUp(self.speed, function () {
- if (callback) {
- callback();
- }
- // 触发该元素上绑定的'collapsed.site.menu'事件
- self.$siteMenubar.trigger('collapsed.site.menu');
- });
- },
- _expand: function ($item, callback) { // 子菜单的展开动作
- var self = this;
- $item.children('.site-menu-sub').slideDown(self.speed, function () {
- if (callback) {
- callback();
- }
- // 触发该元素上绑定的'expanded.site.menu'事件
- self.$siteMenubar.trigger('expanded.site.menu');
- });
- },
- refresh: function () { // 重置左侧菜单状态
- var $siteMenubar = this.$siteMenubar;
- $siteMenubar.find('li.open').trigger('close.site.menu');
- $siteMenubar.find('li.active').trigger('deactive.site.menu');
- },
- position: function ($item, $dropdown) { // 窗口 | 在小屏幕设备上,左侧系统菜单的下拉列表的位置操作功能
- var offsetTop = $item.position().top,
- menubarHeight = $("#admui-navTabs").outerHeight(),
- itemHeight = $item.find("> a").outerHeight();
- $dropdown.removeClass('site-menu-sub-up').css('max-height', "");
- if (offsetTop > menubarHeight / 2) {
- $dropdown.addClass('site-menu-sub-up');
- if ($.site.menubar.foldAlt) {
- offsetTop = offsetTop - itemHeight;
- }
- $dropdown.css('max-height', offsetTop + itemHeight);
- } else {
- if ($.site.menubar.foldAlt) {
- offsetTop = offsetTop + itemHeight;
- }
- $dropdown.removeClass('site-menu-sub-up');
- $dropdown.css('max-height', menubarHeight - offsetTop);
- }
- }
- };
- })(window, document, jQuery);
|