如何阻止 Bootstrap Fuelux 向导上的先前步骤答案

【问题标题】：How to block previous steps on Bootstrap Fuelux Wizard如何阻止 Bootstrap Fuelux 向导上的先前步骤
【发布时间】：2014-11-25 15:23:09
【问题描述】：

在我的应用程序中，必须阻止前面的步骤。验证并提交后，不应访问第一步。如何屏蔽之前的手动选择步骤？

当前实现，示例：

<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>

编辑

attr 数据限制在我使用的版本中不起作用。我更改为最新的fuelux 版本并且可以正常工作。

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 fuelux

【解决方案1】：

data-restrict 属性呢？

根据wizard documentation 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>

【讨论】：