Print Page - Dynamic Icons on Tabs

Title: Dynamic Icons on Tabs
Post by: stollar on October 31, 2015, 03:09:42 AM

I want to programatically add an icon to a tab - the tab contains data which needs saving and once the data is dirty I want to place a SAVE icon on the tab.

Title: Re: Dynamic Icons on Tabs
Post by: stworthy on October 31, 2015, 05:23:42 AM

Please call 'update' method to update a tab panel. The code below shows how to update the icon on a selected tab panel.

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
  tab: p,
  type: 'header',
  options: {
    iconCls: 'icon-ok'
  }
})

Title: Re: Dynamic Icons on Tabs
Post by: stollar on November 01, 2015, 02:42:48 AM

Can I add an event handler to the icon at the same time? Something like: (this didn't work out)

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
    tab: p,
    type: 'all',
    options: {
        iconCls: 'icon-save',
        handler:function() {
            console.log('SAVE');
        }
    }
});

Title: Re: Dynamic Icons on Tabs
Post by: stworthy on November 01, 2015, 03:13:51 AM

No, you can not do that. Please set the 'tools' instead.

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
  tab: p,
  type: 'header',
  options: {
    iconCls: 'icon-ok',
    tools:[{
      iconCls:'icon-mini-refresh',
      handler: function(){
        alert('refresh')
      }
    }]
  }
})

Title: Re: Dynamic Icons on Tabs
Post by: stollar on November 02, 2015, 08:13:20 AM

This worked really well and when data in the tab changes I can add the SAVE icon which fires the function when clicked. But, here's my problem: I need to know the TAB number which holds the pressed icon. Bearing in mind that it quite possibly won't be the SELECTED tab. How can I get the Tab number inside the function? I also need to keep in mind that some tabs may have been closed which may mess with any saved values.

Any suggestions?

Code:

var t = $('#tt');
var p = t.tabs('getSelected');
t.tabs('update', {
  tab: p,
  type: 'header',
  options: {
    iconCls: 'icon-ok',
    tools:[{
      iconCls:'icon-mini-refresh',
      handler: function(){
        alert('SAVE TAB #'+tabNo);
      }
    }]
  }
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: stollar on October 31, 2015, 03:09:42 AM