标签: jquery-steps
使用 API 更改 jquery-steps 中的设置
如何使用 API 更改查询步骤中的设置？如果我处于表单的编辑模式，我会尝试启用所有步骤。我尝试使用：
var wizard = $("#wizard").steps();
wizard.steps({
enableAllSteps: true
});
显然这是不正确的。
推荐指数
解决办法
查看次数
Jquery-steps上的表单验证:undefined不是.validate()函数的函数
我不明白最近发生了什么.我试图用Jquery步骤实现表单验证,当我点击下一个按钮时,我的表单应该被验证.但它不是,它在验证功能上返回错误.
这是我的剧本
$(function () {
$("#form-3").steps({
bodyTag: "fieldset",
onStepChanging: function (event, currentIndex, newIndex) {
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex) {
return true;
}
// Forbid suppressing "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age").val()) < 18) {
return false;
}
var form = $(this);
// Clean up if user went backward before
if (currentIndex < newIndex) {
// To remove error styles …推荐指数
解决办法
查看次数
jquery-steps:如何防止页面滚动到顶部？
我正在测试jquery-steps插件,如果我单击Next或Previous按钮(在底部)并且窗口顶部位于步骤'div top之下(即如果我的浏览器窗口高度太短,就会发生这种情况) ),滚动跳到身体顶部.
显然没有办法阻止这种情况,我尝试了一切,包括编辑插件代码.我唯一能做的就是通过在onStepChanging事件中添加一些代码来设置不同的滚动位置:
$("#steps-container").steps({
/* ... */
onStepChanging: function(event, currentIndex, priorIndex)
{
var top = 300;
var pos = $(window).scrollTop();
if (pos > top + 48)
{
$('body').scrollTop(top);
}
return true;
},
labels:
{
/* ... */
},
onFinishing: function (event, currentIndex) { submitOrderForm(); return true; }
});
有人可以帮我整理一下吗？谢谢!
推荐指数
解决办法
查看次数
jquery.steps和验证不起作用 - 表单内容不可见(不可见)
我已经问了一次这个问题,得到了一些有用的回复,标记为已回答并应用了所有内容.它似乎有效,但遗憾的是它没有.
问题是:不同步骤字段中的表单为空.好吧,我无法判断每一步是否为空,因为我无法在第一步中看到并输入任何内容,因此无法进行下一步,因为验证似乎正在起作用.
我不知道为什么.我坚持在jquery步骤页面上给出的示例:http: //www.jquery-steps.com/Examples#advanced-form
这是相同的代码但是:我的表格是空的.它看起来像这样:
我的代码是:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.steps.js"></script>
<link href="/Content/jquery.steps.css" rel="stylesheet">
</head>
<body>
<form id="example-advanced-form" action="#">
<h3>Account</h3>
<fieldset>
<legend>Account Information</legend>
<label for="userName-2">User name *</label>
<input id="userName-2" name="userName" type="text" class="required">
<label for="password-2">Password *</label>
<input id="password-2" name="password" type="text" class="required">
<label for="confirm-2">Confirm Password *</label>
<input id="confirm-2" name="confirm" type="text" class="required">
<p>(*) Mandatory</p>
</fieldset>
<h3>Profile</h3>
<fieldset>
<legend>Profile Information</legend>
<label for="name-2">First name *</label>
<input id="name-2" name="name" type="text" class="required">
<label for="surname-2">Last name …推荐指数
解决办法
查看次数
如何在jQuery步骤向导中获取当前步骤？
我正在寻找一种在jQuery Steps向导中获取当前步骤的方法。如果当前步骤是步骤1，我想执行一个操作。
推荐指数
解决办法
查看次数
在第一步jQuery步骤中删除上一个按钮
我正在使用jQuery Steps进行我的站点注册向导,工作非常棒,除了在第一步我得到上一个按钮,这没有任何意义,因为没有以前的内容.
我查看onInit()了API 中的函数,但没有设置enablePreviousButton,仅enableFinishButton和enableCancelButton.
有没有办法可以在第一步删除上一步按钮？
请求的代码:
$("#register-form").steps({
headerTag: "h3",
bodyTag: "fieldset",
autoFocus: true,
onInit: function (event, current) {
alert(current);
},
labels: {
finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
next: 'Next <i class="fa fa-chevron-right"></i>',
previous: '<i class="fa fa-chevron-left"></i> Previous'
}
});
HTML:
<h3><?= $lang_wizard_account; ?></h3>
<fieldset>
<legend><?= $lang_text_your_details; ?></legend>
<div class="form-group">
<label class="control-label col-sm-3" for="username"><b class="required">*</b> <?= $lang_entry_username; ?></label>
<div class="col-sm-8">
<input type="text" name="username" value="<?= $username; ?>" class="form-control" placeholder="<?= $lang_entry_username; ?>" autofocus id="username" …推荐指数
解决办法
查看次数
在Angular2中使用带有FormGroup的jquery-steps
请参阅以下示例.我已经加载jquery并jquery-steps进入项目,它正在工作.但是,在渲染视图后,更改输入框中的数据不会更新表单组中的值mainForm.我相信原因是jquery-steps动态删除并重构了表单的html,因此表单组不再链接到DOM.
有没有办法mainForm在jquery-steps重构html 后将FormGroup重新绑定到DOM ？
我读到ComponentResolver和ViewContainerRef,是它应该使用那些？你能举个例子说明如何在这种情况下使用它们吗？
谢谢!
<pre>{{ mainForm.value | json }}</pre>
<form [formGroup]="mainForm" id="mainForm" action="#">
<h1>Account</h1>
<div>
<label for="userName">User name *</label>
<input formControlName="userName" type="text" class="required">
<label for="password">Password *</label>
<input formControlName="password" type="text" class="required">
<label for="confirm">Confirm Password *</label>
<input formControlName="confirm" type="text" class="required">
<p>(*) Mandatory</p>
</div>
<h1>Finish</h1>
< div>
<input formControlName="acceptTerms" type="checkbox" class="required">
<label for="acceptTerms">I agree with the Terms and Conditions.</label>
</div>
</form>
import {Component, AfterContentInit} from …推荐指数
解决办法
查看次数
Jquery-Steps：如果您之前跳过了一步，则返回会陷入无结束循环
如果年龄小于 18 岁，我需要跳过一个步骤，这是上面链接中的一个类似示例，当我尝试实现相同的操作时，跳过一个步骤效果很好，但一旦我需要单击上一个按钮返回, JS 用来陷入 end less 循环!!
这里我创建了 jsfiddle 相同
这里是JS
$(function () {
$("#form-3").steps({
bodyTag: "fieldset",
headerTag: "h1",
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
return true;
}
if (newIndex === 3 && Number($("#age").val()) < 18) {
return false;
}
var form = $(this);
if (currentIndex < newIndex) {
$("#form-3 .body:eq(" + newIndex + ") label.error", form).remove();
$("#form-3 .body:eq(" + newIndex + ") .error", form).removeClass("error");
}
return true;
}, …推荐指数
解决办法
查看次数
使用jquery步骤，我们如何直接加载最后一步
我是 jquery 步骤的新手，我需要在加载表单后直接加载最后一步。有人可以建议我如何实现这一目标吗？
推荐指数
解决办法
查看次数
调整步骤的大小，以便所有字段都适合
我试图弄清楚如何根据用户所处的步骤调整背景大小，以便每个步骤的所有字段都会显示。是否可以根据他们所处的步骤来调整大小？我尝试过 css 和 js，但失败了，完全毁了我想要的外观。谁能指导我如何根据他们所处的步骤来调整背景大小？
在 Js 中我尝试添加这样的东西
onStepChanged: function (event, currentIndex, priorIndex)
{
if (currentIndex === 2)
{
$(".wizard-big.wizard > .content").css("min-height", "530px");
}
},
或者像这样：
onStepChanged: function (event, currentIndex, priorIndex)
{
$(".wizard-big.wizard > .content").css({
height: $("#div").height()
});
},
HTML5
<form id="form" action="#" class="wizard-big">
<h1>Employee</h1>
<fieldset>
<h2>Employee Information</h2>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Name</label>
<input id="name" name="name" type="text" class="form-control required">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date</label>
<input id="todaysDate" name="todaysDate" type="text" class="form-control required">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6"> …推荐指数
解决办法
查看次数
标签 统计
jquery-steps ×10
jquery ×8
javascript ×5
angular ×1
css ×1
dom ×1
forms ×1
html ×1
typescript ×1
validation ×1