JQuery SmartWizard - шаг отображается, но не включен - PullRequest
Новая
       22

JQuery SmartWizard - шаг отображается, но не включен

0 голосов
/ 14 сентября 2018

Я использую этот плагин Jquery для создания Wizard-подобного интерфейса:

JQuery Bootstrap Smart Wizard

У меня есть 5 шагов в мастере. Шаг 3 и Шаг 4 скрыты при первой загрузке мастера.

  1. Когда пользователь выбирает переключатель «Да» на шаге 2, а затем нажимает кнопку «Далее», он должен отобразить, включить и перейти к шагу 4 в мастере.
  2. Когда пользователь выбирает переключатель «Нет» на шаге 2, а затем нажимает кнопку «Далее», он должен отобразить, включить и перейти к шагу 3 в мастере.

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

Как мне исправить это, чтобы добиться желаемого поведения?

Вот мой код для этого: 

<div id="smartwizard">
<ul>
    <li><a href="#step-1">Step 1<br /><small>Step 1</small></a></li>
    <li><a href="#step-2">Step 2<br /><small>Step 2</small></a></li>
    <li><a href="#step-3">Step 3<br /><small>Step 3</small></a></li>
    <li><a href="#step-4">Step 4<br /><small>Step 4</small></a></li>
    <li><a href="#step-5">Step 5<br /><small>Step 5</small></a></li>                
</ul>

<div>
    <div id="step-1" class="">
        This is the first step and it should be shown all the time.
    </div>
    <div id="step-2" class="">
        <div>Would you like to add more options?</div>
        <p>
        <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
        </p>
        <p>
        <input type="radio" name="yes_no" id="step2RadioNo" >&nbsp;No</input>
        </p>
    </div>

    <div id="step-3" class="">
        This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
    </div>

    <div id="step-4" class="">
        This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
    </div>

    <div id="step-5" class="">
        This step is the final step.
    </div>
</div>


<script>
$('#smartwizard').smartWizard({
            selected: 0,
            theme: 'default',
            transitionEffect:'fade',
            showStepURLhash: false,
            contentCache: false,
            hiddenSteps: [2,3]
    });

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        if(stepNumber === 1){
           if(document.getElementById('step2RadioYes').checked) {

           // Enable and go to step-4 if Yes is selected
           $('#smartwizard').smartWizard("stepState", [2], "disable");
           $('#smartwizard').smartWizard("stepState", [2], "hide");

           $('#smartwizard').smartWizard("stepState", [3], "enable");
           $('#smartwizard').smartWizard("stepState", [3], "show");
          }
          else if(document.getElementById('step2RadioNo').checked) {

           // Enable and go to step-4 if No is selected
           $('#smartwizard').smartWizard("stepState", [2], "enable");
           $('#smartwizard').smartWizard("stepState", [2], "show");

           $('#smartwizard').smartWizard("stepState", [3], "disable");
           $('#smartwizard').smartWizard("stepState", [3], "hide");
          }
       }
    });    
</script>

1 Ответ

0 голосов
/ 14 сентября 2018

Событие leftStep не дает возможности сбросить следующий / предыдущий шаг. Я могу предложить обходной путь: 

 setTimeout(function() {
    $('#smartwizard').data('smartWizard')._showStep(3); // go to step 3....
 }, 50);


$('#smartwizard').smartWizard({
    selected: 0,
    theme: 'default',
    transitionEffect: 'fade',
    showStepURLhash: false,
    contentCache: false,
    hiddenSteps: [2, 3]
});

$("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
    $("#smartwizard").data('nextStep', stepNumber + 1);
    if (stepNumber === 1) {
        if (document.getElementById('step2RadioYes').checked) {

            // Enable and go to step-4 if Yes is selected
            $('#smartwizard').smartWizard("stepState", [2], "disable");
            $('#smartwizard').smartWizard("stepState", [2], "hide");

            $('#smartwizard').smartWizard("stepState", [3], "enable");
            $('#smartwizard').smartWizard("stepState", [3], "show");

            setTimeout(function() {
                $('#smartwizard').data('smartWizard')._showStep(3);
            }, 50);

        } else {

            // Enable and go to step-4 if No is selected
            $('#smartwizard').smartWizard("stepState", [2], "enable");
            $('#smartwizard').smartWizard("stepState", [2], "show");

            $('#smartwizard').smartWizard("stepState", [3], "disable");
            $('#smartwizard').smartWizard("stepState", [3], "hide");

            setTimeout(function() {
                $('#smartwizard').data('smartWizard')._showStep(2);
            }, 50);
        }
    }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/techlab/SmartWizard/master/dist/css/smart_wizard.min.css">
<script src="https://rawgit.com/techlab/SmartWizard/master/dist/js/jquery.smartWizard.js"></script>

<div id="smartwizard">
    <ul>
        <li><a href="#step-1">Step 1<br/>
            <small>Step 1</small>
        </a></li>
        <li><a href="#step-2">Step 2<br/>
            <small>Step 2</small>
        </a></li>
        <li><a href="#step-3">Step 3<br/>
            <small>Step 3</small>
        </a></li>
        <li><a href="#step-4">Step 4<br/>
            <small>Step 4</small>
        </a></li>
        <li><a href="#step-5">Step 5<br/>
            <small>Step 5</small>
        </a></li>
    </ul>

    <div>
        <div id="step-1" class="">
            This is the first step and it should be shown all the time.
        </div>
        <div id="step-2" class="">
            <div>Would you like to add more options?</div>
            <p>
                <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
            </p>

            <p>
                <input type="radio" name="yes_no" id="step2RadioNo">&nbsp;No</input>
            </p>
        </div>

        <div id="step-3" class="">
            This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
        </div>

        <div id="step-4" class="">
            This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
        </div>

        <div id="step-5" class="">
            This step is the final step.
        </div>
    </div>
</div>

Другой подход без setTimeout может быть основан на переназначении внутренних методов _showNext / _showPrevious. Perahps это решает проблему, но это также сильное изменение ............ 

$('#smartwizard').smartWizard({
    selected: 0,
    theme: 'default',
    transitionEffect: 'fade',
    showStepURLhash: false,
    contentCache: false,
    hiddenSteps: [2, 3]
});

function changeDirection(obj, newIdx) {
    if (document.getElementById('step2RadioYes').checked) {
        // Enable and go to step-4 if Yes is selected
        $('#smartwizard').smartWizard("stepState", [2], "disable");
        $('#smartwizard').smartWizard("stepState", [2], "hide");

        $('#smartwizard').smartWizard("stepState", [3], "enable");
        $('#smartwizard').smartWizard("stepState", [3], "show");

        obj._loadStepContent(newIdx);
    } else {
        // Enable and go to step-4 if No is selected
        $('#smartwizard').smartWizard("stepState", [2], "enable");
        $('#smartwizard').smartWizard("stepState", [2], "show");

        $('#smartwizard').smartWizard("stepState", [3], "disable");
        $('#smartwizard').smartWizard("stepState", [3], "hide");

        obj._loadStepContent(newIdx);
    }
}

$("#smartwizard").data('smartWizard')._showNext_orig = $("#smartwizard").data('smartWizard')._showNext;
$("#smartwizard").data('smartWizard')._showNext = function () {
    if (this.current_index === 1) {
        changeDirection(this, 3);
    } else {
        $("#smartwizard").data('smartWizard')._showNext_orig();
    }
    return true;
}
$("#smartwizard").data('smartWizard')._showPrevious_orig = $("#smartwizard").data('smartWizard')._showPrevious;
$("#smartwizard").data('smartWizard')._showPrevious = function () {
    if (this.current_index === 3) {
        changeDirection(this, 1);
    } else {
        $("#smartwizard").data('smartWizard')._showPrevious_orig();
    }
    return true;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/techlab/SmartWizard/master/dist/css/smart_wizard.min.css">
<script src="https://rawgit.com/techlab/SmartWizard/master/dist/js/jquery.smartWizard.js"></script>

<div id="smartwizard">
    <ul>
        <li><a href="#step-1">Step 1<br/>
            <small>Step 1</small>
        </a></li>
        <li><a href="#step-2">Step 2<br/>
            <small>Step 2</small>
        </a></li>
        <li><a href="#step-3">Step 3<br/>
            <small>Step 3</small>
        </a></li>
        <li><a href="#step-4">Step 4<br/>
            <small>Step 4</small>
        </a></li>
        <li><a href="#step-5">Step 5<br/>
            <small>Step 5</small>
        </a></li>
    </ul>

    <div>
        <div id="step-1" class="">
            This is the first step and it should be shown all the time.
        </div>
        <div id="step-2" class="">
            <div>Would you like to add more options?</div>
            <p>
                <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
            </p>

            <p>
                <input type="radio" name="yes_no" id="step2RadioNo">&nbsp;No</input>
            </p>
        </div>

        <div id="step-3" class="">
            This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
        </div>

        <div id="step-4" class="">
            This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
        </div>

        <div id="step-5" class="">
            This step is the final step.
        </div>
    </div>
</div>
...