What's the "best" way to handle dynamic enabling/disabling of tabs?
Hey All,
I've got some code working that enables/disables some tabs in an
interface I'm working on, and I'm just wondering what's the cleanest/
best way to handle this kind of thing?
Some background: I'm working on a (tabbed) search interface, which has
4 tabs:
Search / Advanced / Results / Actions
Results and Actions need to be "disabled" until the user has actually
searched with some parameters and found some results. At that point, I
want the results + actions tabs "enabled" and the results tab will be
selected. Here's the snippet of code that handles this:
$(document).ready(function(){
$(".ui-tabs-nav").tabs(); // Tabs
as_results_tab_select(); // Change to results tab if there are
results
});
function as_results_tab_select() {
if($('.as_pager_container').html()) {
$('#as_results_tab_button').trigger('click');
$('#as_actions_tab_button').parent().removeClass('ui-tabs-
disabled');
} else {
$('#as_results_tab_button').parent().addClass('ui-tabs-disabled');
$('#as_actions_tab_button').parent().addClass('ui-tabs-disabled');
}
}
Notes
".as_pager_container" will only have content if there are results.
Here is some sample html for the tabs:
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#search_options"><span>Search</
span></a></li>
<li><a href="#search_options_advanced"><span>Advanced</span></a></li>
<li><a id="as_results_tab_button"
href="#as_results_tab"><span>Results</span></a></li>
<li><a id="as_actions_tab_button"
href="#as_actions_tab"><span>Actions</span></a></li>
</ul>
And a typical tab panel looks like this:
<div id="as_results_tab" class="ui-tabs-panel">
{$results}
</div>
<div id="as_actions_tab" class="ui-tabs-panel">
{$actions}
</div>
Your input and recommendations are most welcome!
// S