我正在尝试实现jquery-steps,大部分工作都顺利进行。但我遇到的一个问题是步骤标签不能完全响应式。我正在进行水平方向的实现。它们可以随着窗口大小调整大小,但它们不像您的示例那样堆叠,因此最终我会得到一些非常小且难以阅读的步骤标签。不幸的是,开发者网站上所有的示例都在同一页上,所以尝试确定要使用的css有些棘手。任何帮助将不胜感激:
此外,在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%;
}
保持第五步的一致性。
感谢任何见解。
JP