How to block the previous steps of the Bootstrap Fuelux wizard
In my application, the previous steps should be locked. Step one should not be available after verification and submission. How do I lock the previous manual selection steps?
Current implementation, example:
<div class="wizard clearfix" data-initialize="wizard" id="form-wizard">
<ul class="steps">
<li data-target="#step1" data-step="1" class="active"><span class="badge badge-info">1</span>Register</li>
<li data-target="#step2" data-step="2"><span class="badge">2</span>Other</li>
</ul>
</div>
<div class="step-content text-left">
<div data-step="1" id="step1" class="step-pane active">
<form id="frmSignup1">
...
<input type="button" class="btn-next" data-target="#step2" data-wizard="next" data-last="Finish" value="Próximo">
</form>
</div>
<div data-step="2" id="step2" class="step-pane">
<form id="frmSignup2">
...
</form>
</div>
</div>
EDIT
The attr data constraint did not work in the version I was using. I upgraded to the most recent version and added.
+3
source to share
1 answer
How about an attribute data-restrict
?
In the wizard
documentation, the attribute restrict
will be "Prevent the user from going to the previous step".
Here's the main use:
<div class="wizard" data-initialize="wizard" id="myWizard" data-restrict="previous">
Snippet example:
Uses sample markup from Fuel UX documentation
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.0.2/css/fuelux.min.css">
<script src="//www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js"></script>
</head>
<body class="fuelux">
<div class="wizard" data-initialize="wizard" id="myWizard" data-restrict="previous">
<ul class="steps">
<li data-step="1" class="active"><span class="badge">1</span>Campaign<span class="chevron"></span>
</li>
<li data-step="2"><span class="badge">2</span>Recipients<span class="chevron"></span>
</li>
<li data-step="3"><span class="badge">3</span>Template<span class="chevron"></span>
</li>
</ul>
<div class="actions">
<button class="btn btn-default btn-prev"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
<button class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
<div class="step-content">
<div class="step-pane active sample-pane alert" data-step="1">
<h4>Setup Campaign</h4>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Beetroot water spinach okra water chestnut ricebean pea catsear courgette.</p>
</div>
<div class="step-pane sample-pane bg-info alert" data-step="2">
<h4>Choose Recipients</h4>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="step-pane sample-pane bg-danger alert" data-step="3">
<h4>Design Template</h4>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut
pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify.</p>
</div>
</div>
</div>
</body>
</html>
+2
source to share