jQuery UI Accordion disable tab
How can i disable certain tabs in jQuery UI accordion()
so user cannot click to open the content of the 开发者_StackOverflowtab. Let's say i want to disabled the second tab in the below example.
http://jsfiddle.net/3JAkv/8/
Maybe i'm wrong,
but if i add the class "ui-state-disabled" to the desired header, the header / tab is no longer select-able.
I'm working with:
jquery-ui-1.10.3 and jquery-1.7.1
There is no bundled way to do this in 1.8.x.
In version 1.9 (beta release is available as of this writing) the beforeActivate
event looks like you can handle and return false
to prevent the activation from happening. Assuming you have set .data('enabled', false)
on the header of the disabled section you could do something like the following in 1.9:
$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
if(ui.newHeader and !ui.newHeader.data('enabled')) {
return false;
}
// fall through activation happens as normal
});
I'm pasting a JSFriddle with an example of a controlled navigation accordion. Meaning, user can't skip steps or navigate the accordion freely, but only by hard coded buttons that can be activated or placed by jQuery. Hope it helps. https://jsfiddle.net/moriz/rvuwze6s/
Basically the js goes like this:
$(function() {
$("#accordion").accordion({
disabled: true
});
});
function operateAccordion(tabNumber) {
$("#accordion").accordion("option", "active", tabNumber);
}
And the buttons should go like this:
<a href="javascript:operateAccordion(1)">Next step</a>
Take into account accordion parts are numbered from 0 onwards. So this button can be used to go back or foward in the navigation.
精彩评论