index.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. $.fn.Tab = function (options) {
  2. var cfg = {
  3. items: [],
  4. width: 500,
  5. height: 500,
  6. tabcontentWidth: 498,
  7. tabWidth: 100,
  8. tabHeight: 32,
  9. tabScroll: true,
  10. tabScrollWidth: 19,
  11. tabClass: 'tab',
  12. tabContentClass: 'tab-div-content',
  13. tabClassOn: 'on',
  14. tabClassOff: 'off',
  15. tabClassClose: 'tab_close',
  16. tabClassInner: 'inner',
  17. tabClassInnerLeft: 'innerLeft',
  18. tabClassInnerMiddle: 'innerMiddle',
  19. tabClassInnerRight: 'innerRight',
  20. tabClassText: 'text',
  21. tabClassScrollLeft: 'scroll-left',
  22. tabClassScrollRight: 'scroll-right',
  23. tabClassDiv: 'tab-div',
  24. addEvent: null,
  25. currentEvent: null
  26. };
  27. //默认显示第一个li
  28. var displayLINum = 0;
  29. $.extend(cfg, options);
  30. //判断是不是有隐藏的tab
  31. var tW = cfg.tabWidth * cfg.items.length;
  32. cfg.tabScroll ? tW -= cfg.tabScrollWidth * 2 : null;
  33. //tabDiv,该div是自动增加的
  34. var tab = $('<div />').attr('id', 'jquery_tab_div').height(cfg.tabHeight).addClass(cfg.tabClass).append('<ul />');
  35. //tab target content
  36. var tabContent = $('<div />').attr('id', 'jquery_tab_div_content').width(cfg.tabcontentWidth).height(cfg.height - cfg.tabHeight).addClass(cfg.tabContentClass);
  37. var ccW = (cfg.items.length * cfg.tabWidth) - cfg.width;
  38. var tabH = '';
  39. //增加一个tab下的li得模板
  40. var tabTemplate = '';
  41. tabTemplate = '<table class="' + cfg.tabClassInner + '" id="{0}" data-value="{3}" border="0" cellpadding="0" cellspacing="0"><tr>' + '<td class="' + cfg.tabClassInnerLeft + '"></td>'
  42. + '<td class="' + cfg.tabClassInnerMiddle + '"><span class="' + cfg.tabClassText + '"><i class="fa {2}"></i>&nbsp;{1}</span></td>' + '<td class="' + cfg.tabClassInnerMiddle + '"><div class="' + cfg.tabClassClose + ' ' + cfg.tabClassClose + '_noselected"></div></td>' + '<td class="' + cfg.tabClassInnerRight + '"></td>'
  43. + '</tr></table>';
  44. var scrollTab = function (o, flag) {
  45. //当前的left
  46. var displayWidth = Number(tab.css('left').replace('px', ''));
  47. !displayWidth ? displayWidth = 0 : null;
  48. //显示第几个LI
  49. var displayNum = 0;
  50. var DW = 0;
  51. var left = 0;
  52. if (flag && displayWidth == 0) {
  53. return;
  54. }
  55. if (flag) {
  56. displayLINum--;
  57. left = displayWidth + tab.find('li').eq(displayLINum).width();
  58. left > 0 ? left = 0 : null;
  59. } else {
  60. var _rigth = $(".tab ul").width() - parseInt(tab.offset().left) * -1 - cfg.tabcontentWidth - 82;
  61. var _step = tab.find('li').eq(displayLINum).width();
  62. if (_rigth > 0) {
  63. if (_rigth < _step) {
  64. _step = _rigth;
  65. }
  66. } else {
  67. return;
  68. }
  69. left = displayWidth - _step;
  70. displayLINum++;
  71. }
  72. if (left == 0) {
  73. tab.animate({ 'left': parseInt(-19) });
  74. } else {
  75. tab.animate({ 'left': parseInt(left) });
  76. }
  77. }
  78. function removeTab(item) {
  79. tab.find("#" + item.id).parents('li').remove();
  80. tabContent.find('#iframe' + item.id).remove();
  81. }
  82. function addTab(item) {
  83. if (item == null) {
  84. return false;
  85. }
  86. if (item.replace == true) {
  87. removeTab(item);
  88. }
  89. if (tab.find("#" + item.id).length == 0) {
  90. Loading(true);
  91. var innerString = tabTemplate.replace("{0}", item.id).replace("{1}", item.title).replace("{2}", item.icon).replace("{3}", item.dataValue);
  92. var liObj = $('<li class="off"></li>');
  93. liObj.append(innerString).appendTo(tab.find('ul')).find('table td:eq(1)').click(function () {
  94. liObj.Contextmenu();
  95. //判断当前是不是处于激活状态
  96. if (liObj.hasClass(cfg.tabClassOn)) return;
  97. var activeLi = liObj.parent().find('li.' + cfg.tabClassOn);
  98. activeLi.removeClass().addClass(cfg.tabClassOff);
  99. $(this).next().find('div').removeClass().addClass(cfg.tabClassClose);
  100. liObj.removeClass().addClass(cfg.tabClassOn);
  101. tabContent.find('iframe').hide().removeClass(cfg.tabClassOn);
  102. tabContent.find('#iframe' + liObj.find('table').attr('id')).show().addClass(cfg.tabClassOn);
  103. cfg.currentEvent(liObj.find('.inner').attr('data-value'));
  104. })
  105. if (item.url) {
  106. var $iframe = $("<iframe class=\"LRADMS_iframe\" id=\"iframe" + item.id + "\" height=\"100%\" width=\"100%\" src=\"" + item.url + "\" frameBorder=\"0\"></iframe>")
  107. tabContent.append($iframe);
  108. $iframe.load(function () {
  109. window.setTimeout(function () {
  110. Loading(false);
  111. }, 200);
  112. });
  113. }
  114. if (item.closed) {
  115. liObj.find('td:eq(2)').find('div').click(function () {
  116. var li_index = tab.find('li').length;
  117. removeTab(item);
  118. tab.find('li:eq(' + (li_index - 2) + ')').find('table td:eq(1)').trigger("click");
  119. }).hover(function () {
  120. if (liObj.hasClass(cfg.tabClassOn)) return;
  121. $(this).removeClass().addClass(cfg.tabClassClose);
  122. }, function () {
  123. if (liObj.hasClass(cfg.tabClassOn)) return;
  124. $(this).addClass(cfg.tabClassClose + '_noselected');
  125. });
  126. }
  127. else {
  128. liObj.find('td:eq(2)').html('');
  129. }
  130. tab.find('li:eq(' + (tab.find('li').length - 1) + ')').find('table td:eq(1)').trigger("click");
  131. cfg.addEvent(item);
  132. } else {
  133. tab.find('li').removeClass('on').addClass('off');
  134. tab.find("#" + item.id).parent().removeClass('off').addClass('on');
  135. tabContent.find('iframe').hide().removeClass('on');
  136. tabContent.find('#iframe' + item.id).show().addClass('on');
  137. }
  138. }
  139. function newTab(item) {
  140. if ($(".tab ul>li").length >= 10) {
  141. dialogAlert("为保证系统效率,只允许同时运行10个功能窗口,请关闭一些窗口后重试!", 0)
  142. return false;
  143. }
  144. if (item.moduleIdCookie == true) {
  145. top.$.cookie('currentmoduleId', item.id, { path: "/" });
  146. item.dataValue = item.id;
  147. }
  148. else {
  149. item.dataValue = top.$.cookie('currentmoduleId');
  150. }
  151. addTab(item);
  152. var nW = $(".tab ul").width() - 4;
  153. if (nW > cfg.width) {
  154. if (!cfg.tabScroll) {
  155. cfg.tabScroll = true;
  156. scrollLeft = $('<div class="' + cfg.tabClassScrollLeft + '"><i></i></div>').click(function () {
  157. scrollTab(scrollLeft, true);
  158. });
  159. srcollRight = $('<div class="' + cfg.tabClassScrollRight + '"><i></i></div>').click(function () {
  160. scrollTab(srcollRight, false);
  161. });
  162. cW -= cfg.tabScrollWidth * 2;
  163. tabContenter.width(cW);
  164. scrollLeft.insertBefore(tabContenter);
  165. srcollRight.insertBefore(tabContenter);
  166. }
  167. var _left = cfg.width - nW;
  168. tab.animate({ 'left': _left - 43 });
  169. displaylicount = tab.find('li').length;
  170. }
  171. }
  172. $.each(cfg.items, function (i, item) {
  173. addTab(item);
  174. });
  175. var scrollLeft, srcollRight;
  176. if (cfg.tabScroll) {
  177. scrollLeft = $('<div class="' + cfg.tabClassScrollLeft + '"><i></i></div>').click(function () {
  178. scrollTab($(this), true);
  179. });
  180. srcollRight = $('<div class="' + cfg.tabClassScrollRight + '"><i></i></div>').click(function () {
  181. scrollTab($(this), false);
  182. });
  183. cfg.width -= cfg.tabScrollWidth * 2;
  184. }
  185. var container = $('<div />').css({
  186. 'position': 'relative',
  187. 'width': cfg.width,
  188. 'height': cfg.tabHeight
  189. }).append(scrollLeft).append(srcollRight).addClass(cfg.tabClassDiv);
  190. var tabContenter = $('<div />').css({
  191. 'width': cfg.width,
  192. 'height': cfg.tabHeight,
  193. 'float': 'left'
  194. }).append(tab);
  195. var obj = $(this).append(tabH).append(container.append(tabContenter)).append(tabContent);
  196. $(window).resize(function () {
  197. cfg.width = $(window).width() - 100;
  198. cfg.height = $(window).height() - 56;
  199. cfg.tabcontentWidth = $(window).width() - 80;
  200. container.width(cfg.width);
  201. tabContent.width(cfg.tabcontentWidth).height(cfg.height - cfg.tabHeight);
  202. });
  203. //点击第一
  204. tab.find('li:first td:eq(1)').click();
  205. return obj.extend({ 'addTab': addTab, 'newTab': newTab });
  206. };
  207. //初始化导航
  208. var tablist;
  209. loadnav = function () {
  210. var navJson = {};
  211. tablist = $("#tab_list_add").Tab({
  212. items: [
  213. { id: 'desktop', title: '欢迎首页', closed: false, icon: 'fa fa fa-desktop', url: contentPath + '/Home/AdminDefaultDesktop' },
  214. ],
  215. tabScroll: false,
  216. width: $(window).width() - 100,
  217. height: $(window).height() - 56,
  218. tabcontentWidth: $(window).width() - 80,
  219. addEvent: function (item) {
  220. if (item.closed && item.isNoLog != true) {
  221. $.ajax({
  222. url: contentPath + "/Home/VisitModule",
  223. data: { moduleId: item.id, moduleName: item.title, moduleUrl: item.url },
  224. type: "post",
  225. dataType: "text"
  226. });
  227. }
  228. },
  229. currentEvent: function (moduleId) {
  230. top.$.cookie('currentmoduleId', moduleId, { path: "/" });
  231. }
  232. });
  233. $("#GoToHome").click(function () { tablist.newTab({ id: "desktop", title: "欢迎首页", closed: !1, icon: "fa fa fa-desktop", url: contentPath + "/Home/AdminDefaultDesktop" }) });
  234. $("#Voice").click(function () {
  235. tablist.newTab({ id: "Voice", title: "通知公共", closed: true, icon: "fa fa-volume-up", url: contentPath + "/PublicInfoManage/Notice/Index" });
  236. });
  237. //个人中心
  238. $("#UserSetting").click(function () {
  239. tablist.newTab({ id: "UserSetting", title: "个人中心", closed: true, icon: "fa fa fa-user", url: contentPath + "/PersonCenter/Index" });
  240. });
  241. //动态加载导航菜单
  242. var _html = "";
  243. var index = 0;
  244. $.each(authorizeMenuData, function (i) {
  245. var row = authorizeMenuData[i];
  246. if (row.ParentId == '0') {
  247. index++;
  248. _html += '<li class="item">';
  249. _html += ' <a id=' + row.ModuleId + ' href="javascript:void(0);" class="main-nav">';
  250. _html += ' <div class="main-nav-icon"><i class="fa ' + row.Icon + '"></i></div>';
  251. _html += ' <div class="main-nav-text">' + row.FullName + '</div>';
  252. _html += ' <span class="arrow"></span>';
  253. _html += ' </a>';
  254. _html += getsubnav(row.ModuleId);
  255. _html += '</li>';
  256. navJson[row.ModuleId] = row;
  257. }
  258. });
  259. $("#nav").append(_html);
  260. $('#nav li a').click(function () {
  261. var id = $(this).attr('id');
  262. var data = navJson[id];
  263. if (data.Target == "iframe") {
  264. tablist.newTab({ moduleIdCookie: true, id: id, title: data.FullName, closed: true, icon: data.Icon, url: contentPath + data.UrlAddress });
  265. }
  266. })
  267. $("#nav li.item").hover(function (e) {
  268. var $sub = $(this).find('.sub-nav-wrap');
  269. var length = $sub.find('.sub-nav').find('li').length;
  270. if (length > 0) {
  271. $(this).addClass('on');
  272. $sub.show();
  273. var sub_top = $sub.offset().top + $sub.height();
  274. var body_height = $(window).height();
  275. if (sub_top > body_height) {
  276. $sub.css('bottom', '0px');
  277. }
  278. }
  279. }, function (e) {
  280. $(this).removeClass('on');
  281. $(this).find('.sub-nav-wrap').hide();
  282. });
  283. $("#nav li.sub").hover(function (e) {
  284. var $ul = $(this).find('ul');
  285. $ul.show();
  286. var top = $(this).find('ul').offset().top;
  287. var height = $ul.height();
  288. var wheight = $(window).height();
  289. if (top + height > wheight) {
  290. $ul.css('top', parseInt('-' + (height - 11))).css('left', '130px')
  291. } else {
  292. $ul.css('top', '0px').css('left', '130px');
  293. }
  294. }, function (e) {
  295. $(this).find('ul').hide();
  296. $(this).find('ul').css('top', '0px');
  297. });
  298. //导航二菜单
  299. function getsubnav(moduleId) {
  300. var _html = '<div class="sub-nav-wrap">';
  301. _html += '<ul class="sub-nav">';
  302. $.each(authorizeMenuData, function (i) {
  303. var row = authorizeMenuData[i];
  304. if (row.ParentId == moduleId) {
  305. if (isbelowmenu(row.ModuleId) == 0) {
  306. _html += '<li><a id=' + row.ModuleId + '><i class="fa ' + row.Icon + '"></i>' + row.FullName + '</a></li>';
  307. } else {
  308. _html += '<li class="sub" title=' + (row.Description == null ? "" : row.Description) + '><a id=' + row.ModuleId + '><i class="fa ' + row.Icon + '"></i>' + row.FullName + '</a>';
  309. _html += getchildnav(row.ModuleId);
  310. _html += '</li>'; //sub
  311. }
  312. navJson[row.ModuleId] = row;
  313. }
  314. });
  315. _html += '</ul>';
  316. _html += '</div>';
  317. return _html;
  318. }
  319. //导航三菜单
  320. function getchildnav(moduleId) {
  321. var _html = '<div class="sub-child"><ul>';
  322. $.each(authorizeMenuData, function (i) {
  323. var row = authorizeMenuData[i];
  324. if (row.ParentId == moduleId) {
  325. _html += '<li title=' + (row.Description == null ? "" : row.Description) + '><a id=' + row.ModuleId + '><i class="fa ' + row.Icon + '"></i>' + row.FullName + '</a></li>';
  326. navJson[row.ModuleId] = row;
  327. }
  328. });
  329. _html += '</ul></div>';
  330. return _html;
  331. }
  332. //判断是否有子节点
  333. function isbelowmenu(moduleId) {
  334. var count = 0;
  335. $.each(authorizeMenuData, function (i) {
  336. if (authorizeMenuData[i].ParentId == moduleId) {
  337. count++;
  338. return false;
  339. }
  340. });
  341. return count;
  342. }
  343. }
  344. //安全退出
  345. function IndexOut() {
  346. dialogConfirm("注:您确定要安全退出本次登录吗?", function (r) {
  347. if (r) {
  348. Loading(true, "正在安全退出...");
  349. window.setTimeout(function () {
  350. $.ajax({
  351. url: contentPath + "/Login/OutLogin",
  352. type: "post",
  353. dataType: "json",
  354. success: function (data) {
  355. window.location.href = contentPath + "/Login/Index";
  356. }
  357. });
  358. }, 500);
  359. }
  360. });
  361. }
  362. //移除Tab
  363. $.removeTab = function (type) {
  364. var Id = tabiframeId();
  365. var $tab = $(".tab-div");
  366. var $tabContent = $(".tab-div-content");
  367. switch (type) {
  368. case "reloadCurrent":
  369. $.currentIframe().reload();
  370. break;
  371. case "closeCurrent":
  372. remove(Id);
  373. break;
  374. case "closeAll":
  375. $tab.find("div.tab_close").each(function () {
  376. var id = $(this).parents('.inner').attr('id');
  377. remove(id);
  378. });
  379. break;
  380. case "closeOther":
  381. $tab.find("div.tab_close").each(function () {
  382. var id = $(this).parents('.inner').attr('id');
  383. if (Id != id) {
  384. remove(id);
  385. }
  386. });
  387. break;
  388. default:
  389. break;
  390. }
  391. function remove(id) {
  392. var li_index = $tab.find('li').length;
  393. $tab.find("#" + id).parents('li').remove();
  394. $tabContent.find('#iframe' + id).remove();
  395. $tab.find('li:eq(' + (li_index - 2) + ')').find('table td:eq(1)').trigger("click");
  396. }
  397. }