Interfaccia utente JQuery: disabilitare la scheda fisarmonica?

Question

Ho una fisarmonica con interfaccia utente JQuery che contiene parti diverse del flusso di lavoro dell'utente. Vorrei disabilitare le "schede" della fisarmonica che l'utente non ha ancora raggiunto. Quindi, se l'utente non ha ancora eseguito l'accesso, non può ancora pubblicare il contenuto, ecc. Quindi, quando l'utente completa i passaggi necessari, verranno abilitate altre schede.

C'è un modo per farlo? Questo non funziona, anche come un modo per evitare che eventuali schede di cambiare:

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

Answer 1

Questo sembra che dovrebbe essere più facile. Ma ecco una soluzione:

La prima cosa che dobbiamo tenere traccia di è che pannelli possono essere legalmente aperti:

// 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]; 

Poi, quando si chiama il vostro accordion, fare in questo modo

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

allora, se si vuole consentire all'utente di accedere al terzo pannello, si dovrebbe fare:

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

Questo ha funzionato per me:

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

Answer 4

Nessuna delle soluzioni davvero lavorato per me. Sarebbe stato molto più bello se fosse supportato fuori dagli schemi, ma ecco la soluzione che ho usato. Ho associato l'evento a un evento personalizzato e aggiunto il mio evento click che può eseguire qualsiasi logica e attivare l'evento customClick se la navigazione è consentita.

JS:

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

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

oppure visitare il jsfiddle lavorare qui: http://jsfiddle.net/hWTcw/

Answer 5

Si dovrebbe aggiungere/rimuovere la classe "ui-stato disabilitato" per ogni elemento di intestazione (vale a dire "<h3> ") che si desidera disabilitare/abilitare. Quindi utilizzare:

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

Per aggiungere/rimuovere una classe dyanamically, uso:

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

È possibile aggiungere un meaningul attributo "id" per ciascun elemento di intestazione di semplificare la parte "selettore". Ad esempio, "step-1", "step-2", "step-n" per ogni passaggio che l'utente deve percorrere lungo il flusso di lavoro.

È possibile provare il seguente se si è positivo circa la posizione della scheda per essere disabilitare ha:

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

Si noti inoltre che l'utilizzo di "ui-stato-disabile" è in realtà significativa perché renderà l'intestazione ombreggiato (o qualunque sia il tema che rende disabilitate le cose).

Un'altra nota, se la scheda dinamicamente disabilitante è attualmente attiva, non farà nulla di speciale (cioè non collasserà o non attiverà un'altra scheda). Puoi aggiungere logica extra per attivare una tab predefinita o fare qualsiasi altra cosa.

Answer 6

La scheda può essere facilmente disabilitare come di seguito:

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

Per abilitarla è possibile utilizzare javascript per riattivarlo.

Answer 7

Una soluzione abbastanza facile è afferrare l'intestazione (<h3>) in base al contenuto:

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

In questo modo è possibile attivare/disattivare con lo stesso codice o nascondere il pannello tutti insieme con:

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

Answer 8

Diego Augusto Molina lo inchioda. la classe disabilitata con lo stato ui è la strada da percorrere: http://api.jqueryui.com/theming/css-framework/

Considera questa parte di codice che consente all'utente di tornare indietro, ma non andare alla scheda successiva della fisarmonica. Lo facciamo solo a livello di codice, dopo la convalida corretta:

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