EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on June 26, 2014, 04:44:03 PM

Title: disabling tab user click
Post by: devnull on June 26, 2014, 04:44:03 PM

I am selecting the tabs from another object and need to disable the tab click event so that the user can not change tabs by clicking on them, but the other object that controls the tabs can still work.

I have tried to unbind the tab's click even but that does not work:

Code:

$('.tabs-inner').unbind();

How can I disable the click event whilst still allowing the tabs to be selected programatically ?

Title: Re: disabling tab user click
Post by: jarry on June 26, 2014, 06:39:46 PM

Please call 'disableTab' method to disable a special tab panel. When a tab panel is disabled, users can not click to select it but this tab panel still can be selected by calling 'select' method.

Code:

var t = $('#tt');  // the tabs object
t.tabs('disableTab', index);  // disable the special tab panel
t.tabs('select', index);  // select this tab panel again

Title: Re: disabling tab user click
Post by: devnull on June 26, 2014, 06:42:15 PM

Thanks, but I have already tried that, the tab get greyed out, I will want it to appear to look normal and not look like it is disabled.

How can I unbind the click event from the tab, as this will solve the problem without having to hack the CSS.

Title: Re: disabling tab user click
Post by: jarry on June 26, 2014, 06:50:29 PM

Please add the style below to the page to prevent from greying the tab title.

Code:

<style>
.tabs-disabled{
  opacity:1.0;
}
</style>

If you do not want the user to select all the tabs, you can hide the tabs header.

Code:

$('#tt').tabs({
  showHeader:false
});