bootstrap-tab.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. var addTabs = function (options) {
  2. //var rand = Math.random().toString();
  3. //var id = rand.substring(rand.indexOf('.') + 1);
  4. //var url = window.location.protocol + '//' + window.location.host;
  5. //options.url = url + options.url;
  6. id = "tab_" + options.id;
  7. $(".active").removeClass("active");
  8. //如果TAB不存在,创建一个新的TAB
  9. if (!$("#" + id)[0]) {
  10. //固定TAB中IFRAME高度
  11. //mainHeight = $(document.body).height();
  12. mainHeight = document.documentElement.clientHeight;
  13. //创建新TAB的title
  14. title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + options.title;
  15. //是否允许关闭
  16. if (options.close) {
  17. title += ' <i class="glyphicon glyphicon-remove" tabclose="' + id + '"></i>';
  18. }
  19. title += '</a></li>';
  20. //是否指定TAB内容
  21. if (options.content) {
  22. content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>';
  23. } else {//没有内容,使用IFRAME打开链接
  24. content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe src="' + options.url + '" width="100%" height="' + mainHeight +
  25. '" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>';
  26. }
  27. //加入TABS
  28. $(".nav-tabs").append(title);
  29. $(".tab-content").append(content);
  30. }
  31. //激活TAB
  32. $("#tab_" + id).addClass('active');
  33. $("#" + id).addClass("active");
  34. var last = $("#tabs>ul>li:last");
  35. /*$(".contextMenuPlugin").mouseout(function(){
  36. $(".contextMenuPlugin").remove();
  37. })
  38. $(".contextMenuPlugin").mouseup(function(){
  39. alert("aaa");
  40. })*/
  41. last.contextPopup({
  42. title: '菜单',
  43. items: [
  44. {
  45. label:'刷新缓存',icon:'plug-in/diy/icons/shopping-basket.png',action:function(){
  46. //last就是当前选中的元素
  47. var tab = last.children("a").attr("aria-controls").toString();
  48. //$("#tabs").find("li[aria-controls='"+tab+"']").remove();
  49. var div = $("#tabs").find("div[id='"+tab+"']");
  50. div.find("iframe").attr("src",options.url);
  51. //tabs.tabs("refresh");
  52. }
  53. },
  54. {
  55. label:'关闭',icon:'plug-in/diy/icons/shopping-basket.png',action:function(){
  56. //last就是当前选中的元素
  57. var closeText = last.children("a").text().trim();
  58. var nowText = $("#tabs").find("li[class='active']").children("a").text().trim();
  59. if(closeText==nowText){
  60. //关闭的是当前页的时候,显示前一页,如果没有前一页了,就提示
  61. var prevCount = last.prevAll().size();
  62. if(prevCount==0){
  63. var tab = last.children("a").attr("aria-controls").toString();
  64. last.remove();
  65. $("#tabs").find("div[id='"+tab+"']").remove();
  66. }else{
  67. //显示前一个tab
  68. var tab = last.children("a").attr("aria-controls").toString();
  69. var prev = last.prevAll().first();
  70. last.remove();
  71. $("#tabs").find("div[id='"+tab+"']").remove();
  72. prev.addClass("active");
  73. var id = prev.children("a").attr("aria-controls").toString();
  74. $("#tabs").find("div[id='"+id+"']").addClass("active");
  75. }
  76. }else{
  77. //关闭的不是当前页,关闭就好了╮(╯_╰)╭
  78. var tab = last.children("a").attr("aria-controls").toString();
  79. last.remove();
  80. $("#tabs").find("div[id='"+tab+"']").remove();
  81. }
  82. }
  83. },
  84. {
  85. label:'全部关闭',icon:'plug-in/diy/icons/shopping-basket.png',action:function(){
  86. $("#tabs>ul>li").remove();
  87. $("#tabs>div>div").remove();
  88. //tabs.tabs("refresh");
  89. }
  90. },
  91. {
  92. label:'除此之外全部关闭',icon:'plug-in/diy/icons/shopping-basket.png',action:function(){
  93. var closeText = last.children("a").text().trim();
  94. var nowText = $("#tabs").find("li[class='active']").children("a").text().trim();
  95. //此是当前页则关闭,如果不是当前页面,要激活选择页面
  96. if(closeText==nowText){
  97. //此是当前页面
  98. var tab = last.children("a").attr("aria-controls").toString();
  99. $("#tabs>ul>li").not(last).remove();
  100. $("#tabs>div>div").not($("#tabs").find("div[id='"+tab+"']")).remove();
  101. }else{
  102. var tab = last.children("a").attr("aria-controls").toString();
  103. $("#tabs>ul>li").not(last).remove();
  104. $("#tabs>div>div").not($("#tabs").find("div[id='"+tab+"']")).remove();
  105. last.addClass("active");
  106. var id = last.children("a").attr("aria-controls").toString();
  107. $("#tabs").find("div[id='"+id+"']").addClass("active");
  108. }
  109. //tabs.tabs("refresh");
  110. }
  111. },
  112. null,
  113. {
  114. label:'当前页右侧全部关闭',icon:'plug-in/diy/icons/shopping-basket.png',action:function(){
  115. var closeText = last.children("a").text().trim();
  116. var nowText = $("#tabs").find("li[class='active']").children("a").text().trim();
  117. if(closeText==nowText){
  118. //当前页面
  119. var nextAll = last.nextAll();
  120. if(nextAll.length!=0){
  121. nextAll.remove();
  122. var tab = last.children("a").attr("aria-controls").toString();
  123. //$("#tabs>ul>li").not(shouye).remove();
  124. $("#tabs>div").find("div[id='"+tab+"']").nextAll().remove();
  125. //tabs.tabs("refresh");
  126. }else{
  127. layer.msg('<b>右侧没有啦</b>');
  128. }
  129. }else{
  130. //不是当前页,当前页的active去掉
  131. var now = $("#tabs").find("li[class='active']");
  132. var nowid = now.children("a").attr("aria-controls").toString();
  133. now.removeClass("active");
  134. $("#tabs").find("div[id='"+nowid+"']").removeClass("active");
  135. var nextAll = last.nextAll();
  136. if(nextAll.length!=0){
  137. nextAll.remove();
  138. var tab = last.children("a").attr("aria-controls").toString();
  139. //$("#tabs>ul>li").not(shouye).remove();
  140. $("#tabs>div").find("div[id='"+tab+"']").nextAll().remove();
  141. last.addClass("active");
  142. var id = last.children("a").attr("aria-controls").toString();
  143. $("#tabs").find("div[id='"+id+"']").addClass("active");
  144. //tabs.tabs("refresh");
  145. }else{
  146. layer.msg('<b>右侧没有啦</b>');
  147. }
  148. }
  149. }
  150. },
  151. {
  152. label:'当前页左侧全部关闭',icon:'plug-in/diy/icons/shopping-basket.png',action:function(){
  153. var closeText = last.children("a").text().trim();
  154. var nowText = $("#tabs").find("li[class='active']").children("a").text().trim();
  155. if(closeText==nowText){
  156. //当前页面
  157. var prevAll = last.prevAll();
  158. if(prevAll.length!=0){
  159. prevAll.remove();
  160. var tab = last.children("a").attr("aria-controls").toString();
  161. //$("#tabs>ul>li").not(shouye).remove();
  162. $("#tabs>div").find("div[id='"+tab+"']").prevAll().remove();
  163. //tabs.tabs("refresh");
  164. }else{
  165. layer.msg('<b>左侧没有啦</b>');
  166. }
  167. }else{
  168. //不是当前页,当前页的active去掉
  169. var now = $("#tabs").find("li[class='active']");
  170. var nowid = now.children("a").attr("aria-controls").toString();
  171. now.removeClass("active");
  172. $("#tabs").find("div[id='"+nowid+"']").removeClass("active");
  173. var prevAll = last.prevAll();
  174. if(prevAll.length!=0){
  175. prevAll.remove();
  176. var tab = last.children("a").attr("aria-controls").toString();
  177. //$("#tabs>ul>li").not(shouye).remove();
  178. $("#tabs>div").find("div[id='"+tab+"']").prevAll().remove();
  179. last.addClass("active");
  180. var id = last.children("a").attr("aria-controls").toString();
  181. $("#tabs").find("div[id='"+id+"']").addClass("active");
  182. //tabs.tabs("refresh");
  183. }else{
  184. layer.msg('<b>左侧没有啦</b>');
  185. }
  186. }
  187. /*var prevAll = last.prevAll();
  188. if(prevAll.length!=0){
  189. prevAll.remove();
  190. }else{
  191. layer.msg('<b>左侧没有啦</b>');
  192. }
  193. var tab = last.attr("aria-controls").toString();
  194. //$("#tabs>ul>li").not(shouye).remove();
  195. $("#tabs>div").find("div[id='"+tab+"']").prevAll().remove();*/
  196. //tabs.tabs("refresh");
  197. }
  198. }
  199. ]
  200. });
  201. };
  202. var closeTab = function (id) {
  203. //如果关闭的是当前激活的TAB,激活他的前一个TAB
  204. if ($("li.active").attr('id') == "tab_" + id) {
  205. $("#tab_" + id).prev().addClass('active');
  206. $("#" + id).prev().addClass('active');
  207. }
  208. //关闭TAB
  209. $("#tab_" + id).remove();
  210. $("#" + id).remove();
  211. };
  212. $(function () {
  213. mainHeight = $(document.body).height();
  214. $('.main-left,.main-right').height(mainHeight);
  215. $("[addtabs]").click(function () {
  216. addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true });
  217. });
  218. $(".nav-tabs").on("click", "[tabclose]", function (e) {
  219. id = $(this).attr("tabclose");
  220. closeTab(id);
  221. });
  222. });