标签: jquery-steps
JQuery 步骤：如何禁用步骤？
我正在使用 JQuery Steps，它非常出色。但事实证明有些事情很棘手。
假设我在第 2 步。根据我在表单中选择的内容，我可能希望在单击“下一步”时直接跳到第 4 步，并且进一步完全禁用第 3 步锚点。步骤 3 锚点仍应出现在步骤列表中，它应该只是灰显并禁用。
我似乎无法让它发挥作用。来自 JQuery Steps 大师的任何建议？
我在 onStepChanged 中尝试了以下几种变体：
if ($('#option').val() == 'foo') {
$('#wizard-t-3').attr('disabled', true);
$('#wizard-t-3').addClass('disabled');
} else {
$('#wizard-t-3').attr('disabled', false);
$('#wizard-t-3').removeClass('disabled');
}
if (currentIndex == 2) {
$(this).steps('next');
}
并应用了我认为合适的 CSS：
.wizard>.steps a .disabled,.wizard>.steps a:hover .disabled,.wizard>.steps a:active .disabled,.wizard>.steps a:visited .disabled { color: #777; 光标：默认 }
但它似乎并没有做到这一点。而且不仅仅是 CSS 似乎不起作用，该步骤似乎仍然启用。在 Chrome 调试器中一切正常，但工作不正常。我显然很困惑。
推荐指数
解决办法
查看次数
Jquery步骤->按钮单击->转到步骤
我正在asp.net 应用程序中使用jquery 步骤向导。单击按钮时更改步骤的事件出现问题。file.js 中的初始化步骤
var WizardFunc = function () {
var wizard = null;
return {
WizardSet: function () {
wizard = $('#order').steps({
bodyTag: "fieldset",
transitionEffect: "slideLeft",
headerTag: "h1",
autoFocus: true
});
},
WizardStepAdd: function (index, title, contentId) {
wizard.steps("insert", index, {
title: title,
content: "<div id='" + contentId + "'></div>"
});
},
WizardGoToStep: function (index) {
wizard.steps("setStep", 1);
},
WizardStepRemove: function (index) {
wizard.remove(index);
}
}
}();
我尝试调用函数：
$("#new-size-container").on("click", ".add-size", function () {
WizardFunc.WizardGoToStep(1);}
返回错误：
Not yet …推荐指数
解决办法
查看次数
为 jQuery Steps 动态创建步骤
我在使用 jQuery Step Wizard 插件动态创建一些步骤时遇到了一些麻烦。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script>$.mobile || document.write('<script src="js/jquery.mobile-1.4.0.min.js"><\/script>')</script>
<script src="scripts/libs/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="scripts/libs/jquery.steps-1.0.4.js"></script>
<script src="scripts/libs/jquery.validate-1.11.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$("#wizard").steps();
var wizard = $("#wizard").steps();
wizard.steps("add", {
title: "HTML code",
content: "This is a test"
});
wizard.steps("add", {
title: "HTML code2",
content: "This is a test2"
});
});
</script>
<div id="wizard"></div>
</body>
</html>
运行此页面时，网页上显示的只是“下一个”和“上一个”，但根本没有任何步骤。
我得到的控制台错误是这样的：
SCRIPT5022：缺少一个或多个相应的步骤标题。jquery.steps-1.0.4.js，第 1252 行字符 5
我可以得到一些帮助来完成这项工作吗？
提前致谢
推荐指数
解决办法
查看次数
在onfinish事件jquery.steps之后禁用完成按钮
我使用jquery.steps，但是在按下完成按钮后无法禁用它。
这是我对该组件的首字母缩写：
$("#wizard").steps({
onFinished: function (event, currentIndex) {
//Do Function
},
labels: {
finish: "Attack the planet",
next: "Next",
previous: "Previous",
}
});
因此，当我按下完成按钮时，它会转到该功能，但我还需要它来禁用完成按钮，以便用户不要多次单击它。
任何帮助表示赞赏
推荐指数
解决办法
查看次数
无法将事件绑定到jquery.steps向导中的输入
我正在使用http://www.jquery-steps.com/上的向导.使用向导的所有内容都非常流畅,但是当我尝试将事件绑定到该向导中的输入字段时,它无法正常工作.以下是该问题的基本代码:
<div class="content">
<h1>Basic Demo</h1>
<div id="wizard">
<h2>First Step</h2>
<section>
<input type="text" class="namer" />
<div class="text">This should be replaced</div>
<h2>Second Step</h2>
<section>
<pdfsgdf</p>
</section>
</div>
</div>
<script>
$(".namer").change(function(e){
$(".text").html($(this).val());
});
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft"
});
});
</script>
JSFiddle位于http://jsfiddle.net/m23px/
推荐指数
解决办法
查看次数
Jquery步骤插件与CKeditor RTE插件冲突
嗨伙计们,我正在使用这个http://www.jquery-steps.com/Examples作为我的向导形式插件.
我注意到它与Ckeditor插件有冲突,出现Uncaught TypeError错误:无法读取属性'unselectable'为null.
我刚用jQuery表单向导尝试了这个帖子Ckeditor的解决方案,但它没有解决问题.
什么是最好的解决方案？
推荐指数
解决办法
查看次数
在bootstrap向导中提交每个步骤然后接下来
实际上我必须设计一个多步骤的表格.使用bootstrap向导我尝试了很多,但是当提交一个步骤(表单)时它跳转到第一步.如何在成功将当前数据保存到数据库后阻止它进入第一步并进入下一步.我使用的是php和javascript语言.有帮助吗？可能吗？或者我必须为每个步骤而不是向导选项卡设计页面.提前致谢.
推荐指数
解决办法
查看次数
使用jquery-steps选择不在表单内部工作
在应用jquery-steps之后,Chosen(selected.jquery.js)在表单内部不起作用.如果该代码在用于jquery-steps的表单之外运行,则它可以正常工作.我datePicker在jquery-steps中也遇到了同样的问题.我该如何解决这个问题？
推荐指数
解决办法
查看次数
如何显示加载...直到整个向导加载到 jQuery-steps 插件中？
我正在为我的向导类型表单使用 jQuery-steps 插件。我想显示加载...动画，直到整个向导完全加载。插件中为此提供了标签。我只是不知道如何启用它。
有什么猜想吗？
编辑 ：
这是我生成向导表单的代码
$(function () {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "form",
saveState: true,
transitionEffect: "slideLeft",
onStepChanging: function stepChange(event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
for(i=currentIndex;i>0;i--){
$("#sec"+i+"override").val(true);
}
return true;
}
e=event;
ci=currentIndex;
ni=newIndex;
var form = $('#wizard-p-'+currentIndex);
form.validate().settings.ignore = ":disabled,:hidden:not('.hiddenField')";
var res = form.valid();
if(res) {
var ress = form.submit();
if(check) {
return true ;
} else {
popup();
}
}
},
onFinishing: function(event, currentIndex) {
ci=currentIndex;
var form = $('#wizard-p-'+currentIndex);
form.validate().settings.ignore = ":disabled,:hidden:not('.hiddenField')"; …推荐指数
解决办法
查看次数
如何在 JQuery 步骤中有两个按钮
我真的需要一些帮助。所以我使用了一个Jquery Steps PlugIn。现在在这个插件中，当我们转到last tab它时，它有一个按钮名称为“完成”，单击调用"onFinishing"方法。
onFinishing: function () {
var loadedPrefix = MyNamespace.loadedPrefix;
var inputBoxPrefix = $('#SitePrefix').val();
$.ajax({
type: 'POST',
url: '/Settings/IsPrefixExists',
data: { newPrefix: inputBoxPrefix, prefixLoadedFromDB: loadedPrefix },
success: function (data) {
// do some stuff here
}
},
error: function () {
DisplayError('Failed to load the data.');
}
});
}
现在上面工作得很好。但是我的经理希望我在那里有两个按钮。一个为“保存”，另一个为“提交”。单击它们中的每一个将执行不同的操作。但是这个插件只有一个“完成”按钮。它是通过插件的 Javascript 代码生成的。我可以以某种方式使用 JQuery/Javascript 在那里多一个按钮，并针对它编写一些代码。
JS 小提琴样本：JS 小提琴样本
图 1：
我想要如下图 2 所示的内容：
示例示例： JS FIDDLE
推荐指数
解决办法
查看次数
单击JQuery按钮不起作用
我有一个正确运行的JQuery FIddle.它使用JQUERY Steps PlugIn.现在如果你在最后一步运行JQuery FIddle,你会发现三个按钮"Save","Previous"和"Finish".如果我点击,Save button我想显示一条提示"你已被点击".如果您滚动到JSFiddle中HTML部分的底部,您将找到下面的代码.
代码工作正常:
// on Save button click
$(".actions").on("click",".saveBtn",function(){
alert("You have been clicked!");
});
});
代码无效:
$( ".saveBtn" ).click(function() {
alert("You have been clicked");
});
问题:为什么第二个代码段不起作用？
推荐指数
解决办法
查看次数
使用bootstrap验证器逐步验证jquery-steps表单
我有一个使用jquery-steps(https://github.com/rstaib/jquery-steps)制作的多步骤表单.我正在使用bootstrap验证器插件(https://github.com/formvalidation/formvalidation.io)我能够在键入时获得在字段上工作的验证规则(它在用户输入时动态显示验证).
但是,如果必填字段留空,或者用户未在字段中提供有效信息并单击下一个字段,则该步骤将继续.我想阻止用户继续下一步,如果任何字段显示"无效"或未填写"必填"字段.怎么做到这一点？
javascript validation jquery jquery-steps bootstrapvalidator
推荐指数
解决办法
查看次数
jQuery步骤表单提交
我正在尝试实现在这里找到的JQuery-steps插件：https : //github.com/rstaib/jquery-steps
我不知道如何提交表格。我目前不使用字段验证。
这是我的JS：
<script>
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
onFinishing: function (event, currentIndex)
{
var form = $(this);
// Disable validation on fields that are disabled.
// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
//form.validate().settings.ignore = ":disabled";
// Start validation; Prevent form submission if false
//return form.valid();
},
onFinished: function (event, currentIndex)
{
var form = $(this);
// Submit form input
form.submit();
}
}); …推荐指数
解决办法
查看次数
标签 统计
jquery-steps ×13
jquery ×11
javascript ×8
formwizard ×1
html ×1
jsp ×1
validation ×1
wizard ×1