Мастер FuelUX — разрешить прямой выбор шагов в процессе.

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

var $wizard = $('#MyWizard').wizard();
var wizard = $wizard.data('wizard');
$wizard.off('click', 'li.complete');
$wizard.on('click', 'li', $.proxy(wizard.stepclicked, wizard));

Затем вы можете переопределить некоторые стили CSS, чтобы все выглядело так, как будто все кликабельно.

Это также отслеживается по адресу https://github.com/ExactTarget/fuelux/issues/175 в качестве запроса функции, чтобы сделать это проще.

Итак, первый шаг при загрузке страницы — просто применить класс «complete» к каждому элементу li и класс «badge-success» к каждому из значков.

Затем вам нужно остановить удаление этих классов для шагов с 4 по 6, когда вы нажимаете на шаг 3.

Я подключился к событию «изменено», и все происходило в правильном порядке, когда я регистрировал данные в консоли, но метод «stepclicked», кажется, вызывается дважды, второй раз после моего «измененного» материала, тем самым отменяя мой хороший Работа.

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

//KEEP ALL THE STEPS MARKED AS COMPLETE
$("#JetWizard").on("changed", function() {
    window["tid_wizard_steps_all_complete_count"] = 0;
    window["tid_wizard_steps_all_complete"] = setInterval(function() { jetKeepAllStepsMarkedComplete(); }, 25);';
}
function jetKeepAllStepsMarkedComplete() {
    $("#JetWizard ul.steps").find("li").addClass("complete");
    $("#JetWizard ul.steps").find("span.badge").addClass("badge-success");
    window["tid_wizard_steps_all_complete_count"]++;
    if(window["tid_wizard_steps_all_complete_count"] >= 20) {
        clearInterval(window["tid_wizard_steps_all_complete"]);
    }
}

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

Затем я хотел остановить навигацию, если поля на текущем шаге имеют ошибки. Так...

//HANDLE CLICKING ON STEPS TO GO BACK & FORTH
$("#JetWizard ul.steps li.complete").on("click", function() {
    if(jetDoLiveValidationOnVisibleFields() === false) {
        alert ("The form has errors");
        return false;
    }
});

Я не могу комментировать принятый ответ, но если кто-то столкнется с «Uncaught TypeError: Cannot read property 'stepclicked' of undefined», просто замените

var wizard = $wizard.data('wizard');

за

var wizard = $wizard.data('fu.wizard');

и убедитесь, что у вас есть

data-initialize="wizard"

В вашей разметке мастера.

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

//Initialize you wizard
$('#myWizard').wizard();

//Enable the steps except the actived one
var steps = $('.steps-container').find('li');
$.each(steps, function(i, val) {
  if (!steps.eq(i).hasClass('active')) {
    steps.eq(i).addClass('complete');
  }
});

// Add an event listener when change step, to enable other steps again
$('#myWizard').on('changed.fu.wizard', function (evt, data) {
   var steps = $('.steps-container').find('li');
   $.each(steps, function(i, val) {
      if (!steps.eq(i).hasClass('active')) {
       steps.eq(i).addClass('complete');
      }
   });
});