/** * http://git.oschina.net/hbbcs/bootStrap-addTabs * Created by joe on 2015-12-19. */ $.fn.addtabs = function (options) { var obj = $(this); options = $.extend({ content: '', //直接指定所有页面TABS内容 close: true, //是否可以关闭 monitor: 'body', //监视的区域 nav: '.nav-addtabs', tab: '.tab-addtabs', iframeUse: true, //使用iframe还是ajax iframeHeight: $(window).height() - 50, //固定TAB中IFRAME高度,根据需要自己修改 iframeForceRefresh: false, //点击后强制刷新对应的iframe callback: function () { //关闭后回调函数 } }, options || {}); var navobj = $(options.nav); var tabobj = $(options.tab); if (history.pushState) { //浏览器前进后退事件 $(window).on("popstate", function (e) { var state = e.originalEvent.state; if (state) { $("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click"); } }); } $(options.monitor).on('click', '[addtabs]', function (e) { if ($(this).attr('url').indexOf("javascript:") !== 0) { if ($(this).is("a")) { e.preventDefault(); } var id = $(this).attr('addtabs'); var title = $(this).attr('title') ? $(this).attr('title') : $.trim($(this).text()); var url = $(this).attr('url'); var content = options.content ? options.content : $(this).attr('content'); var ajax = $(this).attr('ajax') ? true : false; var state = ({ url: url, title: title, id: id, content: content, ajax: ajax }); document.title = title; if (history.pushState && !$(this).data("pushstate")) { var pushurl = url.indexOf("ref=addtabs") == -1 ? (url + (url.indexOf("?") > -1 ? "&" : "?") + "ref=addtabs") : url; try { window.history.pushState(state, title, pushurl); }catch(e){ } } $(this).data("pushstate", null); _add.call(this, { id: id, title: $(this).attr('title') ? $(this).attr('title') : $(this).html(), content: content, url: url, ajax: ajax }); } }); navobj.on('click', '.close-tab', function (e) { id = $(this).prev("a").attr("aria-controls"); _close(id); return false; }); navobj.on('dblclick', 'li[role=presentation]', function (e) { $(this).find(".close-tab").trigger("click"); }); navobj.on('click', 'li[role=presentation]', function (e) { $("a[addtabs=" + $("a", this).attr("node-id") + "]").trigger("click"); }); $(window).resize(function () { $("#nav").width($("#header > .navbar").width() - $(".sidebar-toggle").outerWidth() - $(".navbar-custom-menu").outerWidth() - 20); _drop(); }); _add = function (opts) { var id, tabid, conid, url; id = opts.id; tabid = 'tab_' + opts.id; conid = 'con_' + opts.id; url = opts.url; url += (opts.url.indexOf("?") > -1 ? "&addtabs=1" : "?addtabs=1"); navobj.find("[role='presentation']").removeClass('active'); tabobj.find("[role='tabpanel']").removeClass('active'); //如果TAB不存在,创建一个新的TAB if ($("#" + tabid).size() == 0) { //创建新TAB的title title = $(''); //是否允许关闭 if (options.close && $("li", navobj).size() > 0) { title.append(' '); } //创建新TAB的内容 content = $('
'); //是否指定TAB内容 if (opts.content) { content.append(opts.content); } else if (options.iframeUse && !opts.ajax) {//没有内容,使用IFRAME打开链接 var height = options.iframeHeight; content.append(''); } else { $.get(url, function (data) { content.append(data); }); } //加入TABS if ($('.tabdrop li').size() > 0) { $('.tabdrop ul').append(title); } else { navobj.append(title); } tabobj.append(content); } else { //强制刷新iframe if (options.iframeForceRefresh) { $("#" + conid + " iframe").attr('src', function (i, val) { return val; }); } } localStorage.setItem("addtabs", $(this).prop('outerHTML')); //激活TAB $("#" + tabid).addClass('active'); $("#" + conid).addClass("active"); _drop(); }; _close = function (id) { var tabid = 'tab_' + id; var conid = 'con_' + id; //如果关闭的是当前激活的TAB,激活他的前一个TAB if (obj.find("li.active").not('.tabdrop').attr('id') == tabid) { if ($("#" + tabid).prev().not(".tabdrop").size() > 0) { $("#" + tabid).prev().not(".tabdrop").find("a").trigger("click"); } else if ($("#" + tabid).next().size() > 0) { $("#" + tabid).next().trigger("click"); } else { $(">li:last > a", navobj).trigger('click'); } } //关闭TAB $("#" + tabid).remove(); $("#" + conid).remove(); _drop(); options.callback(); }; _drop = function () { //创建下拉标签 var dropdown = $(''); //检测是否已增加 if (!$('.tabdrop').html()) { dropdown.prependTo(navobj); } else { dropdown = navobj.find('.tabdrop'); } //检测是否有下拉样式 if (navobj.parent().is('.tabs-below')) { dropdown.addClass('dropup'); } var collection = 0; var maxwidth = navobj.width() - 60; var liwidth = 0; //检查超过一行的标签页 var litabs = navobj.append(dropdown.find('li')).find('>li').not('.tabdrop'); var lisize = litabs.size(); litabs.each(function (i, j) { liwidth += $(this).width(); if (collection == 0 && i == lisize - 1 && liwidth <= navobj.width()) { return true; } if (liwidth > maxwidth) { dropdown.find('ul').append($(this)); collection++; } }); //如果有超出的,显示下拉标签 if (collection > 0) { dropdown.removeClass('hide'); if (dropdown.find('.active').length == 1) { dropdown.addClass('active'); } else { dropdown.removeClass('active'); } } else { dropdown.addClass('hide'); } }; };