JQuery UI: Désactiver accordéon onglet?

J'ai un JQuery UI accordion qui contient les différentes parties de l'utilisateur de flux de travail. Je voudrais désactiver accordéon "onglets" que l'utilisateur n'a pas encore atteint. (Donc, si l'utilisateur n'a pas signé encore, il ne peut pas encore publier de contenu, etc.) Puis, à mesure que l'utilisateur complète les mesures nécessaires, en plus d'onglets sera activé.

Est-il un moyen de faire cela? Cela ne fonctionne pas, même comme un moyen de prévenir les onglets de changer:

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

OriginalL'auteur Nick Heiner | 2010-05-02

  1. 12

    Vous devriez ajouter/supprimer la catégorie "ui-state-désactivé" à chaque élément d'en-tête (c'est à dire "<h3>") que vous souhaitez activer/désactiver. Ensuite, utilisez:

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

    À ajouter/supprimer une classe dyanamically, utilisation:

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

    Vous pouvez ajouter un meaningul attribut "id" de chaque élément d'en-tête pour simplifier le "sélecteur". Par exemple, "étape 1", "2", "n" pour chaque étape, l'utilisateur doit parcourir le long du flux de travail.

    Vous pouvez essayer ce qui suit si vous êtes positif à propos de la position de l'onglet à désactiver:

    //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" );

    Également noter que l'utilisation de "ui-state-désactivé" est en fait un sens parce qu'il va rendre l'en-tête gris (ou quel que soit votre thème fait handicapés choses ressembler).

    Une autre note, si l'onglet vous sont dynamiquement la désactivation est actuellement active, il ne sera pas faire quelque chose de spécial (c'est à dire de ne pas s'effondrer ou activer un autre onglet). Vous pouvez ajouter de la logique supplémentaire pour activer un onglet par défaut ou n'importe quoi d'autre.

    La Documentation sur l'interface utilisateur de l'état désactivé: api.jqueryui.com/theming/css-framework
    Il semble que l'ajout de la classe est assez pour empêcher l'activation. Je n'ai pas besoin d'ajouter un gestionnaire pour beforeactivate et retournera false si je vois la classe.

    OriginalL'auteur

  2. 10

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

    La première chose que nous avons besoin de garder une trace de qui est, les panneaux peuvent être légalement ouverte:

    //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 accordéon, faites comme ceci

    $('#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 souhaitez autoriser l'utilisateur à accéder à la troisième panneau, vous feriez:

    available_indexes.push(2);
    il est dommage que l'utilisateur ne peut pas désactiver à l'avance...
    Un utilisateur peut absolument désactiver une telle chose en utilisant quelque chose comme Greasemonkey pour modifier le JavaScript pour le site.
    bien sûr, et avec js console que l'on peut jouer autour, de modifier le dom, d'exécuter du code js et ainsi de suite... Dois-je me préoccuper de cela, lorsque j'ai envie d'une belle représentation d'un accordéon ?
    Tommaso, je ne suis pas sûr de comprendre votre point de vue, ou de la question.
    Pour le faire fonctionner correctement, vous devez utiliser le "beforeActivate de l'événement au lieu de "changement" et l'ont renvoyer false dans le cas où cet onglet ne doit pas être accessible.

    OriginalL'auteur

  3. 3
        $("#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"));
            }
        }
    });

    OriginalL'auteur

  4. 2

    Cela a fonctionné pour moi:

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

    OriginalL'auteur

  5. 1

    Diego Augusto Molina cloué. ui-state-désactivé classe est le chemin à parcourir: http://api.jqueryui.com/theming/css-framework/

    Considérer ce morceau de code qui permet à l'utilisateur de revenir en arrière, mais de ne pas aller à la prochaine accordéon onglet. Nous le faisons uniquement de la programmation, après validation:

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

    OriginalL'auteur

  6. 0

    Aucune des solutions de contournement a vraiment fonctionné pour moi. Ce serait beaucoup plus agréable si il a été pris en charge hors de la boîte, bien sûr, mais voici la solution que j'ai utilisée. J'ai lié l'événement pour un événement personnalisé et ajouté mon propre événement de clic qui peut faire tout ce que la logique et de déclencher la customClick de l'événement 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 de vérifier le travail jsfiddle ici: http://jsfiddle.net/hWTcw/

    OriginalL'auteur

  7. 0

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

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

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

    OriginalL'auteur

  8. 0

    Une jolie solution de facilité est de l'accaparement de 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();

    OriginalL'auteur