Javascript JQuery UI：禁用手风琴选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2754931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI: Disable accordion tab?
提问by Nick Heiner
I have a JQuery UI accordion that contains different parts of the user workflow. I would like to disable accordion "tabs" that the user hasn't reached yet. (So if the user hasn't signed in yet, he can't yet publish content, etc.) Then, as the user completes the necessary steps, more tabs will become enabled.
我有一个 JQuery UI 手风琴，其中包含用户工作流的不同部分。我想禁用用户尚未到达的手风琴“标签”。（因此，如果用户尚未登录，则他还不能发布内容等）然后，随着用户完成必要的步骤，将启用更多选项卡。
Is there a way to do this? This doesn't work, even as a way to prevent any tabs from changing:
有没有办法做到这一点？这不起作用，即使作为一种防止任何选项卡更改的方法：
$("#accordion").accordion({
changestart: function(event, ui) {
return false;
}
});
回答by Diego Augusto Molina
You should add/remove the class "ui-state-disabled" to each header element (i.e. "<h3>") you want to disable/enable. Then use:
您应该向要禁用/启用的每个标题元素（即“<h3>”）添加/删除类“ui-state-disabled”。然后使用：
$( "#accordion" ).on( "accordionbeforeactivate", function (){
return ! arguments[1].newHeader.hasClass( "ui-state-disabled" );
})
To add/remove a class dyanamically, use:
要动态添加/删除类，请使用：
$( "selector" ).addClass( "ui-state-disabled" );
$( "selector" ).removeClass( "ui-state-disabled" );
You can add a meaningul "id" attribute to each header element to simplify the "selector" part. For example, "step-1", "step-2", "step-n" for each step the user should traverse along the workflow.
您可以为每个标题元素添加一个有意义的“id”属性，以简化“选择器”部分。例如，“step-1”、“step-2”、“step-n”代表用户应该沿着工作流遍历的每个步骤。
You can try the following if you are positive about the position the tab to be disable has:
如果您对要禁用的选项卡的位置持肯定态度，则可以尝试以下操作：
// Disable the first tab
$( "#accordion > h3:first-child" ).addClass( "ui-state-disabled" );
// Make sure the fourth tab is enabled
$( $( "#accordion > h3" )[3] ).removeClass( "ui-state-disabled" );
Also note that using "ui-state-disabled" is actually meaningful because it will render the header grayed (or whatever your theme makes disabled things look like).
另请注意，使用“ui-state-disabled”实际上是有意义的，因为它会使标题变灰（或任何您的主题使禁用的东西看起来像）。
Another note, if the tab you are dynamically disabling is currently active, it won't do anything special (i.e. it won't collapse or activate another tab). You can add extra logic to activate a default tab or do anything else.
另请注意，如果您动态禁用的选项卡当前处于活动状态，则它不会执行任何特殊操作（即不会折叠或激活另一个选项卡）。您可以添加额外的逻辑来激活默认选项卡或执行其他任何操作。
回答by artlung
This seems like it should be easier. But here's a solution:
这似乎应该更容易。但这里有一个解决方案：
The first thing we need to keep track of is which panels can be legally opened:
我们需要跟踪的第一件事是哪些面板可以合法打开：
// Keep an array of the indexes that the user can open.
// [0,1] would allow ONLY the first and second panels
// to be opened
var available_indexes = [0,1];
Then, when you call your accordion, do it like this
然后，当你打电话给你的手风琴时，这样做
$('#accordion').accordion({
header: 'h3',
change: function(event, ui) {
var newIndex = $(ui.newHeader).index('h3');
if (jQuery.inArray(newIndex, available_indexes) == -1) {
var oldIndex = $(ui.oldHeader).index('h3');
$(this).accordion( "activate" , oldIndex );
alert('That panel is not yet available');
}
}
});
So then, if you want to allow the user to access the third panel, you would do:
那么，如果您想允许用户访问第三个面板，您可以这样做：
available_indexes.push(2);
回答by Sean Newton
$("#service_options_available h3").click(
function(e) {
if($(this).hasClass("empty")) {
e.stopImmediatePropagation();
return false;
}
}
);
$("#service_options_available").accordion({
autoHeight: false,
collapsible: true,
active: false,
header: 'h3',
changestart: function(event, ui) {
if($(ui.newHeader).attr("id") != null) {
alert($(ui.newHeader).attr("id"));
}
}
});
回答by Dago Jobs
This has worked for me:
这对我有用：
$("#accordionTabToDisable").click(function(){
$("#acordion" ).accordion( "option", "active",0); //maybe this line could be optional
return false;
});
回答by Marquinho Peli
Diego Augusto Molina nailed it. ui-state-disabled class is the way to go: http://api.jqueryui.com/theming/css-framework/
迭戈·奥古斯托·莫利纳 (Diego Augusto Molina) 做到了。ui-state-disabled 类是要走的路：http: //api.jqueryui.com/theming/css-framework/
Consider this piece of code that allows user go back, but not go to next accordion tab. We do it only programmatically, after proper validation:
考虑这段代码，它允许用户返回，但不能转到下一个手风琴选项卡。在适当的验证后，我们仅以编程方式执行此操作：
function disableAccordionNextTabs () {
var $accordion = $(".accordion");
var active = $accordion.accordion('option', 'active');
var $headers = $accordion.find($accordion.accordion('option', 'header'));
$headers.addClass('ui-state-disabled');
for (var i = active; i >= 0; i--) {
$headers.eq(i).removeClass('ui-state-disabled');
}
}
回答by atulsri
The tab can be easily disable as below:
该选项卡可以轻松禁用，如下所示：
<p:tab title="First Tab Title" **disabled=”true”**>
To enable it you can use javascript to enable it again.
要启用它，您可以使用 javascript 再次启用它。
回答by grashopr
A pretty easy solution is grabbing the header (<h3>) by content:
一个非常简单的解决方案是<h3>按内容抓取标题 ( )：
$("h3:contains('panel name')").toggleClass('ui-state-disabled');
That way you can enable/disable with the same code or hide the panel all together with:
这样您就可以使用相同的代码启用/禁用或隐藏面板：
$("h3:contains('panel name')").toggle();
回答by Sander Ravenhorst
None of the workarounds really worked for me. Would've been alot nicer if it was supported out of the box ofcourse, but here's the workaround i used. I bound the event to a custom event and added my own click event which can do whatever logic and trigger the customClick event if the navigation is allowed.
没有一种解决方法对我有用。如果它是开箱即用的当然会更好，但这是我使用的解决方法。我将事件绑定到自定义事件并添加了我自己的点击事件，该事件可以执行任何逻辑并在允许导航时触发 customClick 事件。
JS:
JS：
$('#accordion').accordion({
event: 'customClick'
});
$('#accordion > .ui-accordion-header').click(function() {
if(confirm ("Is this allowed?")){
$(this).trigger('customClick');
}
});
Or check out the working jsfiddle here: http://jsfiddle.net/hWTcw/
或者在这里查看工作 jsfiddle：http: //jsfiddle.net/hWTcw/
