如何在jQuery UI
accordion()
中禁用某些选项卡,以便用户无法单击打开选项卡内容。假设我想禁用下面示例中的第二个选项卡。
accordion()
中禁用某些选项卡,以便用户无法单击打开选项卡内容。假设我想禁用下面示例中的第二个选项卡。
在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
});
ui.newHeader.hasClass('disabled')
)或保存在JavaScript变量中的某些状态。我只是想确保您知道return false意味着false
而不是"false"
。 - lambacck$('#tabs').tabs('disable', tab_id_or_index)
和 $('#tabs').tabs('enable', tab_id_or_index)
。 - lambacck我正在贴上一个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开始编号。因此,该按钮可用于在导航中向前或向后移动。