Print Page - dynamic change of tab panel title

Title: dynamic change of tab panel title
Post by: Stefan B. on April 17, 2014, 07:07:44 AM

I would change a tab panel title dynamic. How can i do this?

The following code is not working:

Code:

var tab = $(_tabId).tabs('getTab', 2);
tab.panel('setTitle', 'testtitle');

Title: Re: dynamic change of tab panel title
Post by: stworthy on April 17, 2014, 07:18:27 AM

Please use 'update' method instead.

Code:

var tab = $(_tabId).tabs('getTab', 2);
$(_tabId).tabs('update', {
  tab: tab,
  options: {
    title: 'testtitle'
  }
});

Title: Re: dynamic change of tab panel title
Post by: mshaffer on December 15, 2016, 08:50:55 PM

Yes, it seems like setTitle should have worked, but it doesn't ...

Code:

function setTabTitle(selector,index,newTitle)
	{
	var tab = $(selector).tabs('getTab', index);
	$(selector).tabs('update', {
		  tab: tab,
		  options: {
			title: newTitle
		  }
		});
	}

Usage:

Code:

setTabTitle("#tt",2,"testtitle");

Could easily be updated into the system as a new method...

Title: Re: dynamic change of tab panel title
Post by: mshaffer on December 15, 2016, 09:02:40 PM

It seems like if I create tab panel via HTML I can place image elements in the title...

https://assets.mypatentideas.com/images/loading/decagon.gif

Code:

<div id="idea-tab-subset" class="ideaTabs" title=" <IMG class='tabimage' src='{ASSETS}/images/loading/decagon.gif' height=20 /> Subset Analysis" data-options="disabled:false" style="padding:10px; display:none;">

How do I access the element via jquery to show/hide or change attribute source?

Notice the class "tabimage" ... does easyui append title using $(str)?

Title: Re: dynamic change of tab panel title
Post by: stworthy on December 15, 2016, 11:52:05 PM

Please use this code to change the 'src' attribute of the image.

Code:

var p = $('#tt').tabs('getTab',0);
var img = p.panel('options').tab.find('.tabimage');
img.attr('src', ...);

The simplest way to set the tab title is to call the 'update' method, please try this code:

Code:

var tab = $('#tt').tabs('getTab', 0);
$('#tt').tabs('update', {
  tab: tab,
  type: 'header',
  options: {
    title: '<img src="..."/>testtitle'
  }
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Stefan B. on April 17, 2014, 07:07:44 AM