JQuery UI Аккордеон отключение нажав - PullRequest
1 голос
/ 23 июля 2011

У меня установлен такой аккордеон, как этот

$(".accordion-form").accordion({
    collapsible:false,
    autoHeight: false,
    changestart: checkChanged,
    change: function(e, ui) {active = $( ".accordion-form" ).accordion( "option", "active");},
    active: 0
});

active - статическая переменная, которая всегда имеет активное содержимое.

То, что я хотел бы сделать, это включить заголовки перед активным для щелчка, а заголовки после активного отключить для щелчка.

Таким образом я могу заставить аккордеон действовать какФорма в форме «вы можете вернуться, но не вперед, пока не закончите эту часть».

Любая помощь будет оценена

Ответы [ 2 ]

2 голосов
/ 23 июля 2011

Хотя я согласен с Фредериком, что аккордеон не является отличным виджетом для такого поведения, вы должны быть в состоянии сделать это с помощью некоторого простого JS. Присоедините другой обработчик «onclick» к заголовкам аккордеона и убейте событие, если заголовок был слишком далеко:

$('.accordion-form .ui-accordion-header').click(function(e) {
    if($(this).index() > current_section.index())
    {
        e.stopImmediatePropagation();
    }
});

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

Надеюсь, это поможет!

0 голосов
/ 30 апреля 2018

Я нашел решение этой проблемы в другом месте:

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

Теперь взломать, чтобы реализовать отключение функциональности:

// replace the old eventhandler
var accordion = $( "#accordion" ).data("accordion");
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function( event, target ) {
 var clicked = $( event.currentTarget || target );
 if (! clicked.hasClass("ui-state-disabled")) this._std_clickHandler(event, target);

Всякий раз, когда вы хотите повторно активировать вкладку, выполните:

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

Источник: https://forum.jquery.com/topic/disable-enable-sections-of-accordion

...