menu.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /**
  2. * UI v1.1.0
  3. * Copyright 2017-2018 Muyao
  4. * Licensed under the Muyao License 1.0
  5. */
  6. (function (window, document, $) {
  7. 'use strict';
  8. /***
  9. * 左侧菜单相关事件功能(默认为折叠效果)
  10. *
  11. * 提供了多个可触发事件:
  12. * deactive.site.menu : 取消菜单选中项
  13. * active.site.menu : 设置菜单选中项
  14. * open.site.menu : 展开子菜单
  15. * close.site.menu : 收起子菜单
  16. *
  17. * 可自定义事件:
  18. * expanded.site.menu : 子菜单展开后动作
  19. * collapsed.site.menu : 子菜单收起后动作
  20. * **/
  21. $.site.menu = {
  22. speed: 250,
  23. accordion: true, // 手风琴效果标识
  24. init: function () {
  25. var $siteMenubar = this.$siteMenubar = $('#admui-navTabs .site-menu');
  26. if (!$siteMenubar.length) {
  27. return;
  28. }
  29. this._bind();
  30. },
  31. _bind: function () {
  32. var self = this,
  33. $body = $('body'),
  34. $siteMenubar = this.$siteMenubar;
  35. $siteMenubar
  36. .on('mouseenter.site.menu', '.site-menu-item', function () {
  37. var $item = $(this),
  38. folded = $body.hasClass('site-menubar-fold');
  39. if (folded === true && $item.is('.has-sub') && $item.parent('.site-menu').length) {
  40. self.position($item, $item.children('.site-menu-sub'));
  41. }
  42. $item.addClass('hover');
  43. })
  44. .on('mouseleave.site.menu', '.site-menu-item', function () {
  45. var $item = $(this),
  46. folded = $body.hasClass('site-menubar-fold');
  47. if (folded === true && $item.is('.has-sub') && $item.parent('.site-menu').length) {
  48. $item.children('.site-menu-sub').css("max-height", "");
  49. }
  50. $item.removeClass('hover');
  51. })
  52. .on('deactive.site.menu', '.site-menu-item.active', function () {
  53. $(this).removeClass('active');
  54. })
  55. .on('active.site.menu', '.site-menu-item', function () {
  56. $(this).addClass('active');
  57. })
  58. .on('open.site.menu', '.site-menu-item', function (e) {
  59. var $item = $(this);
  60. self._expand($item, function () {
  61. $item.addClass('open');
  62. });
  63. if (self.accordion && $item.closest('li.has-sub').length <= 1) {
  64. $item.siblings('.open').trigger('close.site.menu');
  65. }
  66. e.stopPropagation();
  67. })
  68. .on('close.site.menu', '.site-menu-item.open', function (e) {
  69. var $item = $(this);
  70. self._collapse($item, function () {
  71. $item.removeClass('open');
  72. });
  73. e.stopPropagation();
  74. })
  75. .on('click.site.menu ', '.site-menu-item > a', function () {
  76. var $item = $(this),
  77. $parent = $item.parent();
  78. if ($parent.is('.has-sub')) {
  79. if ($parent.is('.open')) {
  80. $parent.trigger('close.site.menu');
  81. } else {
  82. $parent.trigger('open.site.menu');
  83. }
  84. } else {
  85. $item.closest('li').siblings('.open').trigger('close.site.menu');
  86. $item.closest('li.has-sub').siblings('.open').trigger('close.site.menu');
  87. $item.parents('div.tab-pane').siblings().find('li.open').trigger('close.site.menu');
  88. $siteMenubar.find('li.active').trigger('deactive.site.menu');
  89. $parent.trigger('active.site.menu');
  90. }
  91. })
  92. //.on('tap.site.menu', '> .site-menu-item > a', function () { // 左侧菜单在移动设备下事件操作
  93. /*var link = $(this).attr('href');
  94. if (link) {
  95. window.location = link;
  96. }*/
  97. // })
  98. .on('touchend.site.menu', '> .site-menu-item > a', function () {
  99. var $item = $(this).parent('.site-menu-item'),
  100. folded = $body.hasClass('site-menubar-fold');
  101. if (!folded) {
  102. return;
  103. }
  104. if ($item.is('.has-sub') && $item.parent('.site-menu').length) {
  105. $item.siblings('.hover').removeClass('hover');
  106. if ($item.is('.hover')) {
  107. $item.removeClass('hover');
  108. } else {
  109. $item.addClass('hover');
  110. }
  111. }
  112. })
  113. .on('scroll.site.menu', '.site-menu-sub', function (e) {
  114. e.stopPropagation();
  115. });
  116. },
  117. _collapse: function ($item, callback) { // 子菜单的收起动作
  118. var self = this;
  119. $item.children('.site-menu-sub').slideUp(self.speed, function () {
  120. if (callback) {
  121. callback();
  122. }
  123. // 触发该元素上绑定的'collapsed.site.menu'事件
  124. self.$siteMenubar.trigger('collapsed.site.menu');
  125. });
  126. },
  127. _expand: function ($item, callback) { // 子菜单的展开动作
  128. var self = this;
  129. $item.children('.site-menu-sub').slideDown(self.speed, function () {
  130. if (callback) {
  131. callback();
  132. }
  133. // 触发该元素上绑定的'expanded.site.menu'事件
  134. self.$siteMenubar.trigger('expanded.site.menu');
  135. });
  136. },
  137. refresh: function () { // 重置左侧菜单状态
  138. var $siteMenubar = this.$siteMenubar;
  139. $siteMenubar.find('li.open').trigger('close.site.menu');
  140. $siteMenubar.find('li.active').trigger('deactive.site.menu');
  141. },
  142. position: function ($item, $dropdown) { // 窗口 | 在小屏幕设备上,左侧系统菜单的下拉列表的位置操作功能
  143. var offsetTop = $item.position().top,
  144. menubarHeight = $("#admui-navTabs").outerHeight(),
  145. itemHeight = $item.find("> a").outerHeight();
  146. $dropdown.removeClass('site-menu-sub-up').css('max-height', "");
  147. if (offsetTop > menubarHeight / 2) {
  148. $dropdown.addClass('site-menu-sub-up');
  149. if ($.site.menubar.foldAlt) {
  150. offsetTop = offsetTop - itemHeight;
  151. }
  152. $dropdown.css('max-height', offsetTop + itemHeight);
  153. } else {
  154. if ($.site.menubar.foldAlt) {
  155. offsetTop = offsetTop + itemHeight;
  156. }
  157. $dropdown.removeClass('site-menu-sub-up');
  158. $dropdown.css('max-height', menubarHeight - offsetTop);
  159. }
  160. }
  161. };
  162. })(window, document, jQuery);