2010-08-08 27 views
3

嗨我想创建一个向导第一次我想禁用所有的手风琴选项卡,当我点击链接启用下一个选项卡并打开它.. 我有这个代码,但它禁用所有标签:( 感谢jqueryui手风琴禁用特定的选项卡

$(function() { 
    $("#list1a").accordion({ 
    autoHeight: false, 
    navigation: false 
    }); 
}); 
$("#list1a").accordion("disable"); 
$("#list1a").accordion("activate", 2); 

回答

2

不要使用该手风琴,它不适合魔法而且因为有一个在jQuery用户界面没有可用的向导组件,让让我们自己。)

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 IMPL:

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

Ofcourse ..你不得不主题它自己,虽然复制/粘贴,重命名手风琴的风格让你很长的路要走。更好的方法是制作一个官方的精灵小部件。

0

尝试UI状态禁用类: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'); 
    } 
}