JQuery UI: Désactiver l'onglet accordéon?

Question

J'ai un accordéon JQuery UI qui contient différentes parties du flux de travail de l'utilisateur. Je voudrais désactiver les "onglets" d'accordéon que l'utilisateur n'a pas encore atteints. (Ainsi, si l'utilisateur ne s'est pas encore connecté, il ne peut pas encore publier de contenu, etc.) Ensuite, au fur et à mesure que l'utilisateur franchira les étapes nécessaires, d'autres onglets seront activés.

Existe-t-il un moyen de le faire? Cela ne fonctionne pas, même comme un moyen d'empêcher les onglets de changer:

$("#accordion").accordion({ 
    changestart: function(event, ui) { 
     return false; 
    } 
}); 

Answer 1

Cela semble être plus facile. Mais voici une solution:

La première chose que nous devons garder une trace de est que les panneaux peuvent être légalement ouvertes:

// Keep an array of the indexes that the user can open. 
// [0,1] would allow ONLY the first and second panels 
// to be opened 
var available_indexes = [0,1]; 

Ensuite, lorsque vous appelez votre accordion, faites comme ça

$('#accordion').accordion({ 
    header: 'h3', 
    change: function(event, ui) { 
     var newIndex = $(ui.newHeader).index('h3'); 
     if (jQuery.inArray(newIndex, available_indexes) == -1) { 
      var oldIndex = $(ui.oldHeader).index('h3'); 
      $(this).accordion("activate" , oldIndex); 
      alert('That panel is not yet available'); 
     } 
    } 
}); 

alors, si vous voulez permettre à l'utilisateur d'accéder au troisième panneau, vous feriez:

available_indexes.push(2); 

Answer 2

$("#service_options_available h3").click(
     function(e) { 
      if($(this).hasClass("empty")) { 
       e.stopImmediatePropagation(); 
       return false;  
      } 
     } 
    ); 
    $("#service_options_available").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     active: false, 
     header: 'h3', 
     changestart: function(event, ui) { 
      if($(ui.newHeader).attr("id") != null) { 
       alert($(ui.newHeader).attr("id")); 
      } 
     } 
    }); 

Answer 3

Cela a fonctionné pour moi:

$("#accordionTabToDisable").click(function(){ 
    $("#acordion").accordion("option", "active",0); //maybe this line could be optional 
    return false; 
}); 

Answer 4

Aucune des solutions de contournement a vraiment fonctionné pour moi. Cela aurait été bien plus agréable si c'était supporté hors de la boîte de cours, mais voici la solution de contournement que j'ai utilisée. J'ai lié l'événement à un événement personnalisé et ajouté mon propre événement click qui peut faire n'importe quelle logique et déclencher l'événement customClick si la navigation est autorisée.

JS:

$('#accordion').accordion({ 
    event: 'customClick' 
}); 

$('#accordion > .ui-accordion-header').click(function() { 
    if(confirm ("Is this allowed?")){ 
    $(this).trigger('customClick'); 
    } 
}); 

Ou consulter la jsFiddle travailler ici: http://jsfiddle.net/hWTcw/

Answer 5

Vous devez ajouter/retirer le à chaque élément d'en-tête de classe "ui-état désactivé" (ie "<h3> ") vous voulez désactiver/activer. Ensuite, utilisez:

$("#accordion").on("accordionbeforeactivate", function(){ 
    return ! arguments[1].newHeader.hasClass("ui-state-disabled"); 
}) 

Pour ajouter/supprimer une classe dyanamically, utilisez:

$("selector").addClass("ui-state-disabled"); 
$("selector").removeClass("ui-state-disabled"); 

Vous pouvez ajouter un meaningul attribut « id » à chaque élément d'en-tête pour simplifier la partie « sélecteur ». Par exemple, "step-1", "step-2", "step-n" pour chaque étape que l'utilisateur doit parcourir le long du workflow.

Vous pouvez essayer ce qui suit si vous êtes positifs au sujet de la position de l'onglet être désactiver a:

// Disable the first tab 
$("#accordion > h3:first-child").addClass("ui-state-disabled"); 

// Make sure the fourth tab is enabled 
$($("#accordion > h3")[3]).removeClass("ui-state-disabled"); 

Notez également que l'utilisation de « -désactivé ui-état » est en fait significatif, car il rend l'en-tête grisé (ou quel que soit votre thème).

Une autre note, si l'onglet que vous désactivez dynamiquement est actuellement actif, il ne fera rien de spécial (c'est-à-dire qu'il ne s'effondrera pas ou n'activera pas un autre onglet). Vous pouvez ajouter une logique supplémentaire pour activer un onglet par défaut ou faire quoi que ce soit d'autre.

Answer 6

L'onglet peut être désactiver facilement comme ci-dessous:

<p:tab title="First Tab Title" **disabled=”true”**> 

Pour l'activer, vous pouvez utiliser javascript pour activer à nouveau.

Answer 7

Une solution assez facile est saisissant l'en-tête (<h3>) par le contenu:

$("h3:contains('panel name')").toggleClass('ui-state-disabled'); 

De cette façon, vous pouvez activer/désactiver avec le même code ou masquer le panneau tous ensemble avec:

$("h3:contains('panel name')").toggle(); 

Answer 8

Diego Augusto Molina l'a cloué. Considérez cette partie de code qui permet à l'utilisateur de revenir en arrière, mais pas à l'onglet accordéon suivant. Nous le faisons uniquement par programmation, après validation correcte:

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