/**
* EasyUI for jQuery 1.10.16
*
* Copyright (c) 2009-2023 www.jeasyui.com. All rights reserved.
*
* Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
* To use it on other terms please contact us: info@jeasyui.com
*
*/
/**
* tabs - EasyUI for jQuery
*
* Dependencies:
* panel
* linkbutton
*
*/
(function($){
function getContentWidth(c){
var w = 0;
$(c).children().each(function(){
w += $(this).outerWidth(true);
});
return w;
}
/**
* set the tabs scrollers to show or not,
* dependent on the tabs count and width
*/
function setScrollers(container) {
var opts = $.data(container, 'tabs').options;
if (!opts.showHeader){return}
var header = $(container).children('div.tabs-header');
var tool = header.children('div.tabs-tool:not(.tabs-tool-hidden)');
var sLeft = header.children('div.tabs-scroller-left');
var sRight = header.children('div.tabs-scroller-right');
var wrap = header.children('div.tabs-wrap');
if (opts.tabPosition == 'left' || opts.tabPosition == 'right'){
if (!tool.length){return}
tool._outerWidth(header.width());
var toolCss = {
left: opts.tabPosition == 'left' ? 'auto':0,
right: opts.tabPosition == 'left' ? 0 : 'auto',
top: opts.toolPosition == 'top' ? 0 : 'auto',
bottom: opts.toolPosition == 'top' ? 'auto' : 0
};
var wrapCss = {
marginTop: opts.toolPosition == 'top' ? tool.outerHeight() : 0
};
tool.css(toolCss);
wrap.css(wrapCss);
return;
}
// set the tool height
var tHeight = header.outerHeight();
if (opts.plain){
tHeight -= tHeight - header.height();
}
tool._outerHeight(tHeight);
var tabsWidth = getContentWidth(header.find('ul.tabs'));
var cWidth = header.width() - tool._outerWidth();
if (tabsWidth > cWidth) {
sLeft.add(sRight).show()._outerHeight(tHeight);
if (opts.toolPosition == 'left'){
tool.css({
left: sLeft.outerWidth(),
right: ''
});
wrap.css({
marginLeft: sLeft.outerWidth() + tool._outerWidth(),
marginRight: sRight._outerWidth(),
width: cWidth - sLeft.outerWidth() - sRight.outerWidth()
});
} else {
tool.css({
left: '',
right: sRight.outerWidth()
});
wrap.css({
marginLeft: sLeft.outerWidth(),
marginRight: sRight.outerWidth() + tool._outerWidth(),
width: cWidth - sLeft.outerWidth() - sRight.outerWidth()
});
}
} else {
sLeft.add(sRight).hide();
if (opts.toolPosition == 'left'){
tool.css({
left: 0,
right: ''
});
wrap.css({
marginLeft: tool._outerWidth(),
marginRight: 0,
width: cWidth
});
} else {
tool.css({
left: '',
right: 0
});
wrap.css({
marginLeft: 0,
marginRight: tool._outerWidth(),
width: cWidth
});
}
}
}
function addTools(container){
var opts = $.data(container, 'tabs').options;
var header = $(container).children('div.tabs-header');
if (opts.tools) {
if (typeof opts.tools == 'string'){
$(opts.tools).addClass('tabs-tool').appendTo(header);
$(opts.tools).show();
} else {
header.children('div.tabs-tool').remove();
var tools = $('
').appendTo(header);
var tr = tools.find('tr');
for(var i=0; i').appendTo(tr);
var tool = $('').appendTo(td);
tool[0].onclick = eval(opts.tools[i].handler || function(){});
tool.linkbutton($.extend({}, opts.tools[i], {
plain: true
}));
}
}
} else {
header.children('div.tabs-tool').remove();
}
}
function setSize(container, param) {
var state = $.data(container, 'tabs');
var opts = state.options;
var cc = $(container);
if (!opts.doSize){return}
if (param){
$.extend(opts, {
width: param.width,
height: param.height
});
}
cc._size(opts);
var header = cc.children('div.tabs-header');
var panels = cc.children('div.tabs-panels');
var wrap = header.find('div.tabs-wrap');
var ul = wrap.find('.tabs');
ul.children('li').removeClass('tabs-first tabs-last');
ul.children('li:first').addClass('tabs-first');
ul.children('li:last').addClass('tabs-last');
if (opts.tabPosition == 'left' || opts.tabPosition == 'right'){
header._outerWidth(opts.showHeader ? opts.headerWidth : 0);
panels._outerWidth(cc.width() - header.outerWidth());
header.add(panels)._size('height', isNaN(parseInt(opts.height)) ? '' : cc.height());
wrap._outerWidth(header.width());
ul._outerWidth(wrap.width()).css('height','');
} else {
header.children('div.tabs-scroller-left,div.tabs-scroller-right,div.tabs-tool:not(.tabs-tool-hidden)').css('display', opts.showHeader?'block':'none');
header._outerWidth(cc.width()).css('height','');
if (opts.showHeader){
header.css('background-color','');
wrap.css('height','');
} else {
header.css('background-color','transparent');
header._outerHeight(0);
wrap._outerHeight(0);
}
ul._outerHeight(opts.tabHeight).css('width','');
ul._outerHeight(ul.outerHeight()-ul.height()-1+opts.tabHeight).css('width','');
panels._size('height', isNaN(parseInt(opts.height)) ? '' : (cc.height()-header.outerHeight()));
panels._size('width', cc.width());
}
if (state.tabs.length){
var d1 = ul.outerWidth(true) - ul.width();
var li = ul.children('li:first');
var d2 = li.outerWidth(true) - li.width();
var hwidth = header.width() - header.children('.tabs-tool:not(.tabs-tool-hidden)')._outerWidth();
var justifiedWidth = Math.floor((hwidth-d1-d2*state.tabs.length)/state.tabs.length);
$.map(state.tabs, function(p){
setTabSize(p, (opts.justified && $.inArray(opts.tabPosition,['top','bottom'])>=0) ? justifiedWidth : undefined);
});
if (opts.justified && $.inArray(opts.tabPosition,['top','bottom'])>=0){
var deltaWidth = hwidth - d1 - getContentWidth(ul);
setTabSize(state.tabs[state.tabs.length-1], justifiedWidth+deltaWidth);
}
}
setScrollers(container);
function setTabSize(p, width){
var p_opts = p.panel('options');
var p_t = p_opts.tab.find('.tabs-inner');
var width = width ? width : (parseInt(p_opts.tabWidth||opts.tabWidth||undefined));
if (width){
p_t._outerWidth(width);
} else {
p_t.css('width', '');
}
p_t._outerHeight(opts.tabHeight);
p_t.css('lineHeight', p_t.height()+'px');
p_t.find('.easyui-fluid:visible').triggerHandler('_resize');
}
}
/**
* set selected tab panel size
*/
function setSelectedSize(container){
var opts = $.data(container, 'tabs').options;
var tab = getSelectedTab(container);
if (tab){
var panels = $(container).children('div.tabs-panels');
var width = opts.width=='auto' ? 'auto' : panels.width();
var height = opts.height=='auto' ? 'auto' : panels.height();
tab.panel('resize', {
width: width,
height: height
});
}
}
/**
* wrap the tabs header and body
*/
function wrapTabs(container) {
var tabs = $.data(container, 'tabs').tabs;
var cc = $(container).addClass('tabs-container');
var panels = $('').insertBefore(cc);
cc.children('div').each(function(){
panels[0].appendChild(this);
});
cc[0].appendChild(panels[0]);
$('').prependTo(container);
cc.children('div.tabs-panels').children('div').each(function(i){
var opts = $.extend({}, $.parser.parseOptions(this), {
disabled: ($(this).attr('disabled') ? true : undefined),
selected: ($(this).attr('selected') ? true : undefined)
});
createTab(container, opts, $(this));
});
// cc.children('div.tabs-header').find('.tabs-scroller-left, .tabs-scroller-right').hover(
// function(){$(this).addClass('tabs-scroller-over');},
// function(){$(this).removeClass('tabs-scroller-over');}
// );
cc.children('div.tabs-header').find('.tabs-scroller-left, .tabs-scroller-right')._bind('mouseenter', function(){
$(this).addClass('tabs-scroller-over');
})._bind('mouseleave', function(){
$(this).removeClass('tabs-scroller-over');
});
cc._bind('_resize', function(e,force){
if ($(this).hasClass('easyui-fluid') || force){
setSize(container);
setSelectedSize(container);
}
return false;
});
}
function bindEvents(container){
var state = $.data(container, 'tabs')
var opts = state.options;
$(container).children('div.tabs-header')._unbind()._bind('click', function(e){
if ($(e.target).hasClass('tabs-scroller-left')){
$(container).tabs('scrollBy', -opts.scrollIncrement);
} else if ($(e.target).hasClass('tabs-scroller-right')){
$(container).tabs('scrollBy', opts.scrollIncrement);
} else {
var li = $(e.target).closest('li');
if (li.hasClass('tabs-disabled')){return false;}
var a = $(e.target).closest('.tabs-close');
if (a.length){
closeTab(container, getLiIndex(li));
} else if (li.length){
// selectTab(container, getLiIndex(li));
var index = getLiIndex(li);
var popts = state.tabs[index].panel('options');
if (popts.collapsible){
popts.closed ? selectTab(container, index) : unselectTab(container, index);
} else {
selectTab(container, index);
}
}
return false;
}
})._bind('contextmenu', function(e){
var li = $(e.target).closest('li');
if (li.hasClass('tabs-disabled')){return;}
if (li.length){
opts.onContextMenu.call(container, e, li.find('span.tabs-title').html(), getLiIndex(li));
}
});
function getLiIndex(li){
var index = 0;
li.parent().children('li').each(function(i){
if (li[0] == this){
index = i;
return false;
}
});
return index;
}
}
function setProperties(container){
var opts = $.data(container, 'tabs').options;
var header = $(container).children('div.tabs-header');
var panels = $(container).children('div.tabs-panels');
header.removeClass('tabs-header-top tabs-header-bottom tabs-header-left tabs-header-right');
panels.removeClass('tabs-panels-top tabs-panels-bottom tabs-panels-left tabs-panels-right');
if (opts.tabPosition == 'top'){
header.insertBefore(panels);
} else if (opts.tabPosition == 'bottom'){
header.insertAfter(panels);
header.addClass('tabs-header-bottom');
panels.addClass('tabs-panels-top');
} else if (opts.tabPosition == 'left'){
header.addClass('tabs-header-left');
panels.addClass('tabs-panels-right');
} else if (opts.tabPosition == 'right'){
header.addClass('tabs-header-right');
panels.addClass('tabs-panels-left');
}
if (opts.plain == true) {
header.addClass('tabs-header-plain');
} else {
header.removeClass('tabs-header-plain');
}
header.removeClass('tabs-header-narrow').addClass(opts.narrow?'tabs-header-narrow':'');
var tabs = header.find('.tabs');
tabs.removeClass('tabs-pill').addClass(opts.pill?'tabs-pill':'');
tabs.removeClass('tabs-narrow').addClass(opts.narrow?'tabs-narrow':'');
tabs.removeClass('tabs-justified').addClass(opts.justified?'tabs-justified':'');
if (opts.border == true){
header.removeClass('tabs-header-noborder');
panels.removeClass('tabs-panels-noborder');
} else {
header.addClass('tabs-header-noborder');
panels.addClass('tabs-panels-noborder');
}
opts.doSize = true;
}
function createTab(container, options, pp) {
options = options || {};
var state = $.data(container, 'tabs');
var tabs = state.tabs;
if (options.index == undefined || options.index > tabs.length){options.index = tabs.length}
if (options.index < 0){options.index = 0}
var ul = $(container).children('div.tabs-header').find('ul.tabs');
var panels = $(container).children('div.tabs-panels');
var tab = $(
'' +
// '' +
'' +
'' +
'' +
'' +
'');
if (!pp){pp = $('');}
if (options.index >= tabs.length){
tab.appendTo(ul);
pp.appendTo(panels);
tabs.push(pp);
} else {
tab.insertBefore(ul.children('li:eq('+options.index+')'));
pp.insertBefore(panels.children('div.panel:eq('+options.index+')'));
tabs.splice(options.index, 0, pp);
}
// create panel
pp.panel($.extend({}, options, {
tab: tab,
border: false,
noheader: true,
closed: true,
doSize: false,
iconCls: (options.icon ? options.icon : undefined),
onLoad: function(){
if (options.onLoad){
options.onLoad.apply(this, arguments);
}
state.options.onLoad.call(container, $(this));
},
onBeforeOpen: function(){
if (options.onBeforeOpen){
if (options.onBeforeOpen.call(this) == false){return false;}
}
var p = $(container).tabs('getSelected');
if (p){
if (p[0] != this){
$(container).tabs('unselect', getTabIndex(container, p));
p = $(container).tabs('getSelected');
if (p){
return false;
}
} else {
setSelectedSize(container);
return false;
}
}
var popts = $(this).panel('options');
popts.tab.addClass('tabs-selected');
// scroll the tab to center position if required.
var wrap = $(container).find('>div.tabs-header>div.tabs-wrap');
var left = popts.tab.position().left;
var right = left + popts.tab.outerWidth();
if (left < 0 || right > wrap.width()){
var deltaX = left - (wrap.width()-popts.tab.width()) / 2;
$(container).tabs('scrollBy', deltaX);
} else {
$(container).tabs('scrollBy', 0);
}
var panel = $(this).panel('panel');
panel.css('display','block');
setSelectedSize(container);
panel.css('display','none');
},
onOpen: function(){
if (options.onOpen){
options.onOpen.call(this);
}
var popts = $(this).panel('options');
var index = getTabIndex(container, this);
// state.selectHis.push(popts.title);
state.selectHis.push(index);
state.options.onSelect.call(container, popts.title, index);
},
onBeforeClose: function(){
if (options.onBeforeClose){
if (options.onBeforeClose.call(this) == false){return false;}
}
$(this).panel('options').tab.removeClass('tabs-selected');
},
onClose: function(){
if (options.onClose){
options.onClose.call(this);
}
var popts = $(this).panel('options');
state.options.onUnselect.call(container, popts.title, getTabIndex(container, this));
}
}));
// only update the tab header
$(container).tabs('update', {
tab: pp,
options: pp.panel('options'),
type: 'header'
});
}
function addTab(container, options) {
var state = $.data(container, 'tabs');
var opts = state.options;
if (options.selected == undefined) options.selected = true;
createTab(container, options);
opts.onAdd.call(container, options.title, options.index);
if (options.selected){
selectTab(container, options.index); // select the added tab panel
}
}
/**
* update tab panel, param has following properties:
* tab: the tab panel to be updated
* options: the tab panel options
* type: the update type, possible values are: 'header','body','all'
*/
function updateTab(container, param){
param.type = param.type || 'all';
var selectHis = $.data(container, 'tabs').selectHis;
var pp = param.tab; // the tab panel
var opts = pp.panel('options'); // get the tab panel options
var oldTitle = opts.title;
$.extend(opts, param.options, {
iconCls: (param.options.icon ? param.options.icon : undefined)
});
if (param.type == 'all' || param.type == 'body'){
pp.panel();
}
if (param.type == 'all' || param.type == 'header'){
var tab = opts.tab;
if (opts.header){
tab.find('.tabs-inner').html($(opts.header));
} else {
var s_title = tab.find('span.tabs-title');
var s_icon = tab.find('span.tabs-icon');
s_title.html(opts.title);
s_icon.attr('class', 'tabs-icon');
tab.find('.tabs-close').remove();
if (opts.closable){
s_title.addClass('tabs-closable');
// $('').appendTo(tab);
$('').appendTo(tab);
} else{
s_title.removeClass('tabs-closable');
}
if (opts.iconCls){
s_title.addClass('tabs-with-icon');
s_icon.addClass(opts.iconCls);
} else {
s_title.removeClass('tabs-with-icon');
}
if (opts.tools){
var p_tool = tab.find('span.tabs-p-tool');
if (!p_tool.length){
var p_tool = $('').insertAfter(tab.find('.tabs-inner'));
}
if ($.isArray(opts.tools)){
p_tool.empty();
for(var i=0; i').appendTo(p_tool);
t.addClass(opts.tools[i].iconCls);
if (opts.tools[i].handler){
t._bind('click', {handler:opts.tools[i].handler}, function(e){
if ($(this).parents('li').hasClass('tabs-disabled')){return;}
e.data.handler.call(this);
});
}
}
} else {
$(opts.tools).children().appendTo(p_tool);
}
var pr = p_tool.children().length * 12;
if (opts.closable) {
pr += 8;
p_tool.css('right', '');
} else {
pr -= 3;
p_tool.css('right','5px');
}
s_title.css('padding-right', pr+'px');
} else {
tab.find('span.tabs-p-tool').remove();
s_title.css('padding-right', '');
}
}
// if (oldTitle != opts.title){
// for(var i=0; i index ? tindex-1 : tindex);
}
}
state.selectHis = his;
var selected = $(container).tabs('getSelected');
if (!selected && his.length){
index = state.selectHis.pop();
$(container).tabs('select', index);
}
// for(var i=0; i=0 && which < tabs.length){
tab = tabs[which];
if (removeit){
tabs.splice(which, 1);
}
}
} else {
var tmp = $('');
for(var i=0; i.tabs-header>.tabs-tool');
if (visible){
tool.removeClass('tabs-tool-hidden').show();
} else {
tool.addClass('tabs-tool-hidden').hide();
}
$(container).tabs('resize').tabs('scrollBy', 0);
}
$.fn.tabs = function(options, param){
if (typeof options == 'string') {
return $.fn.tabs.methods[options](this, param);
}
options = options || {};
return this.each(function(){
var state = $.data(this, 'tabs');
if (state) {
$.extend(state.options, options);
} else {
$.data(this, 'tabs', {
options: $.extend({},$.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
tabs: [],
selectHis: []
});
wrapTabs(this);
}
addTools(this);
setProperties(this);
setSize(this);
bindEvents(this);
doFirstSelect(this);
});
};
$.fn.tabs.methods = {
options: function(jq){
var cc = jq[0];
var opts = $.data(cc, 'tabs').options;
var s = getSelectedTab(cc);
opts.selected = s ? getTabIndex(cc, s) : -1;
return opts;
},
tabs: function(jq){
return $.data(jq[0], 'tabs').tabs;
},
resize: function(jq, param){
return jq.each(function(){
setSize(this, param);
setSelectedSize(this);
});
},
add: function(jq, options){
return jq.each(function(){
addTab(this, options);
});
},
close: function(jq, which){
return jq.each(function(){
closeTab(this, which);
});
},
getTab: function(jq, which){
return getTab(jq[0], which);
},
getTabIndex: function(jq, tab){
return getTabIndex(jq[0], tab);
},
getSelected: function(jq){
return getSelectedTab(jq[0]);
},
select: function(jq, which){
return jq.each(function(){
selectTab(this, which);
});
},
unselect: function(jq, which){
return jq.each(function(){
unselectTab(this, which);
});
},
exists: function(jq, which){
return exists(jq[0], which);
},
update: function(jq, options){
return jq.each(function(){
updateTab(this, options);
});
},
enableTab: function(jq, which){
return jq.each(function(){
var opts = $(this).tabs('getTab', which).panel('options');
opts.tab.removeClass('tabs-disabled');
opts.disabled = false;
});
},
disableTab: function(jq, which){
return jq.each(function(){
var opts = $(this).tabs('getTab', which).panel('options');
opts.tab.addClass('tabs-disabled');
opts.disabled = true;
});
},
showHeader: function(jq){
return jq.each(function(){
showHeader(this, true);
});
},
hideHeader: function(jq){
return jq.each(function(){
showHeader(this, false);
});
},
showTool: function(jq){
return jq.each(function(){
showTool(this, true);
});
},
hideTool: function(jq){
return jq.each(function(){
showTool(this, false);
});
},
scrollBy: function(jq, deltaX){ // scroll the tab header by the specified amount of pixels
return jq.each(function(){
var opts = $(this).tabs('options');
var wrap = $(this).find('>div.tabs-header>div.tabs-wrap');
var pos = Math.min(wrap._scrollLeft() + deltaX, getMaxScrollWidth());
wrap.animate({scrollLeft: pos}, opts.scrollDuration);
function getMaxScrollWidth(){
var w = 0;
var ul = wrap.children('ul');
ul.children('li').each(function(){
w += $(this).outerWidth(true);
});
return w - wrap.width() + (ul.outerWidth() - ul.width());
}
});
}
};
$.fn.tabs.parseOptions = function(target){
return $.extend({}, $.parser.parseOptions(target, [
'tools','toolPosition','tabPosition',
{fit:'boolean',border:'boolean',plain:'boolean'},
{headerWidth:'number',tabWidth:'number',tabHeight:'number',selected:'number'},
{showHeader:'boolean',justified:'boolean',narrow:'boolean',pill:'boolean'}
]));
};
$.fn.tabs.defaults = {
width: 'auto',
height: 'auto',
headerWidth: 150, // the tab header width, it is valid only when tabPosition set to 'left' or 'right'
tabWidth: 'auto', // the tab width
// tabHeight: 27, // the tab height
tabHeight: 32, // the tab height
selected: 0, // the initialized selected tab index
showHeader: true,
plain: false,
fit: false,
border: true,
justified: false,
narrow: false,
pill: false,
tools: null,
toolPosition: 'right', // left,right,top,bottom
tabPosition: 'top', // possible values: top,bottom
scrollIncrement: 100,
scrollDuration: 400,
onLoad: function(panel){},
onSelect: function(title, index){},
onUnselect: function(title, index){},
onBeforeClose: function(title, index){},
onClose: function(title, index){},
onAdd: function(title, index){},
onUpdate: function(title, index){},
onContextMenu: function(e, title, index){}
};
})(jQuery);