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

Question

我有一个包含用户工作流程不同部分的JQuery UI手风琴。我想要禁用用户尚未到达的折叠板块。 (因此，如果用户尚未登录，则无法发布内容等) 然后，随着用户完成必要的步骤，更多的选项卡将变为可用状态。 有没有一种方法可以实现这个功能？即使作为防止任何选项卡发生变化的方法，以下代码也是行不通的：

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

- Nick Heiner

Answer 1

你需要为每个你想要禁用/启用的标题元素（即"<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" );

你可以给每个标题元素添加有意义的“id”属性，以简化“选择器”部分。例如，“step-1”、“step-2”、“step-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”实际上是有意义的，因为它会使标题呈灰色（或者根据您的主题让禁用的内容看起来像什么）。

另一个需要注意的是，如果您动态禁用的选项卡当前处于活动状态，它不会执行任何特殊操作（例如不会折叠或激活另一个选项卡）。您可以添加额外的逻辑以激活默认选项卡或执行其他操作。

- Diego Augusto Molina

---

ui-state-disabled 的文档：http://api.jqueryui.com/theming/css-framework/ - Marquinho Peli

似乎只需添加类即可防止激活。如果我看到该类，我不需要为 beforeactivate 添加处理程序并返回 false。 - pushkin

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

- artlung

---

用户可以通过使用类似Greasemonkey的工具修改网站的JavaScript来完全禁用此功能。 - artlung

当然，使用JS控制台可以玩弄DOM，执行JS代码等等...但是当我想要一个漂亮的手风琴表示时，我需要关心这些吗？ - Tommaso Barbugli

为了使其正常工作，您需要使用“beforeActivate”事件而不是“change”，并在此选项卡不可访问的情况下返回false。 - Alex

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

- Sean Newton

Answer 4

标签页可以轻松地按以下方式禁用：

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

为了启用它，您可以使用JavaScript再次启用它。

- atulsri

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

- Marquinho Peli

Answer 6

这对我有用：

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

- Dago Jobs

Answer 7

对我来说，这些解决方法都没有真正起作用。当然，如果它能够被默认支持，那就更好了，但是这里是我使用的解决方法。我将事件绑定到自定义事件上，并添加了自己的点击事件，可以执行任何逻辑并触发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/

- Sander Ravenhorst

Answer 8

一个相当简单的解决方案是通过内容获取标题 (<h3>)：

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

这样你就可以使用相同的代码启用/禁用或使用以下代码完全隐藏面板：

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

- grashopr