1228 lines
48 KiB
JavaScript
1228 lines
48 KiB
JavaScript
|
//Make sure jQuery has been loaded
|
|||
|
|
if (typeof jQuery === "undefined") {
|
|||
|
|
throw new Error("MultiTabs requires jQuery");
|
|||
|
|
}((function ($) {
|
|||
|
|
"use strict";
|
|||
|
|
var NAMESPACE, tabIndex; //variable
|
|||
|
|
var MultiTabs, handler, getTabIndex, isExtUrl, sumDomWidth, trimText, supportStorage; //function
|
|||
|
|
var defaultLayoutTemplates, defaultInit; //default variable
|
|||
|
|
|
|||
|
|
NAMESPACE = '.multitabs'; // namespace for on() function
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* splice namespace for on() function, and bind it
|
|||
|
|
* @param $selector jQuery selector
|
|||
|
|
* @param event event
|
|||
|
|
* @param childSelector child selector (string), same as on() function
|
|||
|
|
* @param fn function
|
|||
|
|
* @param skipNS bool. If true skip splice namespace
|
|||
|
|
*/
|
|||
|
|
handler = function ($selector, event, childSelector, fn, skipNS) {
|
|||
|
|
var ev = skipNS ? event : event.split(' ').join(NAMESPACE + ' ') + NAMESPACE;
|
|||
|
|
$selector.off(ev, childSelector, fn).on(ev, childSelector, fn);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* get index for tab
|
|||
|
|
* @param content content type, for 'main' tab just can be 1
|
|||
|
|
* @param capacity capacity of tab, except 'main' tab
|
|||
|
|
* @returns int return index
|
|||
|
|
*/
|
|||
|
|
getTabIndex = function (content, capacity) {
|
|||
|
|
if (content === 'main') return 0;
|
|||
|
|
capacity = capacity || 8; //capacity of maximum tab quantity, the tab will be cover if more than it
|
|||
|
|
tabIndex = tabIndex || 0;
|
|||
|
|
tabIndex++;
|
|||
|
|
tabIndex = tabIndex % capacity;
|
|||
|
|
return tabIndex;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* trim text, remove the extra space, and trim text with maxLength, add '...' after trim.
|
|||
|
|
* @param text the text need to trim
|
|||
|
|
* @param maxLength max length for text
|
|||
|
|
* @returns {string} return trimed text
|
|||
|
|
*/
|
|||
|
|
trimText = function (text, maxLength) {
|
|||
|
|
maxLength = maxLength || $.fn.multitabs.defaults.navTab.maxTitleLength;
|
|||
|
|
var words = (text + "").split(' ');
|
|||
|
|
var t = '';
|
|||
|
|
for (var i = 0; i < words.length; i++) {
|
|||
|
|
var w = $.trim(words[i]);
|
|||
|
|
t += w ? (w + ' ') : '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (t.length > maxLength) {
|
|||
|
|
t = t.substr(0, maxLength);
|
|||
|
|
t += '...'
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
supportStorage = function (is_cache) {
|
|||
|
|
return !(sessionStorage === undefined) && is_cache;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Calculate the total width
|
|||
|
|
* @param JqueryDomObjList the object list for calculate
|
|||
|
|
* @returns {number} return total object width (int)
|
|||
|
|
*/
|
|||
|
|
sumDomWidth = function (JqueryDomObjList) {
|
|||
|
|
var width = 0;
|
|||
|
|
$(JqueryDomObjList).each(function () {
|
|||
|
|
width += $(this).outerWidth(true)
|
|||
|
|
});
|
|||
|
|
return width
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Judgment is external URL
|
|||
|
|
* @param url URL for judgment
|
|||
|
|
* @returns {boolean} external URL return true, local return false
|
|||
|
|
*/
|
|||
|
|
isExtUrl = function (url) {
|
|||
|
|
var absUrl = (function (url) {
|
|||
|
|
var a = document.createElement('a');
|
|||
|
|
a.href = url;
|
|||
|
|
return a.href;
|
|||
|
|
})(url);
|
|||
|
|
var webRoot = window.location.protocol + '//' + window.location.host + '/';
|
|||
|
|
var urlRoot = absUrl.substr(0, webRoot.length);
|
|||
|
|
return (!(urlRoot === webRoot));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Layout Templates
|
|||
|
|
*/
|
|||
|
|
defaultLayoutTemplates = {
|
|||
|
|
/**
|
|||
|
|
* Main Layout
|
|||
|
|
*/
|
|||
|
|
default: '<div class="mt-wrapper {mainClass}" style="height: 100%;" >' +
|
|||
|
|
'<div class="mt-nav-bar {navClass}" style="background-color: {backgroundColor};">' +
|
|||
|
|
'<div class="mt-nav mt-nav-tools-left">' +
|
|||
|
|
'<ul class="nav {nav-tabs}">' +
|
|||
|
|
'<li class="mt-move-left"><a><i class="mdi mdi-skip-backward"></i></a></li>' +
|
|||
|
|
'</ul>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'<nav class="mt-nav mt-nav-panel">' +
|
|||
|
|
'<ul class="nav {nav-tabs}"></ul>' +
|
|||
|
|
'</nav>' +
|
|||
|
|
'<div class="mt-nav mt-nav-tools-right">' +
|
|||
|
|
'<ul class="nav {nav-tabs}">' +
|
|||
|
|
'<li class="mt-move-right"><a><i class="mdi mdi-skip-forward"></i></a></li>' +
|
|||
|
|
'<li class="mt-dropdown dropdown">' +
|
|||
|
|
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">{dropdown}<span class="caret"></span></a>' +
|
|||
|
|
'<ul role="menu" class="dropdown-menu dropdown-menu-right">' +
|
|||
|
|
'<li class="mt-show-actived-tab"><a>{showActivedTab}</a></li>' +
|
|||
|
|
'<li class="divider"></li>' +
|
|||
|
|
'<li class="mt-close-all-tabs"><a>{closeAllTabs}</a></li>' +
|
|||
|
|
'<li class="mt-close-other-tabs"><a>{closeOtherTabs}</a></li>' +
|
|||
|
|
'</ul>' +
|
|||
|
|
'</li>' +
|
|||
|
|
'</ul>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'<div class="tab-content mt-tab-content " > </div>' +
|
|||
|
|
'</div>',
|
|||
|
|
classic: '<div class="mt-wrapper {mainClass}" style="height: 100%;" >' +
|
|||
|
|
'<div class="mt-nav-bar {navClass}" style="background-color: {backgroundColor};">' +
|
|||
|
|
'<nav class="mt-nav mt-nav-panel">' +
|
|||
|
|
'<ul class="nav {nav-tabs}"> </ul>' +
|
|||
|
|
'</nav>' +
|
|||
|
|
'<div class="mt-nav mt-nav-tools-right">' +
|
|||
|
|
'<ul class="nav {nav-tabs}">' +
|
|||
|
|
'<li class="mt-dropdown dropdown">' +
|
|||
|
|
'<a href="#" class="dropdown-toggle" data-toggle="dropdown">{dropdown}<span class="caret"></span></a>' +
|
|||
|
|
'<ul role="menu" class="mt-hidden-list dropdown-menu dropdown-menu-right"></ul>' +
|
|||
|
|
'</li>' +
|
|||
|
|
'</ul>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'<div class="tab-content mt-tab-content " > </div>' +
|
|||
|
|
'</div>',
|
|||
|
|
simple: '<div class="mt-wrapper {mainClass}" style="height: 100%;" >' +
|
|||
|
|
'<div class="mt-nav-bar {navClass}" style="background-color: {backgroundColor};">' +
|
|||
|
|
'<nav class="mt-nav mt-nav-panel">' +
|
|||
|
|
'<ul class="nav {nav-tabs}"> </ul>' +
|
|||
|
|
'</nav>' +
|
|||
|
|
'</div>' +
|
|||
|
|
'<div class="tab-content mt-tab-content " > </div>' +
|
|||
|
|
'</div>',
|
|||
|
|
navTab: '<a data-id="{navTabId}" class="mt-nav-tab" data-type="{type}" data-index="{index}" data-url="{url}">{title}</a>',
|
|||
|
|
closeBtn: ' <i class="mt-close-tab mdi mdi-close" style="{style}"></i>',
|
|||
|
|
ajaxTabPane: '<div id="{tabPaneId}" class="tab-pane {class}">{content}</div>',
|
|||
|
|
iframeTabPane: '<iframe id="{tabPaneId}" class="tab-pane {class}" width="100%" height="100%" frameborder="0" src="" seamless></iframe>'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Default init page
|
|||
|
|
* @type {*[]}
|
|||
|
|
*/
|
|||
|
|
defaultInit = [{ //default tabs in initial;
|
|||
|
|
type: 'main', //default is info;
|
|||
|
|
title: 'main', //default title;
|
|||
|
|
content: '<h1>Demo page</h1><h2>Welcome to use bootstrap multi-tabs :) </h2>' //default content
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* multitabs constructor
|
|||
|
|
* @param element Primary container
|
|||
|
|
* @param options options
|
|||
|
|
* @constructor
|
|||
|
|
*/
|
|||
|
|
MultiTabs = function (element, options) {
|
|||
|
|
var self = this;
|
|||
|
|
self.$element = $(element);
|
|||
|
|
self._init(options)._listen()._final();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* MultiTabs's function
|
|||
|
|
*/
|
|||
|
|
MultiTabs.prototype = {
|
|||
|
|
/**
|
|||
|
|
* constructor
|
|||
|
|
*/
|
|||
|
|
constructor: MultiTabs,
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* create tab and return this.
|
|||
|
|
* @param obj the obj to trigger multitabs
|
|||
|
|
* @param active if true, active tab after create
|
|||
|
|
* @returns this Chain structure.
|
|||
|
|
*/
|
|||
|
|
create: function (obj, active) {
|
|||
|
|
var options = this.options;
|
|||
|
|
var param, $navTab;
|
|||
|
|
if (!(param = this._getParam(obj))) {
|
|||
|
|
return this; //return multitabs obj when is invaid obj
|
|||
|
|
}
|
|||
|
|
$navTab = this._exist(param);
|
|||
|
|
if ($navTab && !param.refresh) {
|
|||
|
|
this.active($navTab);
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
param.active = !param.active ? active : param.active;
|
|||
|
|
//nav tab create
|
|||
|
|
$navTab = this._createNavTab(param);
|
|||
|
|
//tab-pane create
|
|||
|
|
this._createTabPane(param);
|
|||
|
|
//add tab to storage
|
|||
|
|
this._storage(param.did, param);
|
|||
|
|
if (param.active) {
|
|||
|
|
this.active($navTab);
|
|||
|
|
}
|
|||
|
|
return this;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Create tab pane
|
|||
|
|
* @param param
|
|||
|
|
* @param index
|
|||
|
|
* @returns {*|{}}
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_createTabPane: function (param) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
$el.tabContent.append(self._getTabPaneHtml(param));
|
|||
|
|
return $el.tabContent.find('#' + param.did);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* get tab pane html
|
|||
|
|
* @param param
|
|||
|
|
* @param index
|
|||
|
|
* @returns {string}
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getTabPaneHtml: function (param) {
|
|||
|
|
var self = this,
|
|||
|
|
options = self.options;
|
|||
|
|
if (!param.content && param.iframe) {
|
|||
|
|
return defaultLayoutTemplates.iframeTabPane
|
|||
|
|
.replace('{class}', options.content.iframe.class)
|
|||
|
|
.replace('{tabPaneId}', param.did);
|
|||
|
|
} else {
|
|||
|
|
return defaultLayoutTemplates.ajaxTabPane
|
|||
|
|
.replace('{class}', options.content.ajax.class)
|
|||
|
|
.replace('{tabPaneId}', param.did)
|
|||
|
|
.replace('{content}', param.content);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* create nav tab
|
|||
|
|
* @param param
|
|||
|
|
* @param index
|
|||
|
|
* @returns {*|{}}
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_createNavTab: function (param) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
var navTabHtml = self._getNavTabHtml(param);
|
|||
|
|
var $navTabLi = $el.navPanelList.find('a[data-type="' + param.type + '"][data-index="' + param.index + '"]').parent('li');
|
|||
|
|
if ($navTabLi.length) {
|
|||
|
|
$navTabLi.html(navTabHtml);
|
|||
|
|
self._getTabPane($navTabLi.find('a:first')).remove(); //remove old content pane directly
|
|||
|
|
} else {
|
|||
|
|
$el.navPanelList.append('<li>' + navTabHtml + '</li>');
|
|||
|
|
}
|
|||
|
|
return $el.navPanelList.find('a[data-type="' + param.type + '"][data-index="' + param.index + '"]:first');
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* get nav tab html
|
|||
|
|
* @param param
|
|||
|
|
* @param index
|
|||
|
|
* @returns {string}
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getNavTabHtml: function (param) {
|
|||
|
|
var self = this,
|
|||
|
|
options = self.options;
|
|||
|
|
var closeBtnHtml, display;
|
|||
|
|
|
|||
|
|
display = options.nav.showCloseOnHover ? '' : 'display:inline;';
|
|||
|
|
closeBtnHtml = (param.type === 'main') ? '' : defaultLayoutTemplates.closeBtn.replace('{style}', display); //main content can not colse.
|
|||
|
|
return defaultLayoutTemplates.navTab
|
|||
|
|
.replace('{index}', param.index)
|
|||
|
|
.replace('{navTabId}', param.did)
|
|||
|
|
.replace('{url}', param.url)
|
|||
|
|
.replace('{title}', param.title)
|
|||
|
|
.replace('{type}', param.type) +
|
|||
|
|
closeBtnHtml;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* generate tab pane's id
|
|||
|
|
* @param param
|
|||
|
|
* @param index
|
|||
|
|
* @returns {string}
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_generateId: function (param) {
|
|||
|
|
return 'multitabs_' + param.type + '_' + param.index;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* active navTab
|
|||
|
|
* @param navTab
|
|||
|
|
* @returns self Chain structure.
|
|||
|
|
*/
|
|||
|
|
active: function (navTab) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
var $navTab = self._getNavTab(navTab),
|
|||
|
|
$tabPane = self._getTabPane($navTab),
|
|||
|
|
$prevActivedTab = $el.navPanelList.find('li.active:first a');
|
|||
|
|
var prevNavTabParam = $prevActivedTab.length ? self._getParam($prevActivedTab) : {};
|
|||
|
|
var navTabParam = $navTab.length ? self._getParam($navTab) : {};
|
|||
|
|
//change storage active status
|
|||
|
|
var storage = self._storage();
|
|||
|
|
if (storage[prevNavTabParam.id]) {
|
|||
|
|
storage[prevNavTabParam.id].active = false;
|
|||
|
|
}
|
|||
|
|
if (storage[navTabParam.id]) {
|
|||
|
|
storage[navTabParam.id].active = true;
|
|||
|
|
}
|
|||
|
|
self._resetStorage(storage);
|
|||
|
|
//active navTab and tabPane
|
|||
|
|
$prevActivedTab.parent('li').removeClass('active');
|
|||
|
|
$navTab.parent('li').addClass('active');
|
|||
|
|
self._fixTabPosition($navTab);
|
|||
|
|
self._getTabPane($prevActivedTab).removeClass('active');
|
|||
|
|
$tabPane.addClass('active');
|
|||
|
|
self._fixTabContentLayout($tabPane);
|
|||
|
|
//fill tab pane
|
|||
|
|
self._fillTabPane($tabPane, navTabParam);
|
|||
|
|
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* fill tab pane
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_fillTabPane: function (tabPane, param) {
|
|||
|
|
var self = this,
|
|||
|
|
options = self.options;
|
|||
|
|
var $tabPane = $(tabPane);
|
|||
|
|
//if navTab-pane empty, load content
|
|||
|
|
if (!$tabPane.html()) {
|
|||
|
|
if ($tabPane.is('iframe')) {
|
|||
|
|
if (!$tabPane.attr('src')) {
|
|||
|
|
$tabPane.attr('src', param.url);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
$.ajax({
|
|||
|
|
url: param.url,
|
|||
|
|
dataType: "html",
|
|||
|
|
success: function (callback) {
|
|||
|
|
$tabPane.html(options.content.ajax.success(callback));
|
|||
|
|
},
|
|||
|
|
error: function (callback) {
|
|||
|
|
$tabPane.html(options.content.ajax.error(callback));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* move left
|
|||
|
|
* @return self
|
|||
|
|
*/
|
|||
|
|
moveLeft: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
navPanelListMarginLeft = Math.abs(parseInt($el.navPanelList.css("margin-left"))),
|
|||
|
|
navPanelWidth = $el.navPanel.outerWidth(true),
|
|||
|
|
sumTabsWidth = sumDomWidth($el.navPanelList.children('li')),
|
|||
|
|
leftWidth = 0,
|
|||
|
|
marginLeft = 0,
|
|||
|
|
$navTabLi;
|
|||
|
|
if (sumTabsWidth < navPanelWidth) {
|
|||
|
|
return self
|
|||
|
|
} else {
|
|||
|
|
$navTabLi = $el.navPanelList.children('li:first');
|
|||
|
|
while ((marginLeft + $navTabLi.width()) <= navPanelListMarginLeft) {
|
|||
|
|
marginLeft += $navTabLi.outerWidth(true);
|
|||
|
|
$navTabLi = $navTabLi.next();
|
|||
|
|
}
|
|||
|
|
marginLeft = 0;
|
|||
|
|
if (sumDomWidth($navTabLi.prevAll()) > navPanelWidth) {
|
|||
|
|
while (((marginLeft + $navTabLi.width()) < navPanelWidth) && $navTabLi.length > 0) {
|
|||
|
|
marginLeft += $navTabLi.outerWidth(true);
|
|||
|
|
$navTabLi = $navTabLi.prev();
|
|||
|
|
}
|
|||
|
|
leftWidth = sumDomWidth($navTabLi.prevAll());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$el.navPanelList.animate({
|
|||
|
|
marginLeft: 0 - leftWidth + "px"
|
|||
|
|
}, "fast");
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* move right
|
|||
|
|
* @return self
|
|||
|
|
*/
|
|||
|
|
moveRight: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
navPanelListMarginLeft = Math.abs(parseInt($el.navPanelList.css("margin-left"))),
|
|||
|
|
navPanelWidth = $el.navPanel.outerWidth(true),
|
|||
|
|
sumTabsWidth = sumDomWidth($el.navPanelList.children('li')),
|
|||
|
|
leftWidth = 0,
|
|||
|
|
$navTabLi, marginLeft;
|
|||
|
|
if (sumTabsWidth < navPanelWidth) {
|
|||
|
|
return self;
|
|||
|
|
} else {
|
|||
|
|
$navTabLi = $el.navPanelList.children('li:first');
|
|||
|
|
marginLeft = 0;
|
|||
|
|
while ((marginLeft + $navTabLi.width()) <= navPanelListMarginLeft) {
|
|||
|
|
marginLeft += $navTabLi.outerWidth(true);
|
|||
|
|
$navTabLi = $navTabLi.next();
|
|||
|
|
}
|
|||
|
|
marginLeft = 0;
|
|||
|
|
while (((marginLeft + $navTabLi.width()) < navPanelWidth) && $navTabLi.length > 0) {
|
|||
|
|
marginLeft += $navTabLi.outerWidth(true);
|
|||
|
|
$navTabLi = $navTabLi.next();
|
|||
|
|
}
|
|||
|
|
leftWidth = sumDomWidth($navTabLi.prevAll());
|
|||
|
|
if (leftWidth > 0) {
|
|||
|
|
$el.navPanelList.animate({
|
|||
|
|
marginLeft: 0 - leftWidth + "px"
|
|||
|
|
}, "fast");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* close navTab
|
|||
|
|
* @param navTab
|
|||
|
|
* @return self Chain structure.
|
|||
|
|
*/
|
|||
|
|
close: function (navTab) {
|
|||
|
|
var self = this,
|
|||
|
|
$tabPane;
|
|||
|
|
var $navTab = self._getNavTab(navTab),
|
|||
|
|
$navTabLi = $navTab.parent('li');
|
|||
|
|
$tabPane = self._getTabPane($navTab);
|
|||
|
|
//close unsave tab confirm
|
|||
|
|
if ($navTabLi.length &&
|
|||
|
|
$tabPane.length &&
|
|||
|
|
$tabPane.hasClass('unsave') &&
|
|||
|
|
!self._unsaveConfirm()) {
|
|||
|
|
return self;
|
|||
|
|
}
|
|||
|
|
if ($navTabLi.hasClass("active")) {
|
|||
|
|
var $nextLi = $navTabLi.next("li:first"),
|
|||
|
|
$prevLi = $navTabLi.prev("li:last");
|
|||
|
|
//if ($nextLi.size()) {
|
|||
|
|
if ($nextLi.length) {
|
|||
|
|
self.active($nextLi);
|
|||
|
|
self.activeMenu($nextLi.find('a'));
|
|||
|
|
//} else if ($prevLi.size()) {
|
|||
|
|
} else if ($prevLi.length) {
|
|||
|
|
self.active($prevLi);
|
|||
|
|
self.activeMenu($prevLi.find('a'));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
self._delStorage($navTab.attr('data-id')); //remove tab from session storage
|
|||
|
|
$navTabLi.remove();
|
|||
|
|
$tabPane.remove();
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* close others tab
|
|||
|
|
* @return self Chain structure.
|
|||
|
|
*/
|
|||
|
|
closeOthers: function (retainTab) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
findTab;
|
|||
|
|
|
|||
|
|
if (!retainTab) {
|
|||
|
|
findTab = $el.navPanelList.find('li:not(.active)').find('a:not([data-type="main"])');
|
|||
|
|
} else {
|
|||
|
|
findTab = $el.navPanelList.find('a:not([data-type="main"])').filter(function(index){
|
|||
|
|
if (retainTab != $(this).data('index')) return this;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
findTab.each(function () {
|
|||
|
|
var $navTab = $(this);
|
|||
|
|
self._delStorage($navTab.attr('data-id')); //remove tab from session storage
|
|||
|
|
self._getTabPane($navTab).remove(); //remove tab-content
|
|||
|
|
$navTab.parent('li').remove(); //remove navtab
|
|||
|
|
});
|
|||
|
|
if (retainTab) {
|
|||
|
|
self.active($el.navPanelList.find('a[data-index="' + retainTab + '"]'));
|
|||
|
|
self.activeMenu($el.navPanelList.find('a[data-index="' + retainTab + '"]'));
|
|||
|
|
}
|
|||
|
|
$el.navPanelList.css("margin-left", "0");
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* focus actived tab
|
|||
|
|
* @return self Chain structure.
|
|||
|
|
*/
|
|||
|
|
showActive: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
var navTab = $el.navPanelList.find('li.active:first a');
|
|||
|
|
self._fixTabPosition(navTab);
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* close all tabs, (except main tab)
|
|||
|
|
* @return self Chain structure.
|
|||
|
|
*/
|
|||
|
|
closeAll: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
$el.navPanelList.find('a:not([data-type="main"])').each(function () {
|
|||
|
|
var $navTab = $(this);
|
|||
|
|
self._delStorage($navTab.attr('data-id')); //remove tab from session storage
|
|||
|
|
self._getTabPane($navTab).remove(); //remove tab-content
|
|||
|
|
$navTab.parent('li').remove(); //remove navtab
|
|||
|
|
});
|
|||
|
|
self.active($el.navPanelList.find('a[data-type="main"]:first').parent('li'));
|
|||
|
|
self.activeMenu($el.navPanelList.find('a[data-type="main"]:first'));
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 左侧导航变化
|
|||
|
|
*/
|
|||
|
|
activeMenu: function(navTab) {
|
|||
|
|
// 点击选项卡时，左侧菜单栏跟随变化
|
|||
|
|
var $navObj = $("a[href$='" + $(navTab).data('url') + "']"), // 当前url对应的左侧导航对象
|
|||
|
|
$navHasSubnav = $navObj.parents('.nav-item'),
|
|||
|
|
$viSubHeight = $navHasSubnav.siblings().find('.nav-subnav:visible').outerHeight();
|
|||
|
|
|
|||
|
|
$('.nav-item').each(function(i){
|
|||
|
|
if ($(this).hasClass('active') && !$navObj.parents('.nav-item').last().hasClass('active')) {
|
|||
|
|
$(this).removeClass('active').removeClass('open');
|
|||
|
|
$(this).find('.nav-subnav:visible').slideUp(500);
|
|||
|
|
if (window.innerWidth > 1024 && $('body').hasClass('lyear-layout-sidebar-close')) {
|
|||
|
|
$(this).find('.nav-subnav').hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.nav-drawer').find('li').removeClass('active');
|
|||
|
|
$navObj.parent('li').addClass('active');
|
|||
|
|
$navHasSubnav.first().addClass('active');
|
|||
|
|
|
|||
|
|
// 当前菜单无子菜单
|
|||
|
|
if (!$navObj.parents('.nav-item').first().is('.nav-item-has-subnav')) {
|
|||
|
|
var hht = 48 * ( $navObj.parents('.nav-item').first().prevAll().length - 1 );
|
|||
|
|
$('.lyear-layout-sidebar-scroll').animate({scrollTop: hht}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if ($navObj.parents('ul.nav-subnav').last().is(':hidden')) {
|
|||
|
|
$navObj.parents('ul.nav-subnav').last().slideDown(500, function(){
|
|||
|
|
$navHasSubnav.last().addClass('open');
|
|||
|
|
var scrollHeight = 0,
|
|||
|
|
$scrollBox = $('.lyear-layout-sidebar-scroll'),
|
|||
|
|
pervTotal = $navHasSubnav.last().prevAll().length,
|
|||
|
|
boxHeight = $scrollBox.outerHeight(),
|
|||
|
|
innerHeight = $('.sidebar-main').outerHeight(),
|
|||
|
|
thisScroll = $scrollBox.scrollTop(),
|
|||
|
|
thisSubHeight = $(this).outerHeight(),
|
|||
|
|
footHeight = 121;
|
|||
|
|
|
|||
|
|
if (footHeight + innerHeight - boxHeight >= (pervTotal * 48)) {
|
|||
|
|
scrollHeight = pervTotal * 48;
|
|||
|
|
}
|
|||
|
|
if ($navHasSubnav.length == 1) {
|
|||
|
|
$scrollBox.animate({scrollTop: scrollHeight}, 300);
|
|||
|
|
} else {
|
|||
|
|
// 子菜单操作
|
|||
|
|
if (typeof($viSubHeight) != 'undefined' && $viSubHeight != null) {
|
|||
|
|
scrollHeight = thisScroll + thisSubHeight - $viSubHeight;
|
|||
|
|
$scrollBox.animate({scrollTop: scrollHeight}, 300);
|
|||
|
|
} else {
|
|||
|
|
if ((thisScroll + boxHeight - $scrollBox[0].scrollHeight) == 0) {
|
|||
|
|
scrollHeight = thisScroll - thisSubHeight;
|
|||
|
|
$scrollBox.animate({scrollTop: scrollHeight}, 300);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* init function
|
|||
|
|
* @param options
|
|||
|
|
* @returns self
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_init: function (options) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
$el.html(defaultLayoutTemplates[options.nav.layout]
|
|||
|
|
.replace('{mainClass}', options.class)
|
|||
|
|
.replace('{navClass}', options.nav.class)
|
|||
|
|
.replace(/\{nav-tabs\}/g, options.nav.style)
|
|||
|
|
.replace(/\{backgroundColor\}/g, options.nav.backgroundColor)
|
|||
|
|
.replace('{dropdown}', options.language.nav.dropdown)
|
|||
|
|
.replace('{showActivedTab}', options.language.nav.showActivedTab)
|
|||
|
|
.replace('{closeAllTabs}', options.language.nav.closeAllTabs)
|
|||
|
|
.replace('{closeOtherTabs}', options.language.nav.closeOtherTabs)
|
|||
|
|
);
|
|||
|
|
$el.wrapper = $el.find('.mt-wrapper:first');
|
|||
|
|
$el.nav = $el.find('.mt-nav-bar:first');
|
|||
|
|
$el.navToolsLeft = $el.nav.find('.mt-nav-tools-left:first');
|
|||
|
|
$el.navPanel = $el.nav.find('.mt-nav-panel:first');
|
|||
|
|
$el.navPanelList = $el.nav.find('.mt-nav-panel:first ul');
|
|||
|
|
//$el.navTabMain = $('#multitabs_main_0');
|
|||
|
|
$el.navToolsRight = $el.nav.find('.mt-nav-tools-right:first');
|
|||
|
|
$el.tabContent = $el.find('.tab-content:first');
|
|||
|
|
//hide tab-header if maxTabs less than 1
|
|||
|
|
if (options.nav.maxTabs <= 1) {
|
|||
|
|
options.nav.maxTabs = 1;
|
|||
|
|
$el.nav.hide();
|
|||
|
|
}
|
|||
|
|
//set the nav-panel width
|
|||
|
|
var toolWidth = $el.nav.find('.mt-nav-tools-left:visible:first').width() + $el.nav.find('.mt-nav-tools-right:visible:first').width();
|
|||
|
|
$el.navPanel.css('width', 'calc(100% - ' + toolWidth + 'px)');
|
|||
|
|
self.options = options;
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* final funcion for after init Multitabs
|
|||
|
|
* @returns self
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_final: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
options = self.options,
|
|||
|
|
storage, init = options.init,
|
|||
|
|
param;
|
|||
|
|
if (supportStorage(options.cache)) {
|
|||
|
|
storage = self._storage();
|
|||
|
|
self._resetStorage({});
|
|||
|
|
$.each(storage, function (k, v) {
|
|||
|
|
self.create(v, false);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if ($.isEmptyObject(storage)) {
|
|||
|
|
init = (!$.isEmptyObject(init) && init instanceof Array) ? init : defaultInit;
|
|||
|
|
for (var i = 0; i < init.length; i++) {
|
|||
|
|
param = self._getParam(init[i]);
|
|||
|
|
if (param) {
|
|||
|
|
self.create(param);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//if no any tab actived, active the main tab
|
|||
|
|
if (!$el.navPanelList.children('li.active').length) {
|
|||
|
|
self.active($el.navPanelList.find('[data-type="main"]:first'));
|
|||
|
|
}
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* bind action
|
|||
|
|
* @return self
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_listen: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
options = self.options;
|
|||
|
|
//create tab
|
|||
|
|
handler($(document), 'click', options.selector, function () {
|
|||
|
|
self.create(this, true);
|
|||
|
|
if (!$(this).parent().parent('ul').hasClass('dropdown-menu')) { // 20190402改，下拉菜单中的网址采用data-url，并且不阻止后面的动作
|
|||
|
|
return false; //Prevent the default selector action
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//active tab
|
|||
|
|
handler($el.nav, 'click', '.mt-nav-tab', function () {
|
|||
|
|
self.active(this);
|
|||
|
|
self.activeMenu(this);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//drag tab
|
|||
|
|
if (options.nav.draggable) {
|
|||
|
|
handler($el.navPanelList, 'mousedown', '.mt-nav-tab', function (event) {
|
|||
|
|
var $navTab = $(this),
|
|||
|
|
$navTabLi = $navTab.closest('li');
|
|||
|
|
var $prevNavTabLi = $navTabLi.prev();
|
|||
|
|
var dragMode = true,
|
|||
|
|
moved = false,
|
|||
|
|
isMain = ($navTab.data('type') === "main");
|
|||
|
|
var tmpId = 'mt_tmp_id_' + new Date().getTime(),
|
|||
|
|
navTabBlankHtml = '<li id="' + tmpId + '" class="mt-dragging" style="width:' + $navTabLi.outerWidth() + 'px; height:' + $navTabLi.outerHeight() + 'px;"><a style="width: 100%; height: 100%; "></a></li>';
|
|||
|
|
var abs_x = event.pageX - $navTabLi.offset().left + $el.nav.offset().left;
|
|||
|
|
$navTabLi.before(navTabBlankHtml);
|
|||
|
|
$navTabLi.addClass('mt-dragging mt-dragging-tab').css({
|
|||
|
|
'left': event.pageX - abs_x + 'px'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on('mousemove', function (event) {
|
|||
|
|
if (dragMode && !isMain) {
|
|||
|
|
$navTabLi.css({
|
|||
|
|
'left': event.pageX - abs_x + 'px'
|
|||
|
|
});
|
|||
|
|
$el.navPanelList.children('li:not(".mt-dragging")').each(function () {
|
|||
|
|
var leftWidth = $(this).offset().left + $(this).outerWidth() + 20; //20 px more for gap
|
|||
|
|
if (leftWidth > $navTabLi.offset().left) {
|
|||
|
|
if ($(this).next().attr('id') !== tmpId) {
|
|||
|
|
moved = true;
|
|||
|
|
$prevNavTabLi = $(this);
|
|||
|
|
$('#' + tmpId).remove();
|
|||
|
|
$prevNavTabLi.after(navTabBlankHtml);
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}).on("selectstart", function () { //disable text selection
|
|||
|
|
if (dragMode) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}).on('mouseup', function () {
|
|||
|
|
if (dragMode) {
|
|||
|
|
$navTabLi.removeClass('mt-dragging mt-dragging-tab').css({'left': 'auto'});
|
|||
|
|
if (moved) {
|
|||
|
|
$prevNavTabLi.after($navTabLi);
|
|||
|
|
}
|
|||
|
|
$('#' + tmpId).remove();
|
|||
|
|
}
|
|||
|
|
dragMode = false;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 右键菜单
|
|||
|
|
handler($el.nav, 'contextmenu', '.mt-nav-tab', function (event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
var menu = $('<ul class="dropdown-menu" role="menu" id="contextify-menu"/>'),
|
|||
|
|
$this = $(this),
|
|||
|
|
$nav = $this.closest('li'),
|
|||
|
|
$navTab = self._getNavTab($nav),
|
|||
|
|
$tabPane = self._getTabPane($navTab),
|
|||
|
|
param = $navTab.length ? self._getParam($navTab) : {};
|
|||
|
|
|
|||
|
|
var menuData = [
|
|||
|
|
{text: '刷新', onclick: function(){
|
|||
|
|
var tempTabPane = $($tabPane);
|
|||
|
|
|
|||
|
|
if (tempTabPane.is('iframe')) {
|
|||
|
|
tempTabPane.attr('src', param.url);
|
|||
|
|
} else {
|
|||
|
|
$.ajax({
|
|||
|
|
url: param.url,
|
|||
|
|
dataType: "html",
|
|||
|
|
success: function (callback) {
|
|||
|
|
tempTabPane.html(self.options.content.ajax.success(callback));
|
|||
|
|
},
|
|||
|
|
error: function (callback) {
|
|||
|
|
tempTabPane.html(self.options.content.ajax.error(callback));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
menu.hide();
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
}}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
var param = self._getParam($navTab);
|
|||
|
|
if (param.type !== 'main') {
|
|||
|
|
menuData.push(
|
|||
|
|
{text: '关闭', onclick: function(){
|
|||
|
|
self.close($navTab);
|
|||
|
|
menu.hide();
|
|||
|
|
return false;
|
|||
|
|
}}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
menuData.push(
|
|||
|
|
{text: '关闭其他', onclick: function(){
|
|||
|
|
self.closeOthers($navTab.data('index'));
|
|||
|
|
menu.hide();
|
|||
|
|
return false;
|
|||
|
|
}}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
var l = menuData.length, i;
|
|||
|
|
|
|||
|
|
for (i = 0; i < l; i++) {
|
|||
|
|
var item = menuData[i],
|
|||
|
|
el = $('<li/>');
|
|||
|
|
|
|||
|
|
el.append('<a/>');
|
|||
|
|
|
|||
|
|
var a = el.find('a');
|
|||
|
|
|
|||
|
|
a.on('click', item.onclick);
|
|||
|
|
a.css('cursor', 'pointer');
|
|||
|
|
a.html(item.text);
|
|||
|
|
|
|||
|
|
menu.append(el);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var currentMenu = $("#contextify-menu");
|
|||
|
|
if (currentMenu.length > 0) {
|
|||
|
|
if(currentMenu !== menu) {
|
|||
|
|
currentMenu.replaceWith(menu);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
$('body').append(menu);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var clientTop = $(window).scrollTop() + event.clientY,
|
|||
|
|
x = (menu.width() + event.clientX < $(window).width()) ? event.clientX : event.clientX - menu.width(),
|
|||
|
|
y = (menu.height() + event.clientY < $(window).height()) ? clientTop : clientTop - menu.height();
|
|||
|
|
|
|||
|
|
menu.css('top', y).css('left', x).css('position', 'fixed').show();
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(this).parents().on('click', function () {
|
|||
|
|
menu.hide();
|
|||
|
|
});
|
|||
|
|
$('#iframe-content').find('iframe').contents().find('body').on('click', function () {
|
|||
|
|
menu.hide();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//close tab
|
|||
|
|
handler($el.nav, 'click', '.mt-close-tab', function () {
|
|||
|
|
self.close($(this).closest('li'));
|
|||
|
|
return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
//move left
|
|||
|
|
handler($el.nav, 'click', '.mt-move-left', function () {
|
|||
|
|
self.moveLeft();
|
|||
|
|
return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
//move right
|
|||
|
|
handler($el.nav, 'click', '.mt-move-right', function () {
|
|||
|
|
self.moveRight();
|
|||
|
|
return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
//show actived tab
|
|||
|
|
handler($el.nav, 'click', '.mt-show-actived-tab', function () {
|
|||
|
|
self.showActive();
|
|||
|
|
//return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
//close all tabs
|
|||
|
|
handler($el.nav, 'click', '.mt-close-all-tabs', function () {
|
|||
|
|
self.closeAll();
|
|||
|
|
//return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
//close other tabs
|
|||
|
|
handler($el.nav, 'click', '.mt-close-other-tabs', function () {
|
|||
|
|
self.closeOthers();
|
|||
|
|
//return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//fixed the nav-bar
|
|||
|
|
var navHeight = $el.nav.outerHeight();
|
|||
|
|
$el.tabContent.css('paddingTop', navHeight);
|
|||
|
|
if (options.nav.fixed) {
|
|||
|
|
handler($(window), 'scroll', function () {
|
|||
|
|
var scrollTop = $(this).scrollTop();
|
|||
|
|
scrollTop = scrollTop < ($el.wrapper.height() - navHeight) ? scrollTop + 'px' : 'auto';
|
|||
|
|
$el.nav.css('top', scrollTop);
|
|||
|
|
return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//if layout === 'classic' show hide list in dropdown menu
|
|||
|
|
if (options.nav.layout === 'classic') {
|
|||
|
|
handler($el.nav, 'click', '.mt-dropdown:not(.open)', function () { //just trigger when dropdown not open.
|
|||
|
|
var list = self._getHiddenList();
|
|||
|
|
var $dropDown = $el.navToolsRight.find('.mt-hidden-list:first').empty();
|
|||
|
|
if (list) { //when list is not empty
|
|||
|
|
while (list.prevList.length) {
|
|||
|
|
$dropDown.append(list.prevList.shift().clone());
|
|||
|
|
}
|
|||
|
|
while (list.nextList.length) {
|
|||
|
|
$dropDown.append(list.nextList.shift().clone());
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
$dropDown.append('<li>empty</li>');
|
|||
|
|
}
|
|||
|
|
// return false; //Avoid possible BUG
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return self;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* get the multitabs object's param
|
|||
|
|
* @param obj multitabs's object
|
|||
|
|
* @returns param param
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getParam: function (obj) {
|
|||
|
|
if ($.isEmptyObject(obj)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var self = this,
|
|||
|
|
options = self.options,
|
|||
|
|
param = {},
|
|||
|
|
$obj = $(obj),
|
|||
|
|
data = $obj.data();
|
|||
|
|
|
|||
|
|
//content
|
|||
|
|
param.content = data.content || obj.content || '';
|
|||
|
|
|
|||
|
|
if (!param.content.length) {
|
|||
|
|
//url
|
|||
|
|
param.url = data.url || obj.url || $obj.attr('href') || $obj.attr('url') || '';
|
|||
|
|
param.url = $.trim(decodeURIComponent(param.url.replace('#', '')));
|
|||
|
|
} else {
|
|||
|
|
param.url = '';
|
|||
|
|
}
|
|||
|
|
if (!param.url.length && !param.content.length) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
//refresh
|
|||
|
|
param.refresh = data.hasOwnProperty('refresh') || obj.hasOwnProperty('refresh') || options.refresh;
|
|||
|
|
//iframe
|
|||
|
|
param.iframe = data.iframe || obj.iframe || isExtUrl(param.url) || options.iframe;
|
|||
|
|
//type
|
|||
|
|
param.type = data.type || obj.type || options.type;
|
|||
|
|
//title
|
|||
|
|
param.title = data.title || obj.title || $obj.text() || param.url.replace('http://', '').replace('https://', '') || options.language.nav.title;
|
|||
|
|
param.title = trimText(param.title, options.nav.maxTitleLength);
|
|||
|
|
//active
|
|||
|
|
param.active = data.active || obj.active || false;
|
|||
|
|
//index
|
|||
|
|
param.index = data.index || obj.index || getTabIndex(param.type, options.nav.maxTabs);
|
|||
|
|
//id
|
|||
|
|
param.did = data.did || obj.did || this._generateId(param);
|
|||
|
|
return param;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* session storage for tab list
|
|||
|
|
* @param key
|
|||
|
|
* @param param
|
|||
|
|
* @returns storage
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_storage: function (key, param) {
|
|||
|
|
if (supportStorage(this.options.cache)) {
|
|||
|
|
var storage = JSON.parse(sessionStorage.multitabs || '{}');
|
|||
|
|
if (!key) {
|
|||
|
|
return storage;
|
|||
|
|
}
|
|||
|
|
if (!param) {
|
|||
|
|
return storage[key];
|
|||
|
|
}
|
|||
|
|
storage[key] = param;
|
|||
|
|
sessionStorage.multitabs = JSON.stringify(storage);
|
|||
|
|
return storage;
|
|||
|
|
}
|
|||
|
|
return {};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* delete storage by key
|
|||
|
|
* @param key
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_delStorage: function (key) {
|
|||
|
|
if (supportStorage(this.options.cache)) {
|
|||
|
|
var storage = JSON.parse(sessionStorage.multitabs || '{}');
|
|||
|
|
if (!key) {
|
|||
|
|
return storage;
|
|||
|
|
}
|
|||
|
|
delete storage[key];
|
|||
|
|
sessionStorage.multitabs = JSON.stringify(storage);
|
|||
|
|
return storage;
|
|||
|
|
}
|
|||
|
|
return {};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* reset storage
|
|||
|
|
* @param storage
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_resetStorage: function (storage) {
|
|||
|
|
if (supportStorage(this.options.cache) && typeof storage === "object") {
|
|||
|
|
sessionStorage.multitabs = JSON.stringify(storage);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* check if exist multitabs obj
|
|||
|
|
* @param param
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_exist: function (param) {
|
|||
|
|
if (!param || !param.url) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
var $navTab = $el.navPanelList.find('a[data-url="' + param.url + '"]:first');
|
|||
|
|
if ($navTab.length) {
|
|||
|
|
return $navTab;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* get tab-pane from tab
|
|||
|
|
* @param tab
|
|||
|
|
* @returns {*}
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getTabPane: function (navTab) {
|
|||
|
|
return $('#' + $(navTab).attr('data-id'));
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* get real navTab in the panel list.
|
|||
|
|
* @param navTab
|
|||
|
|
* @returns navTab
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getNavTab: function (navTab) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element;
|
|||
|
|
var dataId = $(navTab).attr('data-id') || $(navTab).find('a').attr('data-id');
|
|||
|
|
return $el.navPanelList.find('a[data-id="' + dataId + '"]:first');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* fix nav navTab position
|
|||
|
|
* @param navTab
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_fixTabPosition: function (navTab) {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
$navTabLi = $(navTab).parent('li'),
|
|||
|
|
tabWidth = $navTabLi.outerWidth(true),
|
|||
|
|
prevWidth = $navTabLi.prev().outerWidth(true),
|
|||
|
|
pprevWidth = $navTabLi.prev().prev().outerWidth(true),
|
|||
|
|
sumPrevWidth = sumDomWidth($navTabLi.prevAll()),
|
|||
|
|
sumNextWidth = sumDomWidth($navTabLi.nextAll()),
|
|||
|
|
navPanelWidth = $el.navPanel.outerWidth(true),
|
|||
|
|
sumTabsWidth = sumDomWidth($el.navPanelList.children('li')),
|
|||
|
|
leftWidth = 0;
|
|||
|
|
//all nav navTab's width no more than nav-panel's width
|
|||
|
|
if (sumTabsWidth < navPanelWidth) {
|
|||
|
|
leftWidth = 0
|
|||
|
|
} else {
|
|||
|
|
//when navTab and his right tabs sum width less or same as nav-panel, it means nav-panel can contain the navTab and his right tabs
|
|||
|
|
if ((prevWidth + tabWidth + sumNextWidth) <= navPanelWidth) {
|
|||
|
|
leftWidth = sumPrevWidth; //sum width of left part
|
|||
|
|
//add width from the left, calcular the maximum tabs can contained by nav-panel
|
|||
|
|
while ((sumTabsWidth - leftWidth + prevWidth) < navPanelWidth) {
|
|||
|
|
$navTabLi = $navTabLi.prev(); //change the left navTab
|
|||
|
|
leftWidth -= $navTabLi.outerWidth(); //reduce the left part width
|
|||
|
|
}
|
|||
|
|
} else { //nav-panel can not contain the navTab and his right tabs
|
|||
|
|
//when the navTab and his left part tabs's sum width more than nav-panel, all the width of 2 previous tabs's width set as the nav-panel margin-left.
|
|||
|
|
if ((sumPrevWidth + tabWidth) > navPanelWidth) {
|
|||
|
|
leftWidth = sumPrevWidth - prevWidth - pprevWidth
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
leftWidth = leftWidth > 0 ? leftWidth : 0; //avoid leftWidth < 0 BUG
|
|||
|
|
$el.navPanelList.animate({
|
|||
|
|
marginLeft: 0 - leftWidth + "px"
|
|||
|
|
}, "fast");
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* hidden tab list
|
|||
|
|
* @returns hidden tab list, the prevList and nextList
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getHiddenList: function () {
|
|||
|
|
var self = this,
|
|||
|
|
$el = self.$element,
|
|||
|
|
navPanelListMarginLeft = Math.abs(parseInt($el.navPanelList.css("margin-left"))),
|
|||
|
|
navPanelWidth = $el.navPanel.outerWidth(true),
|
|||
|
|
sumTabsWidth = sumDomWidth($el.navPanelList.children('li')),
|
|||
|
|
tabPrevList = [],
|
|||
|
|
tabNextList = [],
|
|||
|
|
$navTabLi, marginLeft;
|
|||
|
|
//all tab's width no more than nav-panel's width
|
|||
|
|
if (sumTabsWidth < navPanelWidth) {
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
$navTabLi = $el.navPanelList.children('li:first');
|
|||
|
|
//overflow hidden left part
|
|||
|
|
marginLeft = 0;
|
|||
|
|
//from the first tab, add all left part hidden tabs
|
|||
|
|
while ((marginLeft + $navTabLi.width()) <= navPanelListMarginLeft) {
|
|||
|
|
marginLeft += $navTabLi.outerWidth(true);
|
|||
|
|
tabPrevList.push($navTabLi);
|
|||
|
|
$navTabLi = $navTabLi.next();
|
|||
|
|
}
|
|||
|
|
//overflow hidden right part
|
|||
|
|
if (sumTabsWidth > marginLeft) { //check if the right part have hidden tabs
|
|||
|
|
$navTabLi = $el.navPanelList.children('li:last');
|
|||
|
|
marginLeft = sumTabsWidth; //set margin-left as the Rightmost, and reduce one and one.
|
|||
|
|
while (marginLeft > (navPanelListMarginLeft + navPanelWidth)) {
|
|||
|
|
marginLeft -= $navTabLi.outerWidth(true);
|
|||
|
|
tabNextList.unshift($navTabLi); //add param from top
|
|||
|
|
$navTabLi = $navTabLi.prev();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
prevList: tabPrevList,
|
|||
|
|
nextList: tabNextList
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* check if tab-pane is iframe, and add/remove class
|
|||
|
|
* @param tabPane
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_fixTabContentLayout: function (tabPane) {
|
|||
|
|
var $tabPane = $(tabPane);
|
|||
|
|
if ($tabPane.is('iframe')) {
|
|||
|
|
$('body').addClass('full-height-layout');
|
|||
|
|
/** fix chrome croll disappear bug **/
|
|||
|
|
$tabPane.css("height", "99%");
|
|||
|
|
window.setTimeout(function () {
|
|||
|
|
$tabPane.css("height", "100%");
|
|||
|
|
}, 0);
|
|||
|
|
} else {
|
|||
|
|
$('body').removeClass('full-height-layout');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Entry function
|
|||
|
|
* @param option
|
|||
|
|
*/
|
|||
|
|
$.fn.multitabs = function (option, id) {
|
|||
|
|
var self = $(this),
|
|||
|
|
did = id ? id : 'multitabs',
|
|||
|
|
multitabs = $(document).data(did),
|
|||
|
|
options = typeof option === 'object' && option,
|
|||
|
|
opts;
|
|||
|
|
if (!multitabs) {
|
|||
|
|
opts = $.extend(true, {}, $.fn.multitabs.defaults, options, self.data());
|
|||
|
|
opts.nav.style = (opts.nav.style === 'nav-pills') ? 'nav-pills' : 'nav-tabs';
|
|||
|
|
multitabs = new MultiTabs(this, opts);
|
|||
|
|
$(document).data(did, multitabs);
|
|||
|
|
}
|
|||
|
|
return $(document).data(did);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Default Options
|
|||
|
|
* @type {}
|
|||
|
|
*/
|
|||
|
|
$.fn.multitabs.defaults = {
|
|||
|
|
selector: '.multitabs', //selector text to trigger multitabs.
|
|||
|
|
iframe: false, //Global iframe mode, default is false, is the auto mode (for the self page, use ajax, and the external, use iframe)
|
|||
|
|
cache: false,
|
|||
|
|
class: '', //class for whole multitabs
|
|||
|
|
type: 'info', //change the info content name, is not necessary to change.
|
|||
|
|
init: [],
|
|||
|
|
refresh: false,
|
|||
|
|
nav: {
|
|||
|
|
backgroundColor: '#f5f5f5', //default nav-bar background color
|
|||
|
|
class: '', //class of nav
|
|||
|
|
draggable: true, //nav tab draggable option
|
|||
|
|
fixed: false, //fixed the nav-bar
|
|||
|
|
layout: 'default', //it can be 'default', 'classic' (all hidden tab in dropdown list), and simple
|
|||
|
|
maxTabs: 15, //Max tabs number (without counting main tab), when is 1, hide the whole nav
|
|||
|
|
maxTitleLength: 25, //Max title length of tab
|
|||
|
|
showCloseOnHover: false, //while is true, show close button in hover, if false, show close button always
|
|||
|
|
style: 'nav-tabs' //can be nav-tabs or nav-pills
|
|||
|
|
},
|
|||
|
|
content: {
|
|||
|
|
ajax: {
|
|||
|
|
class: '', //Class for ajax tab-pane
|
|||
|
|
error: function (htmlCallBack) {
|
|||
|
|
//modify html and return
|
|||
|
|
return htmlCallBack;
|
|||
|
|
},
|
|||
|
|
success: function (htmlCallBack) {
|
|||
|
|
//modify html and return
|
|||
|
|
return htmlCallBack;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
iframe: {
|
|||
|
|
class: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
language: { //language setting
|
|||
|
|
nav: {
|
|||
|
|
title: 'Tab', //default tab's tittle
|
|||
|
|
dropdown: '<i class="mdi mdi-menu"></i>', //right tools dropdown name
|
|||
|
|
showActivedTab: '显示当前选项卡', //show active tab
|
|||
|
|
closeAllTabs: '关闭所有标签页', //close all tabs
|
|||
|
|
closeOtherTabs: '关闭其他标签页', //close other tabs
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
})(jQuery));
|