Print Page - Disable Tab

There are no methods to disable a tab panel, but extending a new method to do this is available. The code below demonstrate a simple way to implement the 'disableTab' method.

Code:

$.extend($.fn.tabs.methods,{
	disableTab: function(jq, which){
		return jq.each(function(){
			var tab = $(this).tabs('getTab', which).panel('options').tab;
			tab.addClass('tabs-disabled').unbind('.tabs');
			tab.find('a.tabs-close').unbind('.tabs');
		});
	}
});

Add a new CSS class named 'tabs-disabled' for the disabled tab panel.

Code:

<style>
	.tabs li.tabs-disabled a,.tabs li.tabs-disabled a:hover{
		background:#ccc;
	}
</style>

Now call 'disableTab' method to disable the second tab panel:

Code:

$('#tt').tabs('disableTab', 1);  // the tab panel index start with 0

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: WeberJ65 on June 18, 2012, 02:07:35 AM