个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的应用中，前面的步骤必须被阻止。验证并提交后，第一步不应可访问。如何屏蔽之前手动选择的步骤？
当前实现，示例:
<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 data-restrict 在我使用的版本中不起作用。我更改为最新的 fuelux 版本并且可以正常工作。
最佳答案
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>关于javascript - 如何阻止 Bootstrap Fuelux 向导的先前步骤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26130310/
25
4
0
我正在尝试创建一个隐藏列，其中包含该行的唯一“id”作为“data-id”属性中的一个属性。因为我似乎无法弄清楚如何检索行后面的数据模型。我正在使用服务器端数据源。 columns: [{ pro
我已经制作了一个嵌套在fuelux向导中的表单。如果用户单击下一步按钮，则书夹必填字段将不会显示。是否有任何方法可以要求用户在输入必填字段之前不能通过单击下一步继续前进？ 这是输入的示例 3
我正在尝试使用 FuelUX 实现 TreeView 。 到目前为止，我成功地从网站上设置了示例: Fuel UX Basic Template (Gl
我正在尝试使用Fuelux repeater对于我的一个项目，但我不知道如何使用 javascript 填充数据。他们提供的示例使用了几个其他插件(Require.js 和 underscore.js
文档位于http://getfuelux.com/javascript.html#tree没有给出关于如何使用 Javascript 数据源的好例子。我在 StackOverflow 上阅读了很多关于
我在FUELUX上做了一些自定义向导，它可以显示在这个链接http://jsfiddle.net/L3b9E/2中 问题是，我不知道如何修复向导中每个步骤的表单验证并用选项卡分隔。因为验证在第二个、第
向上打开日期选择器日历的最佳方式是什么？默认是向下打开。我已经将 datepicker-calendar-wrapper 类的边距更改为负值并且它工作正常，但想知道是否有任何其他方法可以做到这一点。
我正在尝试使用日期选择器过滤 Fuel UX Repeater。我怎样才能做到这一点？看来中继器的“重新加载”事件甚至没有被触发，我不知道如何设置 options.filter 以包含日期选择器字段中
我正在尝试使用 fuelux datepicker但它的风格并不像文档中所示那样工作。我在这里做错了什么？ JSfiddle 我在我的代码中正确加载了 bootstrap 和 fuelux 的 css
是否可以固定特定宽度 Fuel UX中继器列？ 我正在尝试使用 css-nth 来做到这一点像这样的选择器: .table thead tr th:nth-of-type(8), .table tbo
FuelUX Wizard组件——如何让用户直接进入最后一步？？ 我可以使用 FuelUX 向导，但我需要第一个和最后一个按钮以及下一个和上一个按钮。 我正在尝试这个例子 http://bootply
我没有看到任何相关文档。 如何手动选择向导组件中哪个面板处于事件状态？ 我知道它在某个地方，因为您可以在通过后单击其中一个选项卡，然后导航回上一个选项卡。 最佳答案 是的，您可以更改 wizard s
我尝试使用 FUELUX 中继器，并且所有数据都工作正常。现在，我的问题是: 如何正确设置寻呼？因为目前它在一个页面中显示所有结果，并且控制台中出现最大调用堆栈超出错误。 这是我的代码: func
我在人们提交一些数据的表单上使用了 FuelUX 向导，我们希望将其分解为逻辑步骤。效果非常好。 现在我正在处理相同表单的编辑版本，它工作正常，但由于步骤已经加载了数据，我希望用户能够直接跳到步骤 X
有没有办法将 Fuelux Datagrid 与 requirejs 和 backbonejs 一起使用？ 我无法使用它和谷歌搜索将数据加载到 Datagrid 上，听起来你不能将 requirejs
我正在尝试从我的 Backbone 集合中设置 Fuelux 数据网格源。示例源位于 https://github.com/ExactTarget/fuelux/tree/master/sample
我是 FuelUX 的新手，所以我试图根据提供的示例让它工作: require(['jquery','data.js', 'datasource.js', 'fuelux/all'], functio
我希望有人能帮助我解决这个问题。我正在使用 FuelUX 向导并希望动态添加 X 个步骤，其中 X 是用户在第一个屏幕上设置的数字。额外的步骤添加得很好，除了我不知道如何让向导知道它现在的步骤数与它开
我正在尝试使用 fuelux datepicker似乎甚至无法正确初始化它!非常感激任何的帮助。我基于这里的例子:https://gist.github.com/vernak2539/9980566
我正在尝试实现 Fuelux 的向导功能，但遇到了障碍。我只是想获得 live example 的工作副本但在我的控制台中不断收到错误: Uncaught TypeError: Object [obj
我是一名优秀的程序员,十分优秀！