JQuery UI:禁用手风琴选项卡？

Question

我有一个JQuery UI手风琴,它包含用户工作流程的不同部分.我想禁用用户尚未到达的手风琴"标签".(因此,如果用户尚未登录,则他还无法发布内容等).然后,当用户完成必要的步骤时,将启用更多选项卡.

有没有办法做到这一点？这不起作用,即使是防止任何标签更改的方法:

$("#accordion").accordion({
    changestart: function(event, ui) {
        return false;
    }
});

Answer 1

您应该为要禁用/启用的每个标题元素(即"<h3>")添加/删除"ui-state-disabled"类.然后使用:

$( "#accordion" ).on( "accordionbeforeactivate", function (){
  return ! arguments[1].newHeader.hasClass( "ui-state-disabled" );
})

要以dyanamically方式添加/删除类,请使用:

$( "selector" ).addClass( "ui-state-disabled" );
$( "selector" ).removeClass( "ui-state-disabled" );

您可以为每个标题元素添加一个含义"id"属性,以简化"选择器"部分.例如,用户应沿着工作流程遍历的每个步骤的"步骤-1","步骤2","步骤n".

如果您对要禁用的选项卡的位置持肯定态度,可以尝试以下操作:

// 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" );

另请注意,使用"ui-state-disabled"实际上是有意义的,因为它会使标题变灰(或者任何主题使得禁用的东西看起来像).

另请注意,如果您动态禁用的选项卡当前处于活动状态,则它不会执行任何特殊操作(即它不会折叠或激活另一个选项卡).您可以添加额外的逻辑来激活默认选项卡或执行其他操作.

Answer 2

这似乎应该更容易.但这是一个解决方案:

我们需要跟踪的第一件事是哪些面板可以合法打开:

// 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];

然后,当你打电话给你的手风琴时,就这样做

$('#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');
        }
    }
});

那么,如果您想允许用户访问第三个面板,您可以:

available_indexes.push(2);