.
This commit is contained in:
488
root/res/zui/lib/tabs/zui.tabs.js
Normal file
488
root/res/zui/lib/tabs/zui.tabs.js
Normal file
@@ -0,0 +1,488 @@
|
||||
/*!
|
||||
* ZUI: 标签页管理器 - v1.8.1 - 2018-01-18
|
||||
* http://zui.sexy
|
||||
* GitHub: https://github.com/easysoft/zui.git
|
||||
* Copyright (c) 2018 cnezsoft.com; Licensed MIT
|
||||
*/
|
||||
|
||||
/* ========================================================================
|
||||
* ZUI: tabs.js
|
||||
* http://zui.sexy
|
||||
* ========================================================================
|
||||
* Copyright (c) 2017-2018 cnezsoft.com; Licensed MIT
|
||||
* ======================================================================== */
|
||||
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Tab object
|
||||
* @param {Object | String} tab
|
||||
*/
|
||||
var Tab = function(tab) {
|
||||
var that = this;
|
||||
if(typeof tab === 'string') {
|
||||
that.url = tab;
|
||||
} else if($.isPlainObject(tab)) {
|
||||
$.extend(that, tab);
|
||||
}
|
||||
if(!that.id) {
|
||||
that.id = $.zui.uuid();
|
||||
}
|
||||
if(!that.type) {
|
||||
if(that.iframe) {
|
||||
that.type = 'iframe';
|
||||
that.url = that.url || that.iframe;
|
||||
} else if(that.ajax) {
|
||||
that.type = 'ajax';
|
||||
that.url = that.url || ($.isPlainObject(that.ajax) ? that.ajax.url : that.ajax);
|
||||
} else if(that.url) {
|
||||
that.type = tab.ajax ? 'ajax' : 'iframe';
|
||||
} else {
|
||||
that.type = 'custom';
|
||||
}
|
||||
}
|
||||
that.createTime = new Date().getTime();
|
||||
that.openTime = 0;
|
||||
that.onCreate && that.onCreate.call(that);
|
||||
};
|
||||
|
||||
Tab.prototype.open = function() {
|
||||
var that = this;
|
||||
that.openTime = new Date().getTime();
|
||||
that.onOpen && that.onOpen.call(that);
|
||||
};
|
||||
|
||||
Tab.prototype.close = function() {
|
||||
var that = this;
|
||||
that.openTime = 0;
|
||||
that.onClose && that.onClose.call(that);
|
||||
};
|
||||
|
||||
Tab.create = function(data) {
|
||||
if (data instanceof Tab) {
|
||||
return data;
|
||||
}
|
||||
return new Tab(data);
|
||||
};
|
||||
|
||||
var NAME = 'zui.tabs'; // model name
|
||||
var DEFAULTS = {
|
||||
tabs: [],
|
||||
defaultTabIcon: 'icon-window',
|
||||
contextMenu: true,
|
||||
errorTemplate: '<div class="alert alert-block alert-danger with-icon"><i class="icon-warning-sign"></i><div class="content">{0}</div></div>',
|
||||
// messagerOptions: null,
|
||||
showMessage: true,
|
||||
navTemplate: '<nav class="tabs-navbar"></nav>',
|
||||
containerTemplate: '<div class="tabs-container"></div>'
|
||||
};
|
||||
|
||||
var LANG = {
|
||||
zh_cn: {
|
||||
reload: '重新加载',
|
||||
close: '关闭',
|
||||
closeOthers: '关闭其他标签页',
|
||||
closeRight: '关闭右侧标签页',
|
||||
reopenLast: '恢复上次关闭的标签页',
|
||||
errorCannotFetchFromRemote: '无法从远程服务器（{0}）获取内容。'
|
||||
},
|
||||
zh_tw: {
|
||||
reload: '重新加載',
|
||||
close: '關閉',
|
||||
closeOthers: '關閉其他標籤頁',
|
||||
closeRight: '關閉右側標籤頁',
|
||||
reopenLast: '恢復上次關閉的標籤頁',
|
||||
errorCannotFetchFromRemote: '無法從遠程服務器（{0}）獲取內容。'
|
||||
},
|
||||
en: {
|
||||
reload: 'Reload',
|
||||
close: 'Close',
|
||||
closeOthers: 'Close others',
|
||||
closeRight: 'Close right',
|
||||
reopenLast: 'Reopen last',
|
||||
errorCannotFetchFromRemote: 'Cannot fetch data from remote server {0}.'
|
||||
}
|
||||
};
|
||||
|
||||
// The tabs model class
|
||||
var Tabs = function(element, options) {
|
||||
var that = this;
|
||||
that.name = NAME;
|
||||
that.$ = $(element);
|
||||
|
||||
options = that.options = $.extend({}, DEFAULTS, this.$.data(), options);
|
||||
var lang = options.lang || 'zh_cn';
|
||||
that.lang = $.isPlainObject(lang) ? ($.extend(true, {}, LANG[lang.lang || $.zui.clientLang()], lang)) : LANG[lang];
|
||||
|
||||
// Initialize here
|
||||
var $navbar = that.$.find('.tabs-navbar');
|
||||
if (!$navbar.length) {
|
||||
$navbar = $(options.navTemplate).appendTo(that.$);
|
||||
}
|
||||
that.$navbar = $navbar;
|
||||
|
||||
var $nav = $navbar.find('.tabs-nav');
|
||||
if (!$nav.length) {
|
||||
$nav = $('<ul class="tabs-nav nav nav-tabs"></ul>').appendTo($navbar);
|
||||
}
|
||||
that.$nav = $nav;
|
||||
|
||||
var $tabs = that.$.find('.tabs-container');
|
||||
if (!$tabs.length) {
|
||||
$tabs = $(options.containerTemplate).appendTo(that.$);
|
||||
}
|
||||
that.$tabs = $tabs;
|
||||
|
||||
that.activeTabId = options.defaultTab;
|
||||
var tabs = options.tabs || [];
|
||||
that.tabs = {};
|
||||
$.each(tabs, function(index, item) {
|
||||
var tab = Tab.create(item);
|
||||
that.tabs[tab.id] = tab;
|
||||
|
||||
if (!that.activeTabId) {
|
||||
that.activeTabId = tab.id;
|
||||
}
|
||||
|
||||
that.renderTab(tab);
|
||||
});
|
||||
that.closedTabs = [];
|
||||
|
||||
that.open(that.getActiveTab());
|
||||
|
||||
$nav.on('click.' + NAME, '.tab-nav-link', function () {
|
||||
that.open(that.getTab($(this).data('id')));
|
||||
}).on('click.' + NAME, '.tab-nav-close', function (e) {
|
||||
that.close($(this).closest('.tab-nav-link').data('id'));
|
||||
e.stopPropagation();
|
||||
}).on('resize.' + NAME, function () {
|
||||
that.adjustNavs();
|
||||
});
|
||||
|
||||
if (options.contextMenu) {
|
||||
$nav.contextmenu({
|
||||
selector: '.tab-nav-link',
|
||||
itemsCreator: function (e) {
|
||||
return that.createMenuItems(that.getTab($(this).data('id')));
|
||||
},
|
||||
onShow: function () {
|
||||
that.$.addClass('tabs-show-contextmenu');
|
||||
},
|
||||
onHide: function () {
|
||||
that.$.removeClass('tabs-show-contextmenu');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Tabs.prototype.createMenuItems = function (tab) {
|
||||
var that = this;
|
||||
var lang = that.lang;
|
||||
return [{
|
||||
label: lang.reload,
|
||||
onClick: function () {
|
||||
that.open(tab, true);
|
||||
}
|
||||
}, '-', {
|
||||
label: lang.close,
|
||||
disabled: tab.forbidClose,
|
||||
onClick: function () {
|
||||
that.close(tab.id);
|
||||
}
|
||||
}, {
|
||||
label: lang.closeOthers,
|
||||
disabled: that.$nav.find('.tab-nav-item:not(.hidden)').length <= 1,
|
||||
onClick: function () {
|
||||
that.closeOthers(tab.id);
|
||||
}
|
||||
}, {
|
||||
label: lang.closeRight,
|
||||
disabled: !$('#tab-nav-item-' + tab.id).next('.tab-nav-item:not(.hidden)').length,
|
||||
onClick: function () {
|
||||
that.closeRight(tab.id);
|
||||
}
|
||||
}, '-', {
|
||||
label: lang.reopenLast,
|
||||
disabled: !that.closedTabs.length,
|
||||
onClick: function () {
|
||||
that.reopen();
|
||||
}
|
||||
}];
|
||||
};
|
||||
|
||||
Tabs.prototype.adjustNavs = function (immediately) {
|
||||
var that = this;
|
||||
if (!immediately) {
|
||||
if (that.adjustNavsTimer) {
|
||||
clearTimeout(that.adjustNavsTimer);
|
||||
}
|
||||
that.adjustNavsTimer = setTimeout(function() {
|
||||
that.adjustNavs(true);
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
if (that.adjustNavsTimer) {
|
||||
that.adjustNavsTimer = null;
|
||||
}
|
||||
var $nav = that.$nav;
|
||||
var $navItems = $nav.find('.tab-nav-item:not(.hidden)');
|
||||
var totalWidth = $nav.width();
|
||||
var totalCount = $navItems.length;
|
||||
var maxWidth = Math.floor(totalWidth/totalCount);
|
||||
if(maxWidth < 96) {
|
||||
maxWidth = Math.floor((totalWidth-96)/(totalCount-1))
|
||||
}
|
||||
$nav.toggleClass('tab-nav-condensed', maxWidth <= 50);
|
||||
$navItems.css('max-width', maxWidth);
|
||||
};
|
||||
|
||||
Tabs.prototype.renderTab = function(tab, beforeTabId) {
|
||||
var that = this;
|
||||
var $nav = that.$nav;
|
||||
var $tabNav = $('#tab-nav-item-' + tab.id);
|
||||
if (!$tabNav.length) {
|
||||
var $a = $('<a class="tab-nav-link"><i class="icon"></i><span class="title"></span><i class="close tab-nav-close" title="' + that.lang.close + '">×</i></a>').attr({
|
||||
href: '#tabs-item-' + tab.id,
|
||||
'data-id': tab.id
|
||||
});
|
||||
$tabNav = $('<li class="tab-nav-item" data-id="' + tab.id + '" id="tab-nav-item-' + tab.id + '" />').append($a).appendTo(that.$nav);
|
||||
if (beforeTabId) {
|
||||
var $before$nav = $('#tab-nav-item-' + beforeTabId);
|
||||
if ($before$nav.length) {
|
||||
$tabNav.insertAfter($before$nav);
|
||||
}
|
||||
}
|
||||
that.adjustNavs();
|
||||
}
|
||||
var $a = $tabNav.find('a').attr('title', tab.desc).toggleClass('not-closable', !!tab.forbidClose);
|
||||
$a.find('.icon').attr('class', 'icon ' + (tab.icon || that.options.defaultTabIcon));
|
||||
$a.find('.title').text(tab.title || tab.defaultTitle || '');
|
||||
return $tabNav;
|
||||
};
|
||||
|
||||
Tabs.prototype.getActiveTab = function() {
|
||||
var that = this;
|
||||
return that.activeTabId ? that.tabs[that.activeTabId] : null;
|
||||
};
|
||||
|
||||
Tabs.prototype.getTab = function(tabId) {
|
||||
var that = this;
|
||||
if (!tabId) {
|
||||
return that.getActiveTab();
|
||||
}
|
||||
if (typeof tabId === 'object') {
|
||||
tabId = tabId.id;
|
||||
}
|
||||
return that.tabs[tabId];
|
||||
};
|
||||
|
||||
Tabs.prototype.close = function(tabId, forceClose) {
|
||||
var that = this;
|
||||
var tab = that.getTab(tabId);
|
||||
if (tab && (forceClose || !tab.forbidClose)) {
|
||||
$('#tab-nav-item-' + tab.id).remove();
|
||||
$('#tab-' + tab.id).remove();
|
||||
tab.close();
|
||||
delete that.tabs[tab.id];
|
||||
that.closedTabs.push(tab);
|
||||
that.$.callComEvent(that, 'onClose', tab);
|
||||
|
||||
var lastTab;
|
||||
$.each(that.tabs, function (tabId, tab) {
|
||||
if (!lastTab || lastTab.openTime < tab.openTime) {
|
||||
lastTab = tab;
|
||||
}
|
||||
});
|
||||
lastTab && that.open(lastTab);
|
||||
}
|
||||
};
|
||||
|
||||
Tabs.prototype.open = function(tab, forceReload) {
|
||||
var that = this;
|
||||
|
||||
if (!(tab instanceof Tab)) {
|
||||
tab = Tab.create(tab);
|
||||
}
|
||||
|
||||
var $tabNav = that.renderTab(tab);
|
||||
that.$nav.find('.tab-nav-item.active').removeClass('active');
|
||||
$tabNav.addClass('active');
|
||||
|
||||
var $tabPane = $('#tab-' + tab.id);
|
||||
if (!$tabPane.length) {
|
||||
$tabPane = $('<div class="tab-pane" id="tab-' + tab.id + '" />').appendTo(that.$tabs);
|
||||
}
|
||||
that.$tabs.find('.tab-pane.active').removeClass('active');
|
||||
$tabPane.addClass('active');
|
||||
|
||||
tab.open();
|
||||
that.activeTabId = tab.id;
|
||||
that.tabs[tab.id] = tab;
|
||||
|
||||
if (forceReload || !tab.loaded) {
|
||||
that.reload(tab);
|
||||
}
|
||||
|
||||
that.$.callComEvent(that, 'onOpen', tab);
|
||||
};
|
||||
|
||||
Tabs.prototype.showMessage = function (message, type) {
|
||||
$.zui.messager.show(message, $.extend({
|
||||
placement: 'center'
|
||||
}, this.options.messagerOptions, {
|
||||
type: type
|
||||
}));
|
||||
};
|
||||
|
||||
Tabs.prototype.reload = function(tab) {
|
||||
var that = this;
|
||||
|
||||
if (typeof tab === 'string') {
|
||||
tab = that.getTab(tab);
|
||||
} else if (!tab) {
|
||||
tab = that.getActiveTab();
|
||||
}
|
||||
|
||||
if (!tab) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tab.openTime) {
|
||||
return that.open(tab);
|
||||
}
|
||||
|
||||
var $tabNav = $('#tab-nav-item-' + tab.id).addClass('loading').removeClass('has-error');
|
||||
var $tabPane = $('#tab-' + tab.id).addClass('loading').removeClass('has-error');
|
||||
var afterRefresh = function (content, error) {
|
||||
if (!tab.openTime) {
|
||||
return;
|
||||
}
|
||||
$tabNav.removeClass('loading');
|
||||
$tabPane.removeClass('loading');
|
||||
that.$.callComEvent(that, 'onLoad', tab);
|
||||
if(typeof content === 'string' || content instanceof $) {
|
||||
if (tab.contentConverter) {
|
||||
content = tab.contentConverter(content, tab);
|
||||
}
|
||||
$tabPane.empty().append(content);
|
||||
if (!tab.title) {
|
||||
content = $tabPane.text().replace(/\n/g, '');
|
||||
tab.title = content.length > 10 ? content.substr(0, 10) : content;
|
||||
that.renderTab(tab);
|
||||
}
|
||||
}
|
||||
if (error) {
|
||||
$tabNav.addClass('has-error');
|
||||
$tabPane.addClass('has-error');
|
||||
var showMessage = that.options.showMessage;
|
||||
if (showMessage) {
|
||||
if ($.isFunction(showMessage)) {
|
||||
error = showMessage(error);
|
||||
}
|
||||
that.showMessage(error, 'danger');
|
||||
}
|
||||
if (!content) {
|
||||
$tabPane.html(that.options.errorTemplate.format(error));
|
||||
}
|
||||
}
|
||||
tab.loaded = new Date().getTime();
|
||||
};
|
||||
if (tab.type === 'ajax') {
|
||||
var ajaxOption = {
|
||||
type: 'get',
|
||||
url: tab.url,
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
afterRefresh(false, that.lang.errorCannotFetchFromRemote.format(tab.url));
|
||||
},
|
||||
success: function(data) {
|
||||
afterRefresh(data);
|
||||
}
|
||||
};
|
||||
if($.isPlainObject(tab.ajax)) {
|
||||
ajaxOption = $.extend(ajaxOption, tab.ajax);
|
||||
}
|
||||
$.ajax(ajaxOption);
|
||||
} else if (tab.type === 'iframe') {
|
||||
try {
|
||||
var iframeName = 'tab-iframe-' + tab.id;
|
||||
var $iframe = $('<iframe id="' + iframeName + '" name="' + iframeName + '" src="' + (tab.url) + '" frameborder="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true" scrolling="auto" style="width: 100%; height: 100%; left: 0px;"></iframe>');
|
||||
$iframe.appendTo($tabPane.empty());
|
||||
$('<div class="tab-iframe-cover" />').appendTo($tabPane);
|
||||
var frame = document.getElementById(iframeName);
|
||||
frame.onload = frame.onreadystatechange = function() {
|
||||
if(this.readyState && this.readyState != 'complete') return;
|
||||
afterRefresh();
|
||||
var contentDocument = frame.contentDocument;
|
||||
if (contentDocument && !tab.title) {
|
||||
tab.title = contentDocument.title;
|
||||
that.renderTab(tab);
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
afterRefresh();
|
||||
}
|
||||
} else {
|
||||
var content = tab.content || tab.custom;
|
||||
if (typeof content === 'function') {
|
||||
content = content(tab, afterRefresh, that);
|
||||
if (content !== true) {
|
||||
afterRefresh(content);
|
||||
}
|
||||
} else {
|
||||
afterRefresh(content);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Tabs.prototype.closeOthers = function(tabId) {
|
||||
var that = this;
|
||||
that.$nav.find('.tab-nav-link:not(.hidden)').each(function() {
|
||||
var thisTabId = $(this).data('id');
|
||||
if (thisTabId !== tabId) {
|
||||
that.close(thisTabId);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Tabs.prototype.closeRight = function(tabId) {
|
||||
var $tabNav = $('#tab-nav-item-' + tabId);
|
||||
var $rightNav = $tabNav.next('.tab-nav-item:not(.hidden)');
|
||||
while ($rightNav.length) {
|
||||
this.close($rightNav.data('id'));
|
||||
$rightNav = $tabNav.next('.tab-nav-item:not(.hidden)');
|
||||
}
|
||||
};
|
||||
|
||||
Tabs.prototype.closeAll = function() {
|
||||
var that = this;
|
||||
that.$nav.find('.tab-nav-link:not(.hidden)').each(function() {
|
||||
that.close($(this).data('id'));
|
||||
});
|
||||
};
|
||||
|
||||
Tabs.prototype.reopen = function() {
|
||||
var that = this;
|
||||
if(that.closedTabs.length) {
|
||||
that.open(that.closedTabs.pop());
|
||||
}
|
||||
};
|
||||
|
||||
// Extense jquery element
|
||||
$.fn.tabs = function(option) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
var data = $this.data(NAME);
|
||||
var options = typeof option == 'object' && option;
|
||||
|
||||
if(!data) $this.data(NAME, (data = new Tabs(this, options)));
|
||||
|
||||
if(typeof option == 'string') data[option]();
|
||||
});
|
||||
};
|
||||
|
||||
Tabs.NAME = NAME;
|
||||
$.fn.tabs.Constructor = Tabs;
|
||||
}(jQuery));
|
||||
|
||||
Reference in New Issue
Block a user