JQuery UI: отключить вкладку аккордеона?

Question

У меня есть аккордеон JQuery UI, который содержит различные части рабочего процесса пользователя. Я бы хотел отключить аккордеонные «вкладки», которые пользователь еще не достиг. (Итак, если пользователь еще не подписался, он еще не может опубликовать контент и т. Д.). Затем, когда пользователь выполнит необходимые шаги, активируется больше вкладок.

Есть ли способ сделать это? Это не работает, даже в целях предотвращения изменения любых вкладок:

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

Answer 1

Кажется, что это должно быть проще. Но вот решение:

Первое, что мы должны следить за это, какие панели могут быть юридически открыт:

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

Затем, когда вы называете accordion, сделайте это как этот

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

Итак, если вы хотите, чтобы позволить пользователю получить доступ к третьей панели, вы могли бы сделать:

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

Это работает для меня:

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

Answer 4

Ни один из обходных путей действительно работал для меня. Было бы намного лучше, если бы это было поддержано вне коробки, но вот обходной путь, который я использовал. Я связал событие с настраиваемым событием и добавил мое собственное событие click, которое может выполнять любую логику и запускать событие customClick, если разрешена навигация.

JS:

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

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

или проверить рабочую jsfiddle здесь: http://jsfiddle.net/hWTcw/

Answer 5

Вы должны добавить/удалить класс "щ-состояние-инвалидов" к каждому элементу заголовка (т.е. "<h3> "), которые вы хотите отключить/включить. Затем используйте:

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

Чтобы добавить/удалить класс dyanamically, использование:

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

Вы можете добавить meaningul атрибут «ID» для каждого элемента заголовка для упрощения «селектор» часть. Например, «шаг-1», «шаг-2», «шаг-n» для каждого шага пользователь должен пересекать рабочий процесс.

Вы можете попробовать следующее, если вы уверены, о положении на вкладке быть ОТКЛЮЧЕНИЕ:

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

Также отметим, что с помощью «щ-состояние-инвалидов» на самом деле имеет смысла, потому что он будет оказывать заголовок серого (или как бы то ни было, ваша тема делает вещи с ограниченными возможностями).

Другое примечание: если вкладка, которую вы динамически отключите, в настоящее время активна, она не будет делать ничего особенного (то есть она не будет разрушаться или активировать другую вкладку). Вы можете добавить дополнительную логику, чтобы активировать вкладку по умолчанию или сделать что-нибудь еще.

Answer 6

Вкладка можно легко отключить, как показано ниже:

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

Чтобы включить его, вы можете использовать JavaScript, чтобы включить его снова.

Answer 7

Довольно простое решение захватывает заголовок (<h3>) по содержанию:

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

Таким образом, вы можете включить/отключить с тем же кодом или скрыть панель вместе с:

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

Answer 8

Диего Аугусто Молина прибил его. ui-state-disabled class - это путь: http://api.jqueryui.com/theming/css-framework/

Рассмотрите этот фрагмент кода, который позволяет пользователю вернуться, но не перейти на следующую вкладку аккордеона. Мы делаем это только программно, после соответствующей проверки:

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