我正在尝试实现 jquery-steps 并且在大多数情况下进展顺利。我遇到的一个问题是步骤选项卡没有完全响应。
我正在进行横向实现。它们随窗口调整大小，但它们不会像您的示例中那样堆叠，因此最终我会得到一些非常小、不可读的步骤选项卡。
不幸的是，开发者网站上的所有示例都在同一页面上，因此尝试确定使用什么 css 有点问题。
任何帮助将不胜感激:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<title>Page Title</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="css/hwr.css" rel="stylesheet" media="screen" />
<link href="Content/jquery.steps.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery.cookie.js"></script>
<script src="Scripts/jquery.steps.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/modernizr-2.6.2.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5Shiv/html5shiv.js"></script>
<script src="js/respond/respond.min.js"></script>
<![endif]-->
<script type='text/javascript'>
$(document).ready(function () {
$.validator.addMethod("postalCodeValid", function (validationPostalCode, element) {
return (this.optional(element) || validationPostalCode.startsWith("85"));
}, "You must be located in an '85' postal code to participate.");
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (str) {
return this.slice(0, str.length) == str;
};
}
function errorPlacement(error, element) {
element.before(error);
element.popover({
content: error.text(),
placement: function () {
return (element.parents(".content").width() >= 550) ? "right" : "top";
},
trigger: "focus hover"
});
$(".popover-content", element.next(".popover")).empty().prepend(error);
}
$("#form").steps({
headerTag: "h1",
bodyTag: "fieldset",
stepsOrientation: "horizontal",
transitionEffect: $.fn.steps.transitionEffect.fade,
transitionEffectSpeed: 400,
onStepChanging: function (event, currentIndex, newIndex) {
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex) {
return true;
}
if (currentIndex == 0) {
}
// 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
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
}
// Disable validation on fields that are disabled or hidden.
form.validate().settings.ignore = ":disabled,:hidden";
// Start validation; Prevent going forward if false
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {
// Suppress (skip) "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
$(this).steps("next");
}
// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3) {
$(this).steps("previous");
}
},
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();
}
}).validate({
errorPlacement: function (error, element) {
if (element.attr("name") == "isOfAge") {
error.insertAfter("#lblIsOfAge");
}
else {
error.insertBefore(element);
}
},
rules: {
confirm: {
equalTo: "#password"
},
isOfAge: {
equalTo: "#isOfAgeYes"
},
verifyPostalCode: {
minlength: 5,
number: true,
postalCodeValid: true
}
},
messages: {
isOfAge: "You must be at least 21 to participate."
}
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<form id="form" action="#">
<h1>Eligibility</h1>
<fieldset>
<legend>Eligibility Confirmation</legend>
<div style="width: 65%; font-size: larger; font-weight: bold;">
YOU MUST BE 21 OR OVER TO PARTICIPATE
</div>
<br /><br />
<label id="lblIsOfAge" style="color: red; font-size: larger; font-weight: bold;" for="isOfAge">Are you at least 21 years of age?</label>
<br />
<label><input type="radio" name="isOfAge" id="isOfAgeYes" value="yes" title="Yes" style="width: 40px;" /> Yes</label>
<label><input type="radio" name="isOfAge" id="isOfAgeNo" value="no" checked="checked" title="No" style="width: 40px;" /> No</label>
<br />
<br />
<br />
<div style="width: 65%; font-size: larger; font-weight: bold;">
Please enter the zip code of your current location.
</div>
<br />
<label for="verifyPostalCode">Current Zip Code *</label>
<input id="verifyPostalCode" name="verifyPostalCode" type="text" class="required" />
<p>(*) Mandatory</p>
</fieldset>
<h1>Profile</h1>
<fieldset>
<legend>Profile Information</legend>
<label for="name">First name *</label>
<input id="name" name="name" type="text" class="required" />
<label for="surname">Last name *</label>
<input id="surname" name="surname" type="text" class="required" />
<label for="email">Email *</label>
<input id="email" name="email" type="text" class="required email" />
<label for="address">Address</label>
<input id="address" name="address" type="text" />
<label for="age">Age (The warning step will show up if age is less than 18) *</label>
<input id="age" name="age" type="text" class="required number" />
<p>(*) Mandatory</p>
</fieldset>
<h1>Payment</h1>
<fieldset>
<legend>Payment Info & Billing Address</legend>
</fieldset>
<h1>Tickets</h1>
<fieldset>
<legend>Ticket specification</legend>
</fieldset>
<h1>Summary</h1>
<fieldset>
<legend>Purcahse Summary and Approval</legend>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
另外，在 jquery.steps.css 中我改变了这个:
.wizard > .steps > ul > li
{
width: 25%;
}
为此:
.wizard > .steps > ul > li
{
width: 20%;
}
保持第 5 步一致。
感谢任何见解。
日本
最佳答案
您使用的默认 CSS 只是一个很好的起点(这意味着它可以在任何地方工作并且很好地隔离，因此您可以更轻松地将它嵌入到任何类型的元素中——甚至是现有元素中)。
我在我的元素站点 ( http://www.jquery-steps.com ) 上所做的是特别为我的网站定制的。无论如何，我可以毫无问题地向您提供我的特殊 CSS，使响应式的事情发生。
在下面的 CSS 代码片段中，您会看到两个称为媒体查询的组，它们为平板电脑或手机等较小的设备提供丰富的用户体验。
@media (max-width: 600px)
{
.wizard > .steps > ul > li
{
width: 50%;
}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
margin-top: 0.5em;
}
.wizard.vertical > .steps,
.wizard.vertical > .actions
{
display: block;
float: none;
width: 100%;
}
.wizard.vertical > .content
{
display: block;
float: none;
margin: 0 0.5em 0.5em;
width: auto;
}
}
@media (max-width: 480px)
{
.wizard > .steps > ul > li
{
width: 100%;
}
}
希望对您有所帮助。如果没有，请随时回复我。
拉斐尔
关于javascript - 响应式 jquery-steps，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19392462/