logo标签列表

jQuery UI手风琴禁用特定的手风琴选项卡

javascriptjqueryjquery-ui-accordion
3

你好，我正在尝试制作一个向导，希望在第一次使用时禁用所有手风琴选项卡，并且当单击链接时，它会启用下一个选项卡并打开它。 我有这段代码，但它会禁用所有选项卡:( 谢谢

$(function() {
   $("#list1a").accordion({
    autoHeight: false,
    navigation: false
   });
});
$("#list1a").accordion("disable"); 
$("#list1a").accordion("activate", 2 );
3个回答
2
不要使用手风琴，它不是用于向导的。由于jquery UI中没有可用的向导组件，让我们自己创建吧 ;)
html:
<ul class="ui-wizard">
   <li class="ui-wizard-panel">
      <h3 class="ui-wizard-header">panel 1</h3>
      <div class="ui-wizard-content">
          Panel content
          <span class="ui-wizard-next">Goto next</span>
      </div>
   </li>
   <li class="ui-wizard-panel">
      <h3 class="ui-wizard-header">panel 1</h3>
      <div class="ui-wizard-content">
          Panel content
          <span class="ui-wizard-next">Goto next</span>
      </div>
   </li>
</ul>

JavaScript插件：

$.fn.wizard = function(){
   this.find('.ui-wizard-content').hide();
   this.find('.ui-wizard-content:first').show();
   this.find('.ui-wizard-content:last .ui-wizard-next').hide(); // just in case
   this.delegate('.ui-wizard-next', 'click', function(){
      // very long jquery chain...
      $(this).closest('.ui-wizard-content')
             .hide('fast')
             .closest('.ui-wizard-panel')
             .next()
             .find('.ui-wizard-content')
             .show('fast');
   });
}

JavaScript 实现:

$(".ui-wizard").wizard();

当然，你需要自己设计主题，不过复制/粘贴并重命名手风琴样式就可以帮你省去很多功夫。更好的方法是将其制作成官方向导小部件。
0
尝试使用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');
    }
}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接