标签: jquery-steps
使用jQuery步骤进入自定义步骤
我在我的应用程序上使用jQuery步骤来实现类似向导的情况.我无法找到如何更改为自定义步骤.对此有何帮助？
$(function () {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
enableFinishButton: false,
labels: {
next: $('#next').html(),
previous : $('#previous').html()
},
onStepChanged: function (event, currentIndex, priorIndex)
{
if( priorIndex == 0) {
var selected = $('input[name=radio_wizard]:checked', '#radio_wizard').val()
switch( selected ){
case 1:
// GOTO 1
break;
case 2:
// GOTO 2
break;
case 3:
// GOTO 3
break;
}
}
}
}
怎么做到这一点？
推荐指数
解决办法
查看次数
jQuery向导步骤在ajax调用完成之前移动
如何根据某些ajax调用的结果控制移动到下一步？data.d以bool值返回
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
var move = false;
if (currentIndex == 2) {
move = false;
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
return true;
},
error: ajaxLoadError
});
}
return move;
},
saveState: true
});
推荐指数
解决办法
查看次数
如何为每个步骤的内容设置动态高度？
我正在使用Jquery步骤向导插件.我遇到的问题是向导的每一步都有不同高度的内容.控制内容高度的示例中包含的CSS是
.wizard > .content
{
background: #eee;
display: block;
margin: 0.5em;
min-height: 35em;
overflow: hidden;
position: relative;
width: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
我已经调整了min-height和overflow属性,但它仍然不能完成我想要完成的任务.我想要的是高度足以容纳每一步的内容.
例如,假设我有2个字段用于步骤1,10个字段用于步骤2.在示例中,内容具有相同的高度,因此看起来很糟糕,其高度比2个字段容纳10个字段所需的高度大得多第2步.
如果我删除min-height属性,则根本不显示任何内容.Jquery步骤是否需要固定高度才能适用于所有步骤？我希望有一种方法可以使高度动态,以适应每个步骤的高度.
谢谢
推荐指数
解决办法
查看次数
在jquery-steps中更改按钮的名称
我已经包含了jquery-steps插件.如何更改按钮文本？
现在它说"完成"我想把它变成"去"
谢谢
推荐指数
解决办法
查看次数
jQuery Steps - 重置向导,无需重新加载页面
我正在使用jQuery步骤(https://github.com/rstaib/jquery-steps/wiki)来创建一步一步的表单给用户填写.它工作得很好,但我需要能够重置它.一旦用户提交了表单(使用ajax以便页面不刷新),我想呈现一个用户新的向导.
有没有办法重置向导？或者也许重新加载而不重新加载页面？
推荐指数
解决办法
查看次数
嵌套的jQuery步骤 - Main Next上没有显示任何内容
我有一个简单的html表单,嵌套jQuery步骤.
主向导有5个步骤,第3步有一个包含3个步骤的子向导.
当单击主向导的"下一步"时,移动步骤并显示内容,但在第3步(具有子向导的步骤)之后,选项卡移动到4rth但是在到达4rth步骤时没有显示内容,如果我禁用了显示子向导的jQuery脚本,主要的4rth步骤显示内容.
我尝试了各种论坛,并开始调试jQuery Steps库一段时间,但无法找出原因.
任何帮助表示赞赏.
这是可执行的代码.
$("#frmMainWizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slide", // "fade",
stepsOrientation: "vertical"
//enableAllSteps: true,
//enablePagination: false,
});
var childForms = $(".frmWizardSteps");
$.each(childForms, function() {
console.log(this.id);
var currentSubStesId = '#' + this.id;
$(currentSubStesId).steps({
headerTag: "h4",
bodyTag: "div",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
//autoFocus: true,
//enableAllSteps: true,
//enablePagination: false
});
});
$('#btnPrev').click(function() {
$("#frmMainWizard").steps('previous');
});
$('#btnNext').click(function() {
$("#frmMainWizard").steps('next');
});/* Wizard styles - override jquery steps */
.wizard.clearfix > .content.clearfix {
overflow: auto !important;
}
/*
.frmMainWizard …推荐指数
解决办法
查看次数
jquery-steps | 在ajax内容加载上将数据发送到服务器
我在我的项目中使用:http://www.jquery-steps.com/Examples#async.这是一个很好的Jquery插件,用于添加向导.
我的问题是关于动态步骤.下一步的内容应取决于上一步的答案.如何通过AJAX调用向我的后端发送其他数据.我的后端将根据该值为下一步服务.
我搜索了文档和源代码,但找不到答案.
推荐指数
解决办法
查看次数
jQuery步骤无法正确呈现
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEsT</title>
</head>
<body>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.steps.min.js"></script>
<script src="homepage.js"></script>
</body>
</html>
jQuery的:
$(document).ready(function(){
$("#wizard").steps();
});
(非特别)演绎:
推荐指数
解决办法
查看次数
Select2在Jquery-Steps中不起作用
我安装了Jquery-steps插件和select2插件.我把select2框放在向导表单(jquery-steps)中,它不起作用.列表值不会导出.在向导外面,select2工作正常.
推荐指数
解决办法
查看次数
使用 API 更改 jquery-steps 中的设置
如何使用 API 更改查询步骤中的设置？如果我处于表单的编辑模式，我会尝试启用所有步骤。我尝试使用：
var wizard = $("#wizard").steps();
wizard.steps({
enableAllSteps: true
});
显然这是不正确的。
推荐指数
解决办法
查看次数