Компонент FuelUX Wizard - как вручную выбрать активный шаг?

Я не вижу никаких документов для этого.

Как вручную выбрать, какая панель активна в компоненте мастера?

Я знаю, что это где-то там, потому что вы можете щелкнуть одну из вкладок после ее прохождения и вернуться к предыдущей вкладке.


jquery twitter-bootstrap wizard fuelux
person Gabriel Alack    schedule 05.06.2013    source источник

Ответы (7)


arrow_upward
9
arrow_downward

Да, вы можете изменить шаг мастера:

$('#MyWizard').wizard('selectItem', { step: step });

ОБНОВИТЬ:

После последних обновлений теперь работает с selectedItem

$('#MyWizard').wizard('selectedItem', { step: step });

Обратите внимание на изменение с select на selected*.

person FlyBot    schedule 20.10.2013
comment
Это было добавлено после моего первоначального запроса. Теперь это стандартный способ доступа к вкладкам шагов. - person Gabriel Alack; 10.01.2014
comment
Я понимаю. Этот ответ не для вас, а для тех, кто будет искать решение в будущем. - person FlyBot; 19.01.2014

arrow_upward
3
arrow_downward

Я не думаю, что есть способ напрямую установить активную панель, поскольку предстоящие шаги отключены до тех пор, пока не будут активированы с помощью предыдущего/следующего.

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

$('[data-target=#step2]').trigger("click");

Вот рабочий пример: http://www.bootply.com/60319 -- Если вы перейдете к последнему шагу (5), появится ссылка для возврата к шагу 2.

person Zim    schedule 05.06.2013
comment
Хороший ответ, спасибо! Я добавил задачу GitHub, чтобы включить это более доступным способом: github.com/ExactTarget/fuelux/ вопросы/194 - person Adam Alexander; 05.06.2013

arrow_upward
2
arrow_downward

$('#MyWizard').wizard('selectedItem', { шаг: текущий шаг });

person Vinay Mandadapu    schedule 27.11.2013

arrow_upward
1
arrow_downward

Я знаю, что этот вопрос старый, но я хотел поделиться тем, что сработало для меня в Fuel FX 2.x:

$('#MyWizard').wizard('selectedItem', { step: YourStepNumber });

E.g.:

$('#wizard1').wizard('selectedItem', { step: 7 });
person arao6    schedule 24.06.2014

arrow_upward
1
arrow_downward 

$(document).ready(function() {
    $('#wizard').wizard();
    $('#wizard').find('ul.steps li').toggleClass('complete', true);

    $('#wizard').on('changed.fu.wizard', function (evt, data) {
        $('#wizard').find('ul.steps li').toggleClass('complete', true);
    });
});

Это делает все шаги кликабельными.

person antoncom    schedule 10.12.2015

arrow_upward
1
arrow_downward 

$('#btnNext').on('click', function()
{
$('#orderWizard').wizard('next');
}

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

$('#btnPrev').on('click', function()
{
$('#orderWizard').wizard('previous');
}
person Akshay Tilekar    schedule 21.04.2016

arrow_upward
0
arrow_downward

Вы можете установить «активный» класс в теге li, и при отображении мастера активный li будет помечен.

Это пример в symfony:

<li data-target="#step1" class="complete">
  <span class="step">1</span>
</li>
<li data-target="#step2" class="active">
  <span class="step">2</span>
</li>
person ajaristi    schedule 10.06.2014