Question

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

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

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

Answer 1

您应该为要禁用/启用的每个标题元素（即“＆lt; h3＆gt;”）添加/删除“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').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);

Answer 3

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

Answer 4

这对我有用：

$("#accordionTabToDisable").click(function(){
  $("#acordion" ).accordion( "option", "active",0); //maybe this line could be optional
  return false;
});

Answer 5

迭戈·奥古斯托·莫利纳（Diego Augusto Molina）钉了它。 ui-state-disabled类是要走的路：http://api.jqueryui.com/theming/css-framework/

考虑允许用户返回的这段代码，但不要转到下一个手风琴选项卡。在正确验证后，我们只能以编程方式执行此操作：

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

Answer 6

没有一个解决方法对我有用。如果支持开箱即可，它会更好，但这是我使用的解决方法。我将事件绑定到自定义事件并添加了我自己的单击事件，如果允许导航，它可以执行任何逻辑并触发customClick事件。

JS：

$('#accordion').accordion({ 
  event: 'customClick'
});

$('#accordion > .ui-accordion-header').click(function() {
  if(confirm ("Is this allowed?")){
    $(this).trigger('customClick');
  }
});

或者在这里查看工作jsfiddle：http://jsfiddle.net/hWTcw/

Answer 7

可以轻松禁用该标签，如下所示：

<p:tab title="First Tab Title" **disabled=”true”**>

要启用它，您可以使用javascript再次启用它。

Answer 8

一个非常简单的解决方案是按内容抓取标题（<h3>）：

$("h3:contains('panel name')").toggleClass('ui-state-disabled');

这样你可以用相同的代码启用/禁用或者将面板全部隐藏起来：

$("h3:contains('panel name')").toggle();

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

8 个答案: