Interfaz de usuario de JQuery: ¿Deshabilitar la pestaña de acordeón?

Question

Tengo un acordeón de IU de JQuery que contiene diferentes partes del flujo de trabajo del usuario. Me gustaría desactivar las "pestañas" de acordeón que el usuario aún no ha alcanzado. (Por lo tanto, si el usuario aún no ha iniciado sesión, todavía no puede publicar contenido, etc.) Luego, a medida que el usuario complete los pasos necesarios, se habilitarán más pestañas.

¿Hay alguna manera de hacerlo? Esto no funciona, incluso como una manera de prevenir cualquier pestaña de cambiar:

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

Answer 1

Esta parece que debería ser más sencillo. Pero he aquí una solución:

La primera cosa que necesitamos hacer un seguimiento de es la que los paneles pueden ser legalmente abiertos:

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

Entonces, cuando llame a su accordion, hacerlo de esta manera

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

Así pues, si desea permitir que el usuario tenga acceso al tercer panel, que haría:

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

Esto ha funcionado para mí:

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

Answer 4

Ninguna de las soluciones realmente funcionó para mí. Hubiera sido mucho mejor si fuera compatible, por supuesto, pero esta es la solución que he utilizado. Ligé el evento a un evento personalizado y agregué mi propio evento de clic que puede hacer cualquier lógica y activar el evento customClick si la navegación está permitida.

JS:

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

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

o ver el jsFiddle trabajar aquí: http://jsfiddle.net/hWTcw/

Answer 5

Debe añadir/eliminar la clase "ui-estado desactivado" a cada elemento de cabecera (es decir, "<h3> ") quieres deshabilitar/habilitar. A continuación, utilice:

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

para añadir/quitar una clase dyanamically, utilice:

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

Se puede añadir un atributo meaningul "id" a cada elemento de cabecera para simplificar la parte "selector". Por ejemplo, "paso-1", "paso-2", "paso-n" para cada paso que el usuario debe recorrer a lo largo del flujo de trabajo.

Puede intentar lo siguiente si está seguro acerca de la posición de la lengüeta para ser desactivar tiene:

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

También tenga en cuenta que el uso de "ui-estado desactivado" en realidad es significativa porque va a representar el encabezado gris (o lo que sea que su tema haga que parezcan cosas deshabilitadas).

Otra nota, si la pestaña que desactiva dinámicamente está actualmente activa, no hará nada especial (es decir, no colapsará ni activará otra pestaña). Puede agregar lógica extra para activar una pestaña predeterminada o hacer cualquier otra cosa.

Answer 6

La ficha se puede desactivar fácilmente como a continuación:

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

para permitirle puede usar javascript para habilitarlo de nuevo.

Answer 7

Una solución bastante fácil es agarrar la cabecera (<h3>) por contenido:

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

esa manera se puede activar/desactivar con el mismo código u ocultar el panel de todo junto con:

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

Answer 8

Diego Augusto Molina lo clavó. ui-state-disabled class es el camino a seguir: http://api.jqueryui.com/theming/css-framework/

Considere este trozo de código que permite al usuario regresar, pero no ir a la siguiente pestaña del acordeón. Lo hacemos solamente mediante programación, después de la validación adecuada:

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