如何阻止Bootstrap Fuelux向导上的先前步骤
How to block previous steps on Bootstrap Fuelux Wizard
在我的应用程序中,必须阻止前面的步骤。验证并提交后,不应访问步骤一。如何阻止之前的手动选择步骤?
当前实施,例如:
<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>
编辑
属性数据限制在我使用的版本中不起作用。我换了最新的fuelux版本并开始工作。
data-restrict
属性如何?
根据wizard
文档,restrict
属性将"阻止用户导航到上一步"
以下是基本用法:
<div class="wizard" data-initialize="wizard" id="myWizard" data-restrict="previous">
代码段示例:
使用Fuel UX文档中的示例标记
<!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>
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 浮动页脚栏-使用Bootstrap隐藏
- 正在阻止UIWebView警报
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 试图阻止Chrome通过扩展关闭
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- jQuery自动完成阻止选择后聚焦
- 阻止表单元素提交
- 阻止在select2单击时调用ajax
- 在不阻止默认行为的情况下检测IE10中的缩放
- 阻止订单按钮
- (Angular+Bootstrap)如何阻止两个日期选择器被同一按钮打开
- 阻止在Bootstrap Datepicker中选择日期小于的
- 阻止Bootstrap下拉列表在单击时关闭
- 如何阻止Bootstrap Fuelux向导上的先前步骤
- 阻止Bootstrap删除按钮点击传播
- 在Twitter Bootstrap中,我如何阻止所有的手风琴在页面加载时瞬间展开
- Twitter bootstrap js被同源策略阻止,但非bootstrap是n't.为什么
- bootstrap-modal -当我向下滚动时,我如何阻止背景显示在顶部