bodyTab.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /*
  2. @Author:
  3. @Time: 2017-04
  4. @Tittle: tab
  5. @Description: 点击对应按钮添加新窗口
  6. */
  7. var tabFilter,menu=[],liIndex,curNav,delMenu;
  8. layui.define(["element","jquery"],function(exports){
  9. var element = layui.element(),
  10. $ = layui.jquery,
  11. layId,
  12. Tab = function(){
  13. this.tabConfig = {
  14. closed : true,
  15. openTabNum : 10,
  16. tabFilter : "bodyTab"
  17. }
  18. };
  19. //显示左侧菜单
  20. if($(".navBar").html() == ''){
  21. var _this = this;
  22. $(".navBar").html(navBar(navs)).height($(window).height()-230);
  23. element.init(); //初始化页面元素
  24. $(window).resize(function(){
  25. $(".navBar").height($(window).height()-230);
  26. })
  27. }
  28. //参数设置
  29. Tab.prototype.set = function(option) {
  30. var _this = this;
  31. $.extend(true, _this.tabConfig, option);
  32. return _this;
  33. };
  34. //通过title获取lay-id
  35. Tab.prototype.getLayId = function(title){
  36. $(".layui-tab-title.top_tab li").each(function(){
  37. if($(this).find("cite").text() == title){
  38. layId = $(this).attr("lay-id");
  39. }
  40. })
  41. return layId;
  42. }
  43. //通过title判断tab是否存在
  44. Tab.prototype.hasTab = function(title){
  45. var tabIndex = -1;
  46. $(".layui-tab-title.top_tab li").each(function(){
  47. if($(this).find("cite").text() == title){
  48. tabIndex = 1;
  49. }
  50. })
  51. return tabIndex;
  52. }
  53. //右侧内容tab操作
  54. var tabIdIndex = 0;
  55. Tab.prototype.tabAdd = function (_this) {
  56. if(window.sessionStorage.getItem("menu")){
  57. menu = JSON.parse(window.sessionStorage.getItem("menu"));
  58. }
  59. var that = this;
  60. var closed = that.tabConfig.closed,
  61. openTabNum = that.tabConfig.openTabNum;
  62. tabFilter = that.tabConfig.tabFilter;
  63. // $(".layui-nav .layui-nav-item a").on("click",function(){
  64. if(_this.find("i.iconfont,i.layui-icon").attr("data-icon") != undefined){
  65. var title = '';
  66. if(that.hasTab(_this.find("cite").text()) == -1 && _this.siblings("dl.layui-nav-child").length == 0){
  67. if($(".layui-tab-title.top_tab li").length == openTabNum){
  68. layer.msg('只能同时打开'+openTabNum+'个选项卡哦。不然系统会卡的!');
  69. return;
  70. }
  71. tabIdIndex++;
  72. if(_this.find("i.iconfont").attr("data-icon") != undefined){
  73. title += '<i class="iconfont '+_this.find("i.iconfont").attr("data-icon")+'"></i>';
  74. }else{
  75. title += '<i class="layui-icon">'+_this.find("i.layui-icon").attr("data-icon")+'</i>';
  76. }
  77. title += '<cite>'+_this.find("cite").text()+'</cite>';
  78. title += '<i class="layui-icon layui-unselect layui-tab-close" data-id="'+tabIdIndex+'">&#x1006;</i>';
  79. element.tabAdd(tabFilter, {
  80. title : title,
  81. content :"<iframe src='"+_this.attr("data-url")+"' data-id='"+tabIdIndex+"'></frame>",
  82. id : new Date().getTime()
  83. })
  84. //当前窗口内容
  85. var curmenu = {
  86. "icon" : _this.find("i.iconfont").attr("data-icon")!=undefined ? _this.find("i.iconfont").attr("data-icon") : _this.find("i.layui-icon").attr("data-icon"),
  87. "title" : _this.find("cite").text(),
  88. "href" : _this.attr("data-url"),
  89. "layId" : new Date().getTime()
  90. }
  91. menu.push(curmenu);
  92. window.sessionStorage.setItem("menu",JSON.stringify(menu)); //打开的窗口
  93. window.sessionStorage.setItem("curmenu",JSON.stringify(curmenu)); //当前的窗口
  94. element.tabChange(tabFilter, that.getLayId(_this.find("cite").text()));
  95. }else{
  96. //当前窗口内容
  97. var curmenu = {
  98. "icon" : _this.find("i.iconfont").attr("data-icon")!=undefined ? _this.find("i.iconfont").attr("data-icon") : _this.find("i.layui-icon").attr("data-icon"),
  99. "title" : _this.find("cite").text(),
  100. "href" : _this.attr("data-url"),
  101. "layId" : new Date().getTime()
  102. }
  103. window.sessionStorage.setItem("curmenu",JSON.stringify(curmenu)); //当前的窗口
  104. element.tabChange(tabFilter, that.getLayId(_this.find("cite").text()));
  105. }
  106. }
  107. // })
  108. }
  109. $("body").on("click",".top_tab li",function(){
  110. //切换后获取当前窗口的内容
  111. var curmenu = '';
  112. var menu = JSON.parse(window.sessionStorage.getItem("menu"));
  113. curmenu = menu[$(this).index()-1];
  114. if($(this).index() == 0){
  115. window.sessionStorage.setItem("curmenu",'');
  116. }else{
  117. window.sessionStorage.setItem("curmenu",JSON.stringify(curmenu));
  118. if(window.sessionStorage.getItem("curmenu") == "undefined"){
  119. //如果删除的不是当前选中的tab,则将curmenu设置成当前选中的tab
  120. if(curNav != JSON.stringify(delMenu)){
  121. window.sessionStorage.setItem("curmenu",curNav);
  122. }else{
  123. window.sessionStorage.setItem("curmenu",JSON.stringify(menu[liIndex-1]));
  124. }
  125. }
  126. }
  127. element.tabChange(tabFilter,$(this).attr("lay-id")).init();
  128. })
  129. //删除tab
  130. $("body").on("click",".top_tab li i.layui-tab-close",function(){
  131. //删除tab后重置session中的menu和curmenu
  132. liIndex = $(this).parent("li").index();
  133. var menu = JSON.parse(window.sessionStorage.getItem("menu"));
  134. //获取被删除元素
  135. delMenu = menu[liIndex-1];
  136. var curmenu = window.sessionStorage.getItem("curmenu")=="undefined" ? "undefined" : window.sessionStorage.getItem("curmenu")=="" ? '' : JSON.parse(window.sessionStorage.getItem("curmenu"));
  137. if(JSON.stringify(curmenu) != JSON.stringify(menu[liIndex-1])){ //如果删除的不是当前选中的tab
  138. // window.sessionStorage.setItem("curmenu",JSON.stringify(curmenu));
  139. curNav = JSON.stringify(curmenu);
  140. }else{
  141. if($(this).parent("li").length > liIndex){
  142. window.sessionStorage.setItem("curmenu",curmenu);
  143. curNav = curmenu;
  144. }else{
  145. window.sessionStorage.setItem("curmenu",JSON.stringify(menu[liIndex-1]));
  146. curNav = JSON.stringify(menu[liIndex-1]);
  147. }
  148. }
  149. menu.splice((liIndex-1), 1);
  150. window.sessionStorage.setItem("menu",JSON.stringify(menu));
  151. element.tabDelete("bodyTab",$(this).parent("li").attr("lay-id")).init();
  152. })
  153. var bodyTab = new Tab();
  154. exports("bodyTab",function(option){
  155. return bodyTab.set(option);
  156. });
  157. })