jQuery UI手风琴禁用选项卡

Question

如何在jQuery UI accordion()中禁用某些选项卡，以便用户无法单击打开选项卡内容。假设我想禁用下面示例中的第二个选项卡。

http://jsfiddle.net/3JAkv/8/

- Pinkie

Answer 1

也许我理解有误，但如果我给所需的标题添加"class=ui-state-disabled"，则该标题/标签将无法被选择。

我正在使用： jquery-ui-1.10.3和jquery-1.7.1。

- janos

---

我也使用它 :-). 功能非常好。 - thedom

Answer 2

在1.8.x版本中，没有捆绑的方法可以实现这一点。

在1.9版本中（截至本文撰写时，beta版本已经发布），beforeActivate事件看起来可以处理并返回false以防止激活发生。假设您已经在禁用部分的标题上设置了.data('enabled', false)，则可以在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
});

- lambacck

---

谢谢，但是我还不太清楚。disabled_header是什么？您能在我上面提供的jsfiddle链接中解决这个问题吗？ - Pinkie

disabled_header只是一个占位符，用于指示您想要禁用该标题的某些指示器。它可以是表示状态的类（ui.newHeader.hasClass('disabled')）或保存在JavaScript变量中的某些状态。我只是想确保您知道return false意味着false而不是"false"。 - lambacck

也许你应该考虑使用 jQueryUI 标签页小部件，因为禁用选项卡是内置选项。$('#tabs').tabs('disable', tab_id_or_index) 和 $('#tabs').tabs('enable', tab_id_or_index)。 - lambacck

返回false并不会阻止手风琴的展开。 - Darcy

我可能正在阅读1.9版本的代码，该版本允许取消手风琴changestart事件：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.accordion.js#L678 1.8版本则不行：https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.accordion.js#L408 - lambacck

Answer 3

我正在贴上一个JSFiddle，其中包含一个受控导航手风琴的示例。这意味着用户不能跳过步骤或自由地导航手风琴，而只能通过硬编码按钮来激活或放置jQuery。希望它有所帮助。 https://jsfiddle.net/moriz/rvuwze6s/

基本上，JS代码如下：

 $(function() {
     $("#accordion").accordion({
         disabled: true
     });
 });

 function operateAccordion(tabNumber) {
     $("#accordion").accordion("option", "active", tabNumber);
 }

按钮应该像这样：

<a href="javascript:operateAccordion(1)">Next step</a>

请注意手风琴部件从0开始编号。因此，该按钮可用于在导航中向前或向后移动。

- Moriz