Print Page - Choose tab index while adding new tab

Title: Choose tab index while adding new tab
Post by: leela on November 12, 2014, 08:18:17 AM

Hi,

Is there a way I can define the index of the tab, when adding it, so that I can control the position/sequence of the newly added tab

Example: Lets I have 2 tabs added already tab X and tab Y.

I need to add a new tab Z in between the 2 existing tabs X and Y

Right now it always goes after tab Y

Please advise.

Thanks,
Leela.

Title: Re: Choose tab index while adding new tab
Post by: Opan Mustopah on November 12, 2014, 08:30:12 PM

did you already try onAdd event? with that, i think you can get the tab index.

Title: Re: Choose tab index while adding new tab
Post by: aswzen on November 12, 2014, 08:44:31 PM

i can't figure out how to do that...
and i find there is no Drag and Drop feature on tabs , too bad

maybe stworthy could solve your problem..

this is my best..just a little bit weird..

take a look here...
http://jsfiddle.net/aswzen/jfqL65o6/

Title: Re: Choose tab index while adding new tab
Post by: Opan Mustopah on November 12, 2014, 10:33:04 PM

yes, actually i wait for that feature too sir. i hope it included in next release.

Title: Re: Choose tab index while adding new tab
Post by: stworthy on November 13, 2014, 08:19:47 AM

Please extend the 'move' method to achieve this functionality.

Code:

$.extend($.fn.tabs.methods, {
	move: function(jq, param){
		return jq.each(function(){
			moveTab(this, param);
			function moveTab(target, param){
				var state = $.data(target, 'tabs');
				var opts = state.options;
				var tabs = state.tabs;

				if (param.index < 0){param.index = 0}
				if (param.index > tabs.length){param.index = tabs.length}

				var ul = $(target).children('div.tabs-header').find('ul.tabs');
				var li = $(param.tab.panel('options').tab);
				if (param.index >= tabs.length){
					var tabIndex = $(target).tabs('getTabIndex', param.tab);
					tabs.splice(tabIndex, 1);
					tabs.push(param.tab);
					li.appendTo(ul);
				} else {
					var pp = [];
					$.map(tabs, function(tab, index){
						if (index == param.index){
							pp.push(param.tab);
						} 
						if (tab[0] != param.tab[0]){
							pp.push(tab);
						}
					});
					state.tabs = pp;
					li.insertBefore(ul.children('li:eq('+param.index+')'));
				}
			}
		});
	}
})

Usage example:

Code:

var t = $('#tt');
var tab = t.tabs('getTab', 2);  // get the tab panel
t.tabs('move', {
  tab: tab,
  index: 1  // move to index 1
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: leela on November 12, 2014, 08:18:17 AM