admin.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. var click = device.mobile() ? 'touchstart' : 'click';
  2. $(function() {
  3. // 侧边栏操作按钮
  4. $(document).on(click, '#guide', function() {
  5. $(this).toggleClass('toggled');
  6. $('#sidebar').toggleClass('toggled');
  7. });
  8. // 侧边栏二级菜单
  9. $(document).on('click', '.sub-menu a', function() {
  10. $(this).next().slideToggle(200);
  11. $(this).parent().toggleClass('toggled');
  12. });
  13. // 个人资料
  14. $(document).on('click', '.s-profile a', function() {
  15. $(this).next().slideToggle(200);
  16. $(this).parent().toggleClass('toggled');
  17. });
  18. // Waves初始化
  19. Waves.displayEffect();
  20. // 滚动条初始化
  21. $('#sidebar').mCustomScrollbar({
  22. theme: 'minimal-dark',
  23. scrollInertia: 100,
  24. axis: 'yx',
  25. mouseWheel: {
  26. enable: true,
  27. axis: 'y',
  28. preventDefault: true
  29. }
  30. });
  31. // 切换系统
  32. $('.switch-systems').click(function () {
  33. var systemid = $(this).attr('systemid');
  34. var systemname = $(this).attr('systemname');
  35. var systemtitle = $(this).attr('systemtitle');
  36. $('.system_menus').hide(0, function () {
  37. $('.system_' + systemid).show();
  38. });
  39. $('body').attr("id", systemname);
  40. $('#system_title').text(systemtitle);
  41. $.cookie('zheng-upms-systemid', systemid);
  42. $.cookie('zheng-upms-systemname', systemname);
  43. $.cookie('zheng-upms-systemtitle', systemtitle);
  44. });
  45. // 显示cookie菜单
  46. var systemid = $.cookie('zheng-upms-systemid') || 1;
  47. var systemname = $.cookie('zheng-upms-systemname') || 'zheng-upms-server';
  48. var systemtitle = $.cookie('zheng-upms-systemtitle') || '权限管理系统';
  49. $('.system_menus').hide(0, function () {
  50. $('.system_' + systemid).show();
  51. });
  52. $('body').attr('id', systemname);
  53. $('#system_title').text(systemtitle);
  54. });
  55. // iframe高度自适应
  56. function changeFrameHeight(ifm) {
  57. ifm.height = document.documentElement.clientHeight - 118;
  58. }
  59. function resizeFrameHeight() {
  60. $('.tab_iframe').css('height', document.documentElement.clientHeight - 118);
  61. $('md-tab-content').css('left', '0');
  62. }
  63. window.onresize = function() {
  64. resizeFrameHeight();
  65. initScrollShow();
  66. initScrollState();
  67. }
  68. // ========== 选项卡操作 ==========
  69. $(function() {
  70. // 选项卡点击
  71. $(document).on('click', '.content_tab li', function() {
  72. // 切换选项卡
  73. $('.content_tab li').removeClass('cur');
  74. $(this).addClass('cur');
  75. // 切换iframe
  76. $('.iframe').removeClass('cur');
  77. $('#iframe_' + $(this).data('index')).addClass('cur');
  78. var marginLeft = ($('#tabs').css('marginLeft').replace('px', ''));
  79. // 滚动到可视区域:在左侧
  80. if ($(this).position().left < marginLeft) {
  81. var left = $('.content_tab>ul').scrollLeft() + $(this).position().left - marginLeft;
  82. $('.content_tab>ul').animate({scrollLeft: left}, 200, function() {
  83. initScrollState();
  84. });
  85. }
  86. // 滚动到可视区域:在右侧
  87. if(($(this).position().left + $(this).width() - marginLeft) > document.getElementById('tabs').clientWidth) {
  88. var left = $('.content_tab>ul').scrollLeft() + (($(this).position().left + $(this).width() - marginLeft) - document.getElementById('tabs').clientWidth);
  89. $('.content_tab>ul').animate({scrollLeft: left}, 200, function() {
  90. initScrollState();
  91. });
  92. }
  93. });
  94. // 控制选项卡滚动位置
  95. $(document).on('click', '.tab_left>a', function() {
  96. $('.content_tab>ul').animate({scrollLeft: $('.content_tab>ul').scrollLeft() - 300}, 200, function() {
  97. initScrollState();
  98. });
  99. });
  100. // 向右箭头
  101. $(document).on('click', '.tab_right>a', function() {
  102. $('.content_tab>ul').animate({scrollLeft: $('.content_tab>ul').scrollLeft() + 300}, 200, function() {
  103. initScrollState();
  104. });
  105. });
  106. // 初始化箭头状态
  107. // 选项卡右键菜单
  108. var menu = new BootstrapMenu('.tabs li', {
  109. fetchElementData: function(item) {
  110. return item;
  111. },
  112. actionsGroups: [
  113. ['close', 'refresh'],
  114. ['closeOther', 'closeAll'],
  115. ['closeRight', 'closeLeft']
  116. ],
  117. actions: {
  118. close: {
  119. name: '关闭',
  120. iconClass: 'zmdi zmdi-close',
  121. onClick: function(item) {
  122. Tab.closeTab($(item));
  123. }
  124. },
  125. closeOther: {
  126. name: '关闭其他',
  127. iconClass: 'zmdi zmdi-arrow-split',
  128. onClick: function(item) {
  129. var index = $(item).data('index');
  130. $('.content_tab li').each(function() {
  131. if ($(this).data('index') != index) {
  132. Tab.closeTab($(this));
  133. }
  134. });
  135. }
  136. },
  137. closeAll: {
  138. name: '关闭全部',
  139. iconClass: 'zmdi zmdi-swap',
  140. onClick: function() {
  141. $('.content_tab li').each(function() {
  142. Tab.closeTab($(this));
  143. });
  144. }
  145. },
  146. closeRight: {
  147. name: '关闭右侧所有',
  148. iconClass: 'zmdi zmdi-arrow-right',
  149. onClick: function(item) {
  150. var index = $(item).data('index');
  151. $($('.content_tab li').toArray().reverse()).each(function() {
  152. if ($(this).data('index') != index) {
  153. Tab.closeTab($(this));
  154. } else {
  155. return false;
  156. }
  157. });
  158. }
  159. },
  160. closeLeft: {
  161. name: '关闭左侧所有',
  162. iconClass: 'zmdi zmdi-arrow-left',
  163. onClick: function(item) {
  164. var index = $(item).data('index');
  165. $('.content_tab li').each(function() {
  166. if ($(this).data('index') != index) {
  167. Tab.closeTab($(this));
  168. } else {
  169. return false;
  170. }
  171. });
  172. }
  173. },
  174. refresh: {
  175. name: '刷新',
  176. iconClass: 'zmdi zmdi-refresh',
  177. onClick: function(item) {
  178. var index = $(item).data('index');
  179. var $iframe = $('#iframe_' + index).find('iframe');
  180. $iframe.attr('src', $iframe.attr('src'));
  181. }
  182. }
  183. }
  184. });
  185. });
  186. // 选项卡对象
  187. var Tab = {
  188. addTab: function(title, url) {
  189. var index = url.replace(/\./g, '_').replace(/\//g, '_').replace(/:/g, '_').replace(/\?/g, '_').replace(/,/g, '_').replace(/=/g, '_').replace(/&/g, '_');
  190. // 如果存在选项卡,则激活,否则创建新选项卡
  191. if ($('#tab_' + index).length == 0) {
  192. // 添加选项卡
  193. $('.content_tab li').removeClass('cur');
  194. var tab = '<li id="tab_' + index +'" data-index="' + index + '" class="cur"><a class="waves-effect waves-light">' + title + '</a></li>';//<i class="zmdi zmdi-close"></i><
  195. $('.content_tab>ul').append(tab);
  196. // 添加iframe
  197. $('.iframe').removeClass('cur');
  198. var iframe = '<div id="iframe_' + index + '" class="iframe cur"><iframe class="tab_iframe" src="' + url + '" width="100%" frameborder="0" scrolling="auto" onload="changeFrameHeight(this)"></iframe></div>';
  199. $('.content_main').append(iframe);
  200. initScrollShow();
  201. $('.content_tab>ul').animate({scrollLeft: document.getElementById('tabs').scrollWidth - document.getElementById('tabs').clientWidth}, 200, function() {
  202. initScrollState();
  203. });
  204. } else {
  205. $('#tab_' + index).trigger('click');
  206. }
  207. // 关闭侧边栏
  208. $('#guide').trigger(click);
  209. },
  210. closeTab: function($item) {
  211. var closeable = $item.data('closeable');
  212. if (closeable != false) {
  213. // 如果当前时激活状态则关闭后激活左边选项卡
  214. if($item.hasClass('cur')) {
  215. $item.prev().trigger('click');
  216. }
  217. // 关闭当前选项卡
  218. var index = $item.data('index');
  219. $('#iframe_' + index).remove();
  220. $item.remove();
  221. }
  222. initScrollShow();
  223. }
  224. }
  225. function initScrollShow() {
  226. if (document.getElementById('tabs').scrollWidth > document.getElementById('tabs').clientWidth) {
  227. $('.content_tab').addClass('scroll');
  228. } else {
  229. $('.content_tab').removeClass('scroll');
  230. }
  231. }
  232. function initScrollState() {
  233. if ($('.content_tab>ul').scrollLeft() == 0) {
  234. $('.tab_left>a').removeClass('active');
  235. } else {
  236. $('.tab_left>a').addClass('active');
  237. }
  238. if (($('.content_tab>ul').scrollLeft() + document.getElementById('tabs').clientWidth) >= document.getElementById('tabs').scrollWidth) {
  239. $('.tab_right>a').removeClass('active');
  240. } else {
  241. $('.tab_right>a').addClass('active');
  242. }
  243. }
  244. function fullPage() {
  245. if ($.util.supportsFullScreen) {
  246. if ($.util.isFullScreen()) {
  247. $.util.cancelFullScreen();
  248. } else {
  249. $.util.requestFullScreen();
  250. }
  251. } else {
  252. alert("当前浏览器不支持全屏 API,请更换至最新的 Chrome/Firefox/Safari 浏览器或通过 F11 快捷键进行操作。");
  253. }
  254. }