jqueryui accordéon désactiver spécifique selon l'onglet

Question

salut je suis en train de faire un assistant pour la première fois je veux désactiver tous les onglets accordéon quand je clique sur le lien il activer l'onglet suivant et l'ouvrir .. j'ai hve ce code mais il désactiver tous les onglets :( grâce

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

Answer 1

ne pas utiliser l'accordéon pour cela, il est pas destiné à la magie Et comme il n'y a pas de composant assistant disponible dans l'interface utilisateur jquery, permet de faire notre propre;.)

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

$.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 vous auriez à thème vous-même, bien que copier/coller et renommer des styles d'accordéon vous obtient un long chemin. Une façon plus agréable serait de faire un widget wizard officiel de cela.

Answer 2

Vous pouvez également consulter ce code: http://github.com/desdev/jWizard/ Pensez que c'est exactement ce dont vous avez besoin.

Answer 3

Essayez classe désactivé ui-état: http://api.jqueryui.com/theming/css-framework/ Tenir compte ce morceau de code qui permet à l'utilisateur revenir, mais pas aller à l'onglet suivant accordéon:

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