A registration form is used for creating an account on the website or app. Last time we created a Responsive login form. Let’s how to do it.
Responsive registration form design:
It helps them to run the business successfully. This form collects a lot of information about users. And the main motive is to collect the maximum information.
So let’s discuss something about this form.
This form is divided into three main parts for getting information.
1. Personal information
2. Connect bank account
3. Set financial goals:
In personal information, it is collecting the information of the first name, last name, email, phone number, birth date, etc. It will help them to identify the interest of people by their age and gender.
Then in the second part, it is asking to connect a bank account. It is also providing suggestions for some banks. You can add your bank account for paying online if you wanna buy something online from this website.
Then in financial goals, it is asked to set any goal. It is offering three plans and you have to select anyone from here.
It is responsive across all devices and you can check it on all devices.
You might like it:
How to create a responsive registration form?
Anyone can simply create by following these below steps. You just need an Html code editor and a browser for viewing the output of your code. In your editor, you can create files and create three files of Html, CSS, and javascript.
Source code of Html:
Create an Html file and save it. Then copy and paste this Html code. It will help us to create the skeleton of the form and write all the content of the form for creating it. Like input fields, buttons, etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form by Fantacy Designs</title>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Font-->
<link rel="stylesheet" type="text/css" href="css/opensans-font.css">
<link rel="stylesheet" type="text/css" href="fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
<!-- Main Style Css -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="page-content">
<div class="form-v1-content">
<div class="wizard-form">
<form class="form-register" action="#" method="post">
<div id="form-total">
<!-- SECTION 1 -->
<h2>
<p class="step-icon"><span>01</span></p>
<span class="step-text">Peronal Infomation</span>
</h2>
<section>
<div class="inner">
<div class="wizard-header">
<h3 class="heading">Peronal Infomation</h3>
<p>Please enter your infomation and proceed to the next step so we can build your accounts. </p>
</div>
<div class="form-row">
<div class="form-holder">
<fieldset>
<legend>First Name</legend>
<input type="text" class="form-control" id="first-name" name="first-name" placeholder="First Name" required>
</fieldset>
</div>
<div class="form-holder">
<fieldset>
<legend>Last Name</legend>
<input type="text" class="form-control" id="last-name" name="last-name" placeholder="Last Name" required>
</fieldset>
</div>
</div>
<div class="form-row">
<div class="form-holder form-holder-2">
<fieldset>
<legend>Your Email</legend>
<input type="text" name="your_email" id="your_email" class="form-control" pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" placeholder="example@email.com" required>
</fieldset>
</div>
</div>
<div class="form-row">
<div class="form-holder form-holder-2">
<fieldset>
<legend>Phone Number</legend>
<input type="text" class="form-control" id="phone" name="phone" placeholder="+1 888-999-7777" required>
</fieldset>
</div>
</div>
<div class="form-row form-row-date">
<div class="form-holder form-holder-2">
<label class="special-label">Birth Date:</label>
<select name="month" id="month">
<option value="MM" disabled selected>MM</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select name="date" id="date">
<option value="DD" disabled selected>DD</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
</select>
<select name="year" id="year">
<option value="YYYY" disabled selected>YYYY</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-holder form-holder-2">
<input type="text" class="form-control input-border" id="ssn" name="ssn" placeholder="SSN" required>
</div>
</div>
</div>
</section>
<!-- SECTION 2 -->
<h2>
<p class="step-icon"><span>02</span></p>
<span class="step-text">Connect Bank Account</span>
</h2>
<section>
<div class="inner">
<div class="wizard-header">
<h3 class="heading">Connect Bank Account</h3>
<p>Please enter your infomation and proceed to the next step so we can build your accounts.</p>
</div>
<div class="form-row">
<div class="form-holder form-holder-1">
<input type="text" name="find_bank" id="find_bank" placeholder="Find Your Bank" class="form-control" required>
</div>
</div>
<div class="form-row-total">
<div class="form-row">
<div class="form-holder form-holder-2 form-holder-3">
<input type="radio" class="radio" name="bank-1" id="bank-1" value="bank-1" checked>
<label class="bank-images label-above bank-1-label" for="bank-1">
<img src="images/form-v1-1.png" alt="bank-1">
</label>
<input type="radio" class="radio" name="bank-2" id="bank-2" value="bank-2">
<label class="bank-images label-above bank-2-label" for="bank-2">
<img src="images/form-v1-2.png" alt="bank-2">
</label>
<input type="radio" class="radio" name="bank-3" id="bank-3" value="bank-3">
<label class="bank-images label-above bank-3-label" for="bank-3">
<img src="images/form-v1-3.png" alt="bank-3">
</label>
</div>
</div>
<div class="form-row">
<div class="form-holder form-holder-2 form-holder-3">
<input type="radio" class="radio" name="bank-4" id="bank-4" value="bank-4">
<label class="bank-images bank-4-label" for="bank-4">
<img src="images/form-v1-4.png" alt="bank-4">
</label>
<input type="radio" class="radio" name="bank-5" id="bank-5" value="bank-5">
<label class="bank-images bank-5-label" for="bank-5">
<img src="images/form-v1-5.png" alt="bank-5">
</label>
<input type="radio" class="radio" name="bank-6" id="bank-6" value="bank-6">
<label class="bank-images bank-6-label" for="bank-6">
<img src="images/form-v1-6.png" alt="bank-6">
</label>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 3 -->
<h2>
<p class="step-icon"><span>03</span></p>
<span class="step-text">Set Financial Goals</span>
</h2>
<section>
<div class="inner">
<div class="wizard-header">
<h3 class="heading">Set Financial Goals</h3>
<p>Please enter your infomation and proceed to the next step so we can build your accounts.</p>
</div>
<div class="form-row">
<div class="form-holder form-holder-2">
<input type="radio" class="radio" name="radio1" id="plan-1" value="plan-1">
<label class="plan-icon plan-1-label" for="plan-1">
<img src="images/form-v1-icon-2.png" alt="pay-1">
</label>
<div class="plan-total">
<span class="plan-title">Specific Plan</span>
<p class="plan-text">Pellentesque nec nam aliquam sem et volutpat consequat mauris nunc congue nisi.</p>
</div>
<input type="radio" class="radio" name="radio1" id="plan-2" value="plan-2">
<label class="plan-icon plan-2-label" for="plan-2">
<img src="images/form-v1-icon-2.png" alt="pay-1">
</label>
<div class="plan-total">
<span class="plan-title">Medium Plan</span>
<p class="plan-text">Pellentesque nec nam aliquam sem et volutpat consequat mauris nunc congue nisi.</p>
</div>
<input type="radio" class="radio" name="radio1" id="plan-3" value="plan-3" checked>
<label class="plan-icon plan-3-label" for="plan-3">
<img src="images/form-v1-icon-3.png" alt="pay-2">
</label>
<div class="plan-total">
<span class="plan-title">Special Plan</span>
<p class="plan-text">Pellentesque nec nam aliquam sem et volutpat consequat mauris nunc congue nisi.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.steps.js"></script>
<script src="js/main.js"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
Source code of CSS:
Then create a file of CSS and paste the below code by copying it into your CSS file. CSS will help us to use this content properly by adding different icons, colors, font style, font family, etc.
body {
margin: 0;
}
.page-content {
width: 100%;
margin: 0 auto;
display: flex;
display: -webkit-flex;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
background-image: linear-gradient(to right, #262626, #262626 );
}
.form-v1-content {
width: 820px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
margin: 145px 0;
font-family: 'Open Sans', sans-serif;
position: relative;
display: flex;
display: -webkit-flex;
}
.form-v1-content .wizard-form {
width: 100%;
}
.form-register .vertical {
display: block;
width: 100%;
overflow: hidden;
background: #262626;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.form-register .steps {
float: left;
width: 280px;
background: #262626;
}
.form-register .steps ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.form-register .steps li,
.form-register .steps li.current {
outline: none;
-o-outline: none;
-ms-outline: none;
-moz-outline: none;
-webkit-outline: none;
position: relative;
}
.form-register .steps li::after {
width: 280px;
height: 1px;
content: "";
background: #ddd;
position: absolute;
top: 100%;
}
.form-register .steps li .current-info {
display: none;
}
.form-register .steps li a {
text-decoration: none;
outline: none;
-o-outline: none;
-ms-outline: none;
-moz-outline: none;
-webkit-outline: none;
}
.form-register .steps li a .title {
display: flex;
padding: 15px 25px 15px 35px;
}
.form-register .steps li a .title .step-icon {
width: 40px;
height: 40px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #ddd;
position: relative;
outline: none;
-o-outline: none;
-ms-outline: none;
-moz-outline: none;
-webkit-outline: none;
color: #333;
font-size: 16px;
margin-right: 15px;
}
.form-register .steps li a .step-icon span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.form-register .steps li.current a .step-icon,
.form-register .steps li.current a:active .step-icon,
.form-register .steps li.done a .step-icon,
.form-register .steps li.done a:active .step-icon {
background: #1DBF73 ;
color: #fff;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
-o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
-ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
}
.form-register .steps li a .step-text {
color: #ccc;
font-weight: 600;
font-size: 15px;
padding: 25px 0 8px;
}
.form-register .steps .current .step-text,
.form-register .steps .done .step-text {
color: #fff;
}
.form-register .content {
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
float: right;
width: 540px;
background: #fff;
}
.form-register .content h2 {
display: none;
}
.form-register .content .inner {
padding: 0 50px;
}
.form-register .content .wizard-header {
text-align: center;
padding: 37px 30px 13px;
}
.form-register .content #form-total-p-2 .wizard-header {
text-align: center;
padding: 37px 30px 30px;
}
.form-register .content .inner h3 {
font-size: 22px;
color: #333;
font-weight: 700;
margin: 0;
}
.form-register .content .inner p {
color: #666;
font-size: 14px;
font-weight: 600;
}
.inner .form-row-total {
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
margin-bottom: 40px;
margin-top: 10px;
}
.inner .form-row {
display: flex;
margin: 0 -10px;
position: relative;
}
.inner .form-row .form-holder {
width: 50%;
padding: 0 10px;
margin-bottom: 17px;
position: relative;
}
.inner .form-row .form-holder.form-holder-1 {
width: 65.3%;
}
.inner .form-row .form-holder.form-holder-2 {
width: 100%;
position: relative;
}
.inner .form-row .form-holder.form-holder-3 {
margin-bottom: 0;
}
.inner .form-row .form-row-inner {
position: relative;
}
.inner .form-row #radio {
margin-top: -5px;
margin-left: 7px;
}
.inner .form-row #checkbox {
margin: 10px 0 28px 11px;
font-size: 15px;
color: #666;
font-weight: 400;
}
.inner .form-row .form-holder label.special-label {
display: block;
float: none;
margin-top: 8px;
margin-bottom: 15px;
padding-right: 0px;
color: #666;
font-size: 16px;
font-weight: 400;
}
.inner .form-row .form-holder fieldset {
border: 2px solid #e5e5e5;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
padding: 0 20px;
}
.inner .form-row .form-holder legend {
font-size: 11px;
font-weight: 700;
color: #999;
}
.inner .form-row .form-holder input,
.inner .form-row .form-holder select {
width: 100%;
padding: 5px 0px 13px;
border: none;
appearance: unset;
-moz-appearance: unset;
-webkit-appearance: unset;
-o-appearance: unset;
-ms-appearance: unset;
outline: none;
-moz-outline: none;
-webkit-outline: none;
-o-outline: none;
-ms-outline: none;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 14px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
}
.inner .form-row .form-holder input {
color: #333;
}
.inner .form-row .form-holder input#find_bank {
border: 2px solid #e5e5e5;
padding: 11px 20px;
}
.inner .form-row .form-holder input.radio {
display: none;
}
.inner .form-row-total label {
width: 146.5px;
height: 130px;
display: block;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left;
text-align: center;
}
.inner .form-row-total label img {
padding-top: 25px;
}
.inner .form-row-total .label-above {
border-bottom: 1px solid #e5e5e5;
}
.inner .form-row-total .bank-1-label,
.inner .form-row-total .bank-2-label,
.inner .form-row-total .bank-4-label,
.inner .form-row-total .bank-5-label {
border-right: 1px solid #e5e5e5;
}
.inner .form-row-total input#bank-1:checked + label,
.inner .form-row-total input#bank-2:checked + label,
.inner .form-row-total input#bank-3:checked + label,
.inner .form-row-total input#bank-4:checked + label,
.inner .form-row-total input#bank-5:checked + label,
.inner .form-row-total input#bank-6:checked + label {
border: none;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
}
.inner .form-row .form-holder .plan-icon {
background: #999;
width: 65px;
height: 65px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: relative;
float: left;
margin-right: 23px;
margin-top: -4px;
cursor: pointer;
}
.inner .form-row .form-holder .plan-icon img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
.inner .form-row .form-holder .plan-total {
margin-bottom: 55px;
}
.inner .form-row .form-holder .plan-total .plan-title {
font-size: 18px;
color: #333;
font-weight: 700;
}
.inner .form-row .form-holder .plan-total .plan-text {
font-size: 14px;
color: #666;
font-weight: 600;
margin: 0;
padding-top: 5px;
}
.inner .form-row .form-holder input#plan-1:checked + label,
.inner .form-row .form-holder input#plan-2:checked + label,
.inner .form-row .form-holder input#plan-3:checked + label {
background: #4fab40;
}
.inner .form-row .form-holder select {
font-size: 14px;
color: #666;
font-weight: 600;
background: #fff url('../images/form-v1-icon.png') no-repeat scroll;
background-position: right 6px center;
z-index: 1;
cursor: pointer;
position: relative;
border: 2px solid #e5e5e5;
padding: 10.4px 13px;
}
.inner .form-row .form-holder .input-border {
border: 2px solid #e5e5e5;
padding: 11px 20px;
margin-top: 8px;
}
.inner .form-row.form-row-date .form-holder select {
float: left;
width: 20.6%;
margin-right: 15px;
}
.inner .form-row.form-row-date .form-holder select#year {
width: 27.28%;
}
.inner .form-row .form-holder input::-webkit-input-placeholder { Chrome/Opera/Safari
color: #666;
font-size: 14px;
}
.inner .form-row .form-holder input::-moz-placeholder { Firefox 19+
color: #666;
font-size: 14px;
}
.inner .form-row .form-holder input:-ms-input-placeholder { IE 10+
color: #666;
font-size: 14px;
}
.inner .form-row .form-holder input:-moz-placeholder { Firefox 18-
color: #666;
font-size: 14px;
}
.actions {
float: right;
width: 540px;
background: #fff;
}
.actions ul {
list-style: none;
padding: 0 50px;
margin: 13px 0 35px;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
}
.actions ul li.disabled,
.actions ul li:first-child {
opacity: 0;
}
.actions ul li {
padding: 0;
border: none;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: inline-flex;
height: 50px;
width: 50px;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
background: #262626;
cursor: pointer;
font-size: 18px;
}
.actions ul li:hover {
background: #1DBF73;
transition: .5s;
}
.actions ul li a {
color: #fff;
text-decoration: none;
padding: 13px 19px;
}
/* Responsive */
@media screen and (max-width: 1199px) {
.form-v1-content {
margin: 180px 20px;
}
}
@media screen and (max-width: 991px) {
.form-register .vertical {
background: #fff;
}
.form-register .steps,
.form-register .content,
.actions {
float: none;
width: 100%;
}
.form-register .content,
.inner .form-row-total {
box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.form-register .steps li a .title {
justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
}
.form-register .steps li::after {
width: 100%;
}
.inner .form-row .form-holder.form-holder-3 {
margin-bottom: 20px;
}
.inner .form-row-total label {
margin-right: 20px;
border: 1px solid #e5e5e5;
}
}
@media screen and (max-width: 767px) and (min-width: 576px) {
.inner .form-row-total label {
width: 120px;
}
}
@media screen and (max-width: 767px) {
.inner .form-row.form-row-date .form-holder select {
width: 17.5%;
margin-right: 20px;
}
}
@media screen and (max-width: 575px) {
.form-register .content .inner {
padding: 0 30px;
}
.form-register .content .wizard-header,
.form-register .content #form-total-p-2 .wizard-header {
padding: 37px 0px 13px;
}
.inner .form-row {
flex-direction: column;
-o-flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
margin: 0;
}
.inner .form-row .form-holder {
width: 100%;
}
.inner .form-row .form-holder.form-holder-1 {
width: 100%;
}
.inner .form-row .form-holder {
padding: 0;
}
.inner .form-row.form-row-date .form-holder select#year,
.inner .form-row.form-row-date .form-holder select {
width: 100%;
margin-bottom: 20px;
}
.inner .form-row .form-holder .plan-icon {
margin-top: 4px;
}
.inner .form-row .form-holder .plan-total {
margin-left: 90px;
}
.inner .form-row-total label {
margin-bottom: 20px;
}
.inner .form-row .form-holder.form-holder-3 {
margin-bottom: 0;
}
}
Source code of javascript:
Again create a file of javascript in your editor. Save it and paste this code by clicking at copy button on this code. Javascript is a dynamic language used for making our web pages dynamic. Without using it we cant make our web pages dynamic. We can only create static websites by using Html and CSS.
/*!
* jQuery Steps v1.1.0 - 09/04/2014
* Copyright (c) 2014 Rafael Staib (http://www.jquery-steps.com)
* Licensed under MIT http://www.opensource.org/licenses/MIT
*/
;(function ($, undefined)
{
$.fn.extend({
_aria: function (name, value)
{
return this.attr("aria-" + name, value);
},
_removeAria: function (name)
{
return this.removeAttr("aria-" + name);
},
_enableAria: function (enable)
{
return (enable == null || enable) ?
this.removeClass("disabled")._aria("disabled", "false") :
this.addClass("disabled")._aria("disabled", "true");
},
_showAria: function (show)
{
return (show == null || show) ?
this.show()._aria("hidden", "false") :
this.hide()._aria("hidden", "true");
},
_selectAria: function (select)
{
return (select == null || select) ?
this.addClass("current")._aria("selected", "true") :
this.removeClass("current")._aria("selected", "false");
},
_id: function (id)
{
return (id) ? this.attr("id", id) : this.attr("id");
}
});
if (!String.prototype.format)
{
String.prototype.format = function()
{
var args = (arguments.length === 1 && $.isArray(arguments[0])) ? arguments[0] : arguments;
var formattedString = this;
for (var i = 0; i < args.length; i++)
{
var pattern = new RegExp("\\{" + i + "\\}", "gm");
formattedString = formattedString.replace(pattern, args[i]);
}
return formattedString;
};
}
/**
* A global unique id count.
*
* @static
* @private
* @property _uniqueId
* @type Integer
**/
var _uniqueId = 0;
/**
* The plugin prefix for cookies.
*
* @final
* @private
* @property _cookiePrefix
* @type String
**/
var _cookiePrefix = "jQu3ry_5teps_St@te_";
/**
* Suffix for the unique tab id.
*
* @final
* @private
* @property _tabSuffix
* @type String
* @since 0.9.7
**/
var _tabSuffix = "-t-";
/**
* Suffix for the unique tabpanel id.
*
* @final
* @private
* @property _tabpanelSuffix
* @type String
* @since 0.9.7
**/
var _tabpanelSuffix = "-p-";
/**
* Suffix for the unique title id.
*
* @final
* @private
* @property _titleSuffix
* @type String
* @since 0.9.7
**/
var _titleSuffix = "-h-";
/**
* An error message for an "index out of range" error.
*
* @final
* @private
* @property _indexOutOfRangeErrorMessage
* @type String
**/
var _indexOutOfRangeErrorMessage = "Index out of range.";
/**
* An error message for an "missing corresponding element" error.
*
* @final
* @private
* @property _missingCorrespondingElementErrorMessage
* @type String
**/
var _missingCorrespondingElementErrorMessage = "One or more corresponding step {0} are missing.";
/**
* Adds a step to the cache.
*
* @static
* @private
* @method addStepToCache
* @param wizard {Object} A jQuery wizard object
* @param step {Object} The step object to add
**/
function addStepToCache(wizard, step)
{
getSteps(wizard).push(step);
}
function analyzeData(wizard, options, state)
{
var stepTitles = wizard.children(options.headerTag),
stepContents = wizard.children(options.bodyTag);
// Validate content
if (stepTitles.length > stepContents.length)
{
throwError(_missingCorrespondingElementErrorMessage, "contents");
}
else if (stepTitles.length < stepContents.length)
{
throwError(_missingCorrespondingElementErrorMessage, "titles");
}
var startIndex = options.startIndex;
state.stepCount = stepTitles.length;
// Tries to load the saved state (step position)
if (options.saveState && $.cookie)
{
var savedState = $.cookie(_cookiePrefix + getUniqueId(wizard));
// Sets the saved position to the start index if not undefined or out of range
var savedIndex = parseInt(savedState, 0);
if (!isNaN(savedIndex) && savedIndex < state.stepCount)
{
startIndex = savedIndex;
}
}
state.currentIndex = startIndex;
stepTitles.each(function (index)
{
var item = $(this), // item == header
content = stepContents.eq(index),
modeData = content.data("mode"),
mode = (modeData == null) ? contentMode.html : getValidEnumValue(contentMode,
(/^\s*$/.test(modeData) || isNaN(modeData)) ? modeData : parseInt(modeData, 0)),
contentUrl = (mode === contentMode.html || content.data("url") === undefined) ?
"" : content.data("url"),
contentLoaded = (mode !== contentMode.html && content.data("loaded") === "1"),
step = $.extend({}, stepModel, {
title: item.html(),
content: (mode === contentMode.html) ? content.html() : "",
contentUrl: contentUrl,
contentMode: mode,
contentLoaded: contentLoaded
});
addStepToCache(wizard, step);
});
}
/**
* Triggers the onCanceled event.
*
* @static
* @private
* @method cancel
* @param wizard {Object} The jQuery wizard object
**/
function cancel(wizard)
{
wizard.triggerHandler("canceled");
}
function decreaseCurrentIndexBy(state, decreaseBy)
{
return state.currentIndex - decreaseBy;
}
/**
* Removes the control functionality completely and transforms the current state to the initial HTML structure.
*
* @static
* @private
* @method destroy
* @param wizard {Object} A jQuery wizard object
**/
function destroy(wizard, options)
{
var eventNamespace = getEventNamespace(wizard);
// Remove virtual data objects from the wizard
wizard.unbind(eventNamespace).removeData("uid").removeData("options")
.removeData("state").removeData("steps").removeData("eventNamespace")
.find(".actions a").unbind(eventNamespace);
// Remove attributes and CSS classes from the wizard
wizard.removeClass(options.clearFixCssClass + " vertical");
var contents = wizard.find(".content > *");
// Remove virtual data objects from panels and their titles
contents.removeData("loaded").removeData("mode").removeData("url");
// Remove attributes, CSS classes and reset inline styles on all panels and their titles
contents.removeAttr("id").removeAttr("role").removeAttr("tabindex")
.removeAttr("class").removeAttr("style")._removeAria("labelledby")
._removeAria("hidden");
// Empty panels if the mode is set to 'async' or 'iframe'
wizard.find(".content > [data-mode='async'],.content > [data-mode='iframe']").empty();
var wizardSubstitute = $("<{0} class=\"{1}\"></{0}>".format(wizard.get(0).tagName, wizard.attr("class")));
var wizardId = wizard._id();
if (wizardId != null && wizardId !== "")
{
wizardSubstitute._id(wizardId);
}
wizardSubstitute.html(wizard.find(".content").html());
wizard.after(wizardSubstitute);
wizard.remove();
return wizardSubstitute;
}
/**
* Triggers the onFinishing and onFinished event.
*
* @static
* @private
* @method finishStep
* @param wizard {Object} The jQuery wizard object
* @param state {Object} The state container of the current wizard
**/
function finishStep(wizard, state)
{
var currentStep = wizard.find(".steps li").eq(state.currentIndex);
if (wizard.triggerHandler("finishing", [state.currentIndex]))
{
currentStep.addClass("done").removeClass("error");
wizard.triggerHandler("finished", [state.currentIndex]);
}
else
{
currentStep.addClass("error");
}
}
/**
* Gets or creates if not exist an unique event namespace for the given wizard instance.
*
* @static
* @private
* @method getEventNamespace
* @param wizard {Object} A jQuery wizard object
* @return {String} Returns the unique event namespace for the given wizard
*/
function getEventNamespace(wizard)
{
var eventNamespace = wizard.data("eventNamespace");
if (eventNamespace == null)
{
eventNamespace = "." + getUniqueId(wizard);
wizard.data("eventNamespace", eventNamespace);
}
return eventNamespace;
}
function getStepAnchor(wizard, index)
{
var uniqueId = getUniqueId(wizard);
return wizard.find("#" + uniqueId + _tabSuffix + index);
}
function getStepPanel(wizard, index)
{
var uniqueId = getUniqueId(wizard);
return wizard.find("#" + uniqueId + _tabpanelSuffix + index);
}
function getStepTitle(wizard, index)
{
var uniqueId = getUniqueId(wizard);
return wizard.find("#" + uniqueId + _titleSuffix + index);
}
function getOptions(wizard)
{
return wizard.data("options");
}
function getState(wizard)
{
return wizard.data("state");
}
function getSteps(wizard)
{
return wizard.data("steps");
}
/**
* Gets a specific step object by index.
*
* @static
* @private
* @method getStep
* @param index {Integer} An integer that belongs to the position of a step
* @return {Object} A specific step object
**/
function getStep(wizard, index)
{
var steps = getSteps(wizard);
if (index < 0 || index >= steps.length)
{
throwError(_indexOutOfRangeErrorMessage);
}
return steps[index];
}
/**
* Gets or creates if not exist an unique id from the given wizard instance.
*
* @static
* @private
* @method getUniqueId
* @param wizard {Object} A jQuery wizard object
* @return {String} Returns the unique id for the given wizard
*/
function getUniqueId(wizard)
{
var uniqueId = wizard.data("uid");
if (uniqueId == null)
{
uniqueId = wizard._id();
if (uniqueId == null)
{
uniqueId = "steps-uid-".concat(_uniqueId);
wizard._id(uniqueId);
}
_uniqueId++;
wizard.data("uid", uniqueId);
}
return uniqueId;
}
/**
* Gets a valid enum value by checking a specific enum key or value.
*
* @static
* @private
* @method getValidEnumValue
* @param enumType {Object} Type of enum
* @param keyOrValue {Object} Key as `String` or value as `Integer` to check for
*/
function getValidEnumValue(enumType, keyOrValue)
{
validateArgument("enumType", enumType);
validateArgument("keyOrValue", keyOrValue);
// Is key
if (typeof keyOrValue === "string")
{
var value = enumType[keyOrValue];
if (value === undefined)
{
throwError("The enum key '{0}' does not exist.", keyOrValue);
}
return value;
}
// Is value
else if (typeof keyOrValue === "number")
{
for (var key in enumType)
{
if (enumType[key] === keyOrValue)
{
return keyOrValue;
}
}
throwError("Invalid enum value '{0}'.", keyOrValue);
}
// Type is not supported
else
{
throwError("Invalid key or value type.");
}
}
/**
* Routes to the next step.
*
* @static
* @private
* @method goToNextStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @return {Boolean} Indicates whether the action executed
**/
function goToNextStep(wizard, options, state)
{
return paginationClick(wizard, options, state, increaseCurrentIndexBy(state, 1));
}
/**
* Routes to the previous step.
*
* @static
* @private
* @method goToPreviousStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @return {Boolean} Indicates whether the action executed
**/
function goToPreviousStep(wizard, options, state)
{
return paginationClick(wizard, options, state, decreaseCurrentIndexBy(state, 1));
}
/**
* Routes to a specific step by a given index.
*
* @static
* @private
* @method goToStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) to route to
* @return {Boolean} Indicates whether the action succeeded or failed
**/
function goToStep(wizard, options, state, index)
{
if (index < 0 || index >= state.stepCount)
{
throwError(_indexOutOfRangeErrorMessage);
}
if (options.forceMoveForward && index < state.currentIndex)
{
return;
}
var oldIndex = state.currentIndex;
if (wizard.triggerHandler("stepChanging", [state.currentIndex, index]))
{
// Save new state
state.currentIndex = index;
saveCurrentStateToCookie(wizard, options, state);
// Change visualisation
refreshStepNavigation(wizard, options, state, oldIndex);
refreshPagination(wizard, options, state);
loadAsyncContent(wizard, options, state);
startTransitionEffect(wizard, options, state, index, oldIndex, function()
{
wizard.triggerHandler("stepChanged", [index, oldIndex]);
});
}
else
{
wizard.find(".steps li").eq(oldIndex).addClass("error");
}
return true;
}
function increaseCurrentIndexBy(state, increaseBy)
{
return state.currentIndex + increaseBy;
}
/**
* Initializes the component.
*
* @static
* @private
* @method initialize
* @param options {Object} The component settings
**/
function initialize(options)
{
/*jshint -W040 */
var opts = $.extend(true, {}, defaults, options);
return this.each(function ()
{
var wizard = $(this);
var state = {
currentIndex: opts.startIndex,
currentStep: null,
stepCount: 0,
transitionElement: null
};
// Create data container
wizard.data("options", opts);
wizard.data("state", state);
wizard.data("steps", []);
analyzeData(wizard, opts, state);
render(wizard, opts, state);
registerEvents(wizard, opts);
// Trigger focus
if (opts.autoFocus && _uniqueId === 0)
{
getStepAnchor(wizard, opts.startIndex).focus();
}
wizard.triggerHandler("init", [opts.startIndex]);
});
}
/**
* Inserts a new step to a specific position.
*
* @static
* @private
* @method insertStep
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) to add
* @param step {Object} The step object to add
* @example
* $("#wizard").steps().insert(0, {
* title: "Title",
* content: "", // optional
* contentMode: "async", // optional
* contentUrl: "/Content/Step/1" // optional
* });
* @chainable
**/
function insertStep(wizard, options, state, index, step)
{
if (index < 0 || index > state.stepCount)
{
throwError(_indexOutOfRangeErrorMessage);
}
// TODO: Validate step object
// Change data
step = $.extend({}, stepModel, step);
insertStepToCache(wizard, index, step);
if (state.currentIndex !== state.stepCount && state.currentIndex >= index)
{
state.currentIndex++;
saveCurrentStateToCookie(wizard, options, state);
}
state.stepCount++;
var contentContainer = wizard.find(".content"),
header = $("<{0}>{1}</{0}>".format(options.headerTag, step.title)),
body = $("<{0}></{0}>".format(options.bodyTag));
if (step.contentMode == null || step.contentMode === contentMode.html)
{
body.html(step.content);
}
if (index === 0)
{
contentContainer.prepend(body).prepend(header);
}
else
{
getStepPanel(wizard, (index - 1)).after(body).after(header);
}
renderBody(wizard, state, body, index);
renderTitle(wizard, options, state, header, index);
refreshSteps(wizard, options, state, index);
if (index === state.currentIndex)
{
refreshStepNavigation(wizard, options, state);
}
refreshPagination(wizard, options, state);
return wizard;
}
/**
* Inserts a step object to the cache at a specific position.
*
* @static
* @private
* @method insertStepToCache
* @param wizard {Object} A jQuery wizard object
* @param index {Integer} The position (zero-based) to add
* @param step {Object} The step object to add
**/
function insertStepToCache(wizard, index, step)
{
getSteps(wizard).splice(index, 0, step);
}
/**
* Handles the keyup DOM event for pagination.
*
* @static
* @private
* @event keyup
* @param event {Object} An event object
*/
function keyUpHandler(event)
{
var wizard = $(this),
options = getOptions(wizard),
state = getState(wizard);
if (options.suppressPaginationOnFocus && wizard.find(":focus").is(":input"))
{
event.preventDefault();
return false;
}
var keyCodes = { left: 37, right: 39 };
if (event.keyCode === keyCodes.left)
{
event.preventDefault();
goToPreviousStep(wizard, options, state);
}
else if (event.keyCode === keyCodes.right)
{
event.preventDefault();
goToNextStep(wizard, options, state);
}
}
/**
* Loads and includes async content.
*
* @static
* @private
* @method loadAsyncContent
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function loadAsyncContent(wizard, options, state)
{
if (state.stepCount > 0)
{
var currentIndex = state.currentIndex,
currentStep = getStep(wizard, currentIndex);
if (!options.enableContentCache || !currentStep.contentLoaded)
{
switch (getValidEnumValue(contentMode, currentStep.contentMode))
{
case contentMode.iframe:
wizard.find(".content > .body").eq(state.currentIndex).empty()
.html("<iframe src=\"" + currentStep.contentUrl + "\" frameborder=\"0\" scrolling=\"no\" />")
.data("loaded", "1");
break;
case contentMode.async:
var currentStepContent = getStepPanel(wizard, currentIndex)._aria("busy", "true")
.empty().append(renderTemplate(options.loadingTemplate, { text: options.labels.loading }));
$.ajax({ url: currentStep.contentUrl, cache: false }).done(function (data)
{
currentStepContent.empty().html(data)._aria("busy", "false").data("loaded", "1");
wizard.triggerHandler("contentLoaded", [currentIndex]);
});
break;
}
}
}
}
/**
* Fires the action next or previous click event.
*
* @static
* @private
* @method paginationClick
* @param wizard {Object} The jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) to route to
* @return {Boolean} Indicates whether the event fired successfully or not
**/
function paginationClick(wizard, options, state, index)
{
var oldIndex = state.currentIndex;
if (index >= 0 && index < state.stepCount && !(options.forceMoveForward && index < state.currentIndex))
{
var anchor = getStepAnchor(wizard, index),
parent = anchor.parent(),
isDisabled = parent.hasClass("disabled");
// Enable the step to make the anchor clickable!
parent._enableAria();
anchor.click();
// An error occured
if (oldIndex === state.currentIndex && isDisabled)
{
// Disable the step again if current index has not changed; prevents click action.
parent._enableAria(false);
return false;
}
return true;
}
return false;
}
/**
* Fires when a pagination click happens.
*
* @static
* @private
* @event click
* @param event {Object} An event object
*/
function paginationClickHandler(event)
{
event.preventDefault();
var anchor = $(this),
wizard = anchor.parent().parent().parent().parent(),
options = getOptions(wizard),
state = getState(wizard),
href = anchor.attr("href");
switch (href.substring(href.lastIndexOf("#") + 1))
{
case "cancel":
cancel(wizard);
break;
case "finish":
finishStep(wizard, state);
break;
case "next":
goToNextStep(wizard, options, state);
break;
case "previous":
goToPreviousStep(wizard, options, state);
break;
}
}
/**
* Refreshs the visualization state for the entire pagination.
*
* @static
* @private
* @method refreshPagination
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function refreshPagination(wizard, options, state)
{
if (options.enablePagination)
{
var finish = wizard.find(".actions a[href$='#finish']").parent(),
next = wizard.find(".actions a[href$='#next']").parent();
if (!options.forceMoveForward)
{
var previous = wizard.find(".actions a[href$='#previous']").parent();
previous._enableAria(state.currentIndex > 0);
}
if (options.enableFinishButton && options.showFinishButtonAlways)
{
finish._enableAria(state.stepCount > 0);
next._enableAria(state.stepCount > 1 && state.stepCount > (state.currentIndex + 1));
}
else
{
finish._showAria(options.enableFinishButton && state.stepCount === (state.currentIndex + 1));
next._showAria(state.stepCount === 0 || state.stepCount > (state.currentIndex + 1)).
_enableAria(state.stepCount > (state.currentIndex + 1) || !options.enableFinishButton);
}
}
}
/**
* Refreshs the visualization state for the step navigation (tabs).
*
* @static
* @private
* @method refreshStepNavigation
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param [oldIndex] {Integer} The index of the prior step
*/
function refreshStepNavigation(wizard, options, state, oldIndex)
{
var currentOrNewStepAnchor = getStepAnchor(wizard, state.currentIndex),
currentInfo = $("<span class=\"current-info audible\">" + options.labels.current + " </span>"),
stepTitles = wizard.find(".content > .title");
if (oldIndex != null)
{
var oldStepAnchor = getStepAnchor(wizard, oldIndex);
oldStepAnchor.parent().addClass("done").removeClass("error")._selectAria(false);
stepTitles.eq(oldIndex).removeClass("current").next(".body").removeClass("current");
currentInfo = oldStepAnchor.find(".current-info");
currentOrNewStepAnchor.focus();
}
currentOrNewStepAnchor.prepend(currentInfo).parent()._selectAria().removeClass("done")._enableAria();
stepTitles.eq(state.currentIndex).addClass("current").next(".body").addClass("current");
}
/**
* Refreshes step buttons and their related titles beyond a certain position.
*
* @static
* @private
* @method refreshSteps
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The start point for refreshing ids
*/
function refreshSteps(wizard, options, state, index)
{
var uniqueId = getUniqueId(wizard);
for (var i = index; i < state.stepCount; i++)
{
var uniqueStepId = uniqueId + _tabSuffix + i,
uniqueBodyId = uniqueId + _tabpanelSuffix + i,
uniqueHeaderId = uniqueId + _titleSuffix + i,
title = wizard.find(".title").eq(i)._id(uniqueHeaderId);
wizard.find(".steps a").eq(i)._id(uniqueStepId)
._aria("controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
.html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
wizard.find(".body").eq(i)._id(uniqueBodyId)
._aria("labelledby", uniqueHeaderId);
}
}
function registerEvents(wizard, options)
{
var eventNamespace = getEventNamespace(wizard);
wizard.bind("canceled" + eventNamespace, options.onCanceled);
wizard.bind("contentLoaded" + eventNamespace, options.onContentLoaded);
wizard.bind("finishing" + eventNamespace, options.onFinishing);
wizard.bind("finished" + eventNamespace, options.onFinished);
wizard.bind("init" + eventNamespace, options.onInit);
wizard.bind("stepChanging" + eventNamespace, options.onStepChanging);
wizard.bind("stepChanged" + eventNamespace, options.onStepChanged);
if (options.enableKeyNavigation)
{
wizard.bind("keyup" + eventNamespace, keyUpHandler);
}
wizard.find(".actions a").bind("click" + eventNamespace, paginationClickHandler);
}
/**
* Removes a specific step by an given index.
*
* @static
* @private
* @method removeStep
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param index {Integer} The position (zero-based) of the step to remove
* @return Indecates whether the item is removed.
**/
function removeStep(wizard, options, state, index)
{
// Index out of range and try deleting current item will return false.
if (index < 0 || index >= state.stepCount || state.currentIndex === index)
{
return false;
}
// Change data
removeStepFromCache(wizard, index);
if (state.currentIndex > index)
{
state.currentIndex--;
saveCurrentStateToCookie(wizard, options, state);
}
state.stepCount--;
getStepTitle(wizard, index).remove();
getStepPanel(wizard, index).remove();
getStepAnchor(wizard, index).parent().remove();
// Set the "first" class to the new first step button
if (index === 0)
{
wizard.find(".steps li").first().addClass("first");
}
// Set the "last" class to the new last step button
if (index === state.stepCount)
{
wizard.find(".steps li").eq(index).addClass("last");
}
refreshSteps(wizard, options, state, index);
refreshPagination(wizard, options, state);
return true;
}
function removeStepFromCache(wizard, index)
{
getSteps(wizard).splice(index, 1);
}
/**
* Transforms the base html structure to a more sensible html structure.
*
* @static
* @private
* @method render
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
**/
function render(wizard, options, state)
{
// Create a content wrapper and copy HTML from the intial wizard structure
var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
stepTitles = contentWrapper.children(options.headerTag),
stepContents = contentWrapper.children(options.bodyTag);
// Transform the wizard wrapper and remove the inner HTML
wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
.addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
// Add WIA-ARIA support
stepContents.each(function (index)
{
renderBody(wizard, state, $(this), index);
});
stepTitles.each(function (index)
{
renderTitle(wizard, options, state, $(this), index);
});
refreshStepNavigation(wizard, options, state);
renderPagination(wizard, options, state);
}
/**
* Transforms the body to a proper tabpanel.
*
* @static
* @private
* @method renderBody
* @param wizard {Object} A jQuery wizard object
* @param body {Object} A jQuery body object
* @param index {Integer} The position of the body
*/
function renderBody(wizard, state, body, index)
{
var uniqueId = getUniqueId(wizard),
uniqueBodyId = uniqueId + _tabpanelSuffix + index,
uniqueHeaderId = uniqueId + _titleSuffix + index;
body._id(uniqueBodyId).attr("role", "tabpanel")._aria("labelledby", uniqueHeaderId)
.addClass("body")._showAria(state.currentIndex === index);
}
/**
* Renders a pagination if enabled.
*
* @static
* @private
* @method renderPagination
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function renderPagination(wizard, options, state)
{
if (options.enablePagination)
{
var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
buttons = "";
if (!options.forceMoveForward)
{
buttons += buttonTemplate.format("previous", options.labels.previous);
}
buttons += buttonTemplate.format("next", options.labels.next);
if (options.enableFinishButton)
{
buttons += buttonTemplate.format("finish", options.labels.finish);
}
if (options.enableCancelButton)
{
buttons += buttonTemplate.format("cancel", options.labels.cancel);
}
wizard.append(pagination.format(options.actionContainerTag, options.clearFixCssClass,
options.labels.pagination, buttons));
refreshPagination(wizard, options, state);
loadAsyncContent(wizard, options, state);
}
}
/**
* Renders a template and replaces all placeholder.
*
* @static
* @private
* @method renderTemplate
* @param template {String} A template
* @param substitutes {Object} A list of substitute
* @return {String} The rendered template
*/
function renderTemplate(template, substitutes)
{
var matches = template.match(/#([a-z]*)#/gi);
for (var i = 0; i < matches.length; i++)
{
var match = matches[i],
key = match.substring(1, match.length - 1);
if (substitutes[key] === undefined)
{
throwError("The key '{0}' does not exist in the substitute collection!", key);
}
template = template.replace(match, substitutes[key]);
}
return template;
}
/**
* Transforms the title to a step item button.
*
* @static
* @private
* @method renderTitle
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
* @param header {Object} A jQuery header object
* @param index {Integer} The position of the header
*/
function renderTitle(wizard, options, state, header, index)
{
var uniqueId = getUniqueId(wizard),
uniqueStepId = uniqueId + _tabSuffix + index,
uniqueBodyId = uniqueId + _tabpanelSuffix + index,
uniqueHeaderId = uniqueId + _titleSuffix + index,
stepCollection = wizard.find(".steps > ul"),
title = renderTemplate(options.titleTemplate, {
index: index + 1,
title: header.html()
}),
stepItem = $("<li role=\"tab\"><a id=\"" + uniqueStepId + "\" href=\"#" + uniqueHeaderId +
"\" aria-controls=\"" + uniqueBodyId + "\">" + title + "</a></li>");
stepItem._enableAria(options.enableAllSteps || state.currentIndex > index);
if (state.currentIndex > index)
{
stepItem.addClass("done");
}
header._id(uniqueHeaderId).attr("tabindex", "-1").addClass("title");
if (index === 0)
{
stepCollection.prepend(stepItem);
}
else
{
stepCollection.find("li").eq(index - 1).after(stepItem);
}
// Set the "first" class to the new first step button
if (index === 0)
{
stepCollection.find("li").removeClass("first").eq(index).addClass("first");
}
// Set the "last" class to the new last step button
if (index === (state.stepCount - 1))
{
stepCollection.find("li").removeClass("last").eq(index).addClass("last");
}
// Register click event
stepItem.children("a").bind("click" + getEventNamespace(wizard), stepClickHandler);
}
/**
* Saves the current state to a cookie.
*
* @static
* @private
* @method saveCurrentStateToCookie
* @param wizard {Object} A jQuery wizard object
* @param options {Object} Settings of the current wizard
* @param state {Object} The state container of the current wizard
*/
function saveCurrentStateToCookie(wizard, options, state)
{
if (options.saveState && $.cookie)
{
$.cookie(_cookiePrefix + getUniqueId(wizard), state.currentIndex);
}
}
function startTransitionEffect(wizard, options, state, index, oldIndex, doneCallback)
{
var stepContents = wizard.find(".content > .body"),
effect = getValidEnumValue(transitionEffect, options.transitionEffect),
effectSpeed = options.transitionEffectSpeed,
newStep = stepContents.eq(index),
currentStep = stepContents.eq(oldIndex);
switch (effect)
{
case transitionEffect.fade:
case transitionEffect.slide:
var hide = (effect === transitionEffect.fade) ? "fadeOut" : "slideUp",
show = (effect === transitionEffect.fade) ? "fadeIn" : "slideDown";
state.transitionElement = newStep;
currentStep[hide](effectSpeed, function ()
{
var wizard = $(this)._showAria(false).parent().parent(),
state = getState(wizard);
if (state.transitionElement)
{
state.transitionElement[show](effectSpeed, function ()
{
$(this)._showAria();
}).promise().done(doneCallback);
state.transitionElement = null;
}
});
break;
case transitionEffect.slideLeft:
var outerWidth = currentStep.outerWidth(true),
posFadeOut = (index > oldIndex) ? -(outerWidth) : outerWidth,
posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth);
$.when(currentStep.animate({ left: posFadeOut }, effectSpeed,
function () { $(this)._showAria(false); }),
newStep.css("left", posFadeIn + "px")._showAria()
.animate({ left: 0 }, effectSpeed)).done(doneCallback);
break;
default:
$.when(currentStep._showAria(false), newStep._showAria())
.done(doneCallback);
break;
}
}
/**
* Fires when a step click happens.
*
* @static
* @private
* @event click
* @param event {Object} An event object
*/
function stepClickHandler(event)
{
event.preventDefault();
var anchor = $(this),
wizard = anchor.parent().parent().parent().parent(),
options = getOptions(wizard),
state = getState(wizard),
oldIndex = state.currentIndex;
if (anchor.parent().is(":not(.disabled):not(.current)"))
{
var href = anchor.attr("href"),
position = parseInt(href.substring(href.lastIndexOf("-") + 1), 0);
goToStep(wizard, options, state, position);
}
// If nothing has changed
if (oldIndex === state.currentIndex)
{
getStepAnchor(wizard, oldIndex).focus();
return false;
}
}
function throwError(message)
{
if (arguments.length > 1)
{
message = message.format(Array.prototype.slice.call(arguments, 1));
}
throw new Error(message);
}
/**
* Checks an argument for null or undefined and throws an error if one check applies.
*
* @static
* @private
* @method validateArgument
* @param argumentName {String} The name of the given argument
* @param argumentValue {Object} The argument itself
*/
function validateArgument(argumentName, argumentValue)
{
if (argumentValue == null)
{
throwError("The argument '{0}' is null or undefined.", argumentName);
}
}
/**
* Represents a jQuery wizard plugin.
*
* @class steps
* @constructor
* @param [method={}] The name of the method as `String` or an JSON object for initialization
* @param [params=]* {Array} Additional arguments for a method call
* @chainable
**/
$.fn.steps = function (method)
{
if ($.fn.steps[method])
{
return $.fn.steps[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === "object" || !method)
{
return initialize.apply(this, arguments);
}
else
{
$.error("Method " + method + " does not exist on jQuery.steps");
}
};
/**
* Adds a new step.
*
* @method add
* @param step {Object} The step object to add
* @chainable
**/
$.fn.steps.add = function (step)
{
var state = getState(this);
return insertStep(this, getOptions(this), state, state.stepCount, step);
};
/**
* Removes the control functionality completely and transforms the current state to the initial HTML structure.
*
* @method destroy
* @chainable
**/
$.fn.steps.destroy = function ()
{
return destroy(this, getOptions(this));
};
/**
* Triggers the onFinishing and onFinished event.
*
* @method finish
**/
$.fn.steps.finish = function ()
{
finishStep(this, getState(this));
};
/**
* Gets the current step index.
*
* @method getCurrentIndex
* @return {Integer} The actual step index (zero-based)
* @for steps
**/
$.fn.steps.getCurrentIndex = function ()
{
return getState(this).currentIndex;
};
/**
* Gets the current step object.
*
* @method getCurrentStep
* @return {Object} The actual step object
**/
$.fn.steps.getCurrentStep = function ()
{
return getStep(this, getState(this).currentIndex);
};
/**
* Gets a specific step object by index.
*
* @method getStep
* @param index {Integer} An integer that belongs to the position of a step
* @return {Object} A specific step object
**/
$.fn.steps.getStep = function (index)
{
return getStep(this, index);
};
/**
* Inserts a new step to a specific position.
*
* @method insert
* @param index {Integer} The position (zero-based) to add
* @param step {Object} The step object to add
* @example
* $("#wizard").steps().insert(0, {
* title: "Title",
* content: "", // optional
* contentMode: "async", // optional
* contentUrl: "/Content/Step/1" // optional
* });
* @chainable
**/
$.fn.steps.insert = function (index, step)
{
return insertStep(this, getOptions(this), getState(this), index, step);
};
/**
* Routes to the next step.
*
* @method next
* @return {Boolean} Indicates whether the action executed
**/
$.fn.steps.next = function ()
{
return goToNextStep(this, getOptions(this), getState(this));
};
/**
* Routes to the previous step.
*
* @method previous
* @return {Boolean} Indicates whether the action executed
**/
$.fn.steps.previous = function ()
{
return goToPreviousStep(this, getOptions(this), getState(this));
};
/**
* Removes a specific step by an given index.
*
* @method remove
* @param index {Integer} The position (zero-based) of the step to remove
* @return Indecates whether the item is removed.
**/
$.fn.steps.remove = function (index)
{
return removeStep(this, getOptions(this), getState(this), index);
};
/**
* Sets a specific step object by index.
*
* @method setStep
* @param index {Integer} An integer that belongs to the position of a step
* @param step {Object} The step object to change
**/
$.fn.steps.setStep = function (index, step)
{
throw new Error("Not yet implemented!");
};
/**
* Skips an certain amount of steps.
*
* @method skip
* @param count {Integer} The amount of steps that should be skipped
* @return {Boolean} Indicates whether the action executed
**/
$.fn.steps.skip = function (count)
{
throw new Error("Not yet implemented!");
};
/**
* An enum represents the different content types of a step and their loading mechanisms.
*
* @class contentMode
* @for steps
**/
var contentMode = $.fn.steps.contentMode = {
/**
* HTML embedded content
*
* @readOnly
* @property html
* @type Integer
* @for contentMode
**/
html: 0,
/**
* IFrame embedded content
*
* @readOnly
* @property iframe
* @type Integer
* @for contentMode
**/
iframe: 1,
/**
* Async embedded content
*
* @readOnly
* @property async
* @type Integer
* @for contentMode
**/
async: 2
};
/**
* An enum represents the orientation of the steps navigation.
*
* @class stepsOrientation
* @for steps
**/
var stepsOrientation = $.fn.steps.stepsOrientation = {
/**
* Horizontal orientation
*
* @readOnly
* @property horizontal
* @type Integer
* @for stepsOrientation
**/
horizontal: 0,
/**
* Vertical orientation
*
* @readOnly
* @property vertical
* @type Integer
* @for stepsOrientation
**/
vertical: 1
};
/**
* An enum that represents the various transition animations.
*
* @class transitionEffect
* @for steps
**/
var transitionEffect = $.fn.steps.transitionEffect = {
/**
* No transition animation
*
* @readOnly
* @property none
* @type Integer
* @for transitionEffect
**/
none: 0,
/**
* Fade in transition
*
* @readOnly
* @property fade
* @type Integer
* @for transitionEffect
**/
fade: 1,
/**
* Slide up transition
*
* @readOnly
* @property slide
* @type Integer
* @for transitionEffect
**/
slide: 2,
/**
* Slide left transition
*
* @readOnly
* @property slideLeft
* @type Integer
* @for transitionEffect
**/
slideLeft: 3
};
var stepModel = $.fn.steps.stepModel = {
title: "",
content: "",
contentUrl: "",
contentMode: contentMode.html,
contentLoaded: false
};
/**
* An object that represents the default settings.
* There are two possibities to override the sub-properties.
* Either by doing it generally (global) or on initialization.
*
* @static
* @class defaults
* @for steps
* @example
* // Global approach
* $.steps.defaults.headerTag = "h3";
* @example
* // Initialization approach
* $("#wizard").steps({ headerTag: "h3" });
**/
var defaults = $.fn.steps.defaults = {
/**
* The header tag is used to find the step button text within the declared wizard area.
*
* @property headerTag
* @type String
* @default "h1"
* @for defaults
**/
headerTag: "h1",
/**
* The body tag is used to find the step content within the declared wizard area.
*
* @property bodyTag
* @type String
* @default "div"
* @for defaults
**/
bodyTag: "div",
/**
* The content container tag which will be used to wrap all step contents.
*
* @property contentContainerTag
* @type String
* @default "div"
* @for defaults
**/
contentContainerTag: "div",
/**
* The action container tag which will be used to wrap the pagination navigation.
*
* @property actionContainerTag
* @type String
* @default "div"
* @for defaults
**/
actionContainerTag: "div",
/**
* The steps container tag which will be used to wrap the steps navigation.
*
* @property stepsContainerTag
* @type String
* @default "div"
* @for defaults
**/
stepsContainerTag: "div",
/**
* The css class which will be added to the outer component wrapper.
*
* @property cssClass
* @type String
* @default "wizard"
* @for defaults
* @example
* <div class="wizard">
* ...
* </div>
**/
cssClass: "wizard",
/**
* The css class which will be used for floating scenarios.
*
* @property clearFixCssClass
* @type String
* @default "clearfix"
* @for defaults
**/
clearFixCssClass: "clearfix",
/**
* Determines whether the steps are vertically or horizontally oriented.
*
* @property stepsOrientation
* @type stepsOrientation
* @default horizontal
* @for defaults
* @since 1.0.0
**/
stepsOrientation: stepsOrientation.horizontal,
/*
* Tempplates
*/
/**
* The title template which will be used to create a step button.
*
* @property titleTemplate
* @type String
* @default "<span class=\"number\">#index#.</span> #title#"
* @for defaults
**/
titleTemplate: "<span class=\"number\">#index#.</span> #title#",
/**
* The loading template which will be used to create the loading animation.
*
* @property loadingTemplate
* @type String
* @default "<span class=\"spinner\"></span> #text#"
* @for defaults
**/
loadingTemplate: "<span class=\"spinner\"></span> #text#",
/*
* Behaviour
*/
/**
* Sets the focus to the first wizard instance in order to enable the key navigation from the begining if `true`.
*
* @property autoFocus
* @type Boolean
* @default false
* @for defaults
* @since 0.9.4
**/
autoFocus: false,
/**
* Enables all steps from the begining if `true` (all steps are clickable).
*
* @property enableAllSteps
* @type Boolean
* @default false
* @for defaults
**/
enableAllSteps: false,
/**
* Enables keyboard navigation if `true` (arrow left and arrow right).
*
* @property enableKeyNavigation
* @type Boolean
* @default true
* @for defaults
**/
enableKeyNavigation: true,
/**
* Enables pagination if `true`.
*
* @property enablePagination
* @type Boolean
* @default true
* @for defaults
**/
enablePagination: true,
/**
* Suppresses pagination if a form field is focused.
*
* @property suppressPaginationOnFocus
* @type Boolean
* @default true
* @for defaults
**/
suppressPaginationOnFocus: true,
/**
* Enables cache for async loaded or iframe embedded content.
*
* @property enableContentCache
* @type Boolean
* @default true
* @for defaults
**/
enableContentCache: true,
/**
* Shows the cancel button if enabled.
*
* @property enableCancelButton
* @type Boolean
* @default false
* @for defaults
**/
enableCancelButton: false,
/**
* Shows the finish button if enabled.
*
* @property enableFinishButton
* @type Boolean
* @default true
* @for defaults
**/
enableFinishButton: true,
/**
* Not yet implemented.
*
* @property preloadContent
* @type Boolean
* @default false
* @for defaults
**/
preloadContent: false,
/**
* Shows the finish button always (on each step; right beside the next button) if `true`.
* Otherwise the next button will be replaced by the finish button if the last step becomes active.
*
* @property showFinishButtonAlways
* @type Boolean
* @default false
* @for defaults
**/
showFinishButtonAlways: false,
/**
* Prevents jumping to a previous step.
*
* @property forceMoveForward
* @type Boolean
* @default false
* @for defaults
**/
forceMoveForward: false,
/**
* Saves the current state (step position) to a cookie.
* By coming next time the last active step becomes activated.
*
* @property saveState
* @type Boolean
* @default false
* @for defaults
**/
saveState: false,
/**
* The position to start on (zero-based).
*
* @property startIndex
* @type Integer
* @default 0
* @for defaults
**/
startIndex: 0,
/*
* Animation Effect Configuration
*/
/**
* The animation effect which will be used for step transitions.
*
* @property transitionEffect
* @type transitionEffect
* @default none
* @for defaults
**/
transitionEffect: transitionEffect.none,
/**
* Animation speed for step transitions (in milliseconds).
*
* @property transitionEffectSpeed
* @type Integer
* @default 200
* @for defaults
**/
transitionEffectSpeed: 200,
/*
* Events
*/
/**
* Fires before the step changes and can be used to prevent step changing by returning `false`.
* Very useful for form validation.
*
* @property onStepChanging
* @type Event
* @default function (event, currentIndex, newIndex) { return true; }
* @for defaults
**/
onStepChanging: function (event, currentIndex, newIndex) { return true; },
/**
* Fires after the step has change.
*
* @property onStepChanged
* @type Event
* @default function (event, currentIndex, priorIndex) { }
* @for defaults
**/
onStepChanged: function (event, currentIndex, priorIndex) { },
/**
* Fires after cancelation.
*
* @property onCanceled
* @type Event
* @default function (event) { }
* @for defaults
**/
onCanceled: function (event) { },
/**
* Fires before finishing and can be used to prevent completion by returning `false`.
* Very useful for form validation.
*
* @property onFinishing
* @type Event
* @default function (event, currentIndex) { return true; }
* @for defaults
**/
onFinishing: function (event, currentIndex) { return true; },
/**
* Fires after completion.
*
* @property onFinished
* @type Event
* @default function (event, currentIndex) { }
* @for defaults
**/
onFinished: function (event, currentIndex) { },
/**
* Fires after async content is loaded.
*
* @property onContentLoaded
* @type Event
* @default function (event, index) { }
* @for defaults
**/
onContentLoaded: function (event, currentIndex) { },
/**
* Fires when the wizard is initialized.
*
* @property onInit
* @type Event
* @default function (event) { }
* @for defaults
**/
onInit: function (event, currentIndex) { },
/**
* Contains all labels.
*
* @property labels
* @type Object
* @for defaults
**/
labels: {
/**
* Label for the cancel button.
*
* @property cancel
* @type String
* @default "Cancel"
* @for defaults
**/
cancel: "Cancel",
/**
* This label is important for accessability reasons.
* Indicates which step is activated.
*
* @property current
* @type String
* @default "current step:"
* @for defaults
**/
current: "current step:",
/**
* This label is important for accessability reasons and describes the kind of navigation.
*
* @property pagination
* @type String
* @default "Pagination"
* @for defaults
* @since 0.9.7
**/
pagination: "Pagination",
/**
* Label for the finish button.
*
* @property finish
* @type String
* @default "Finish"
* @for defaults
**/
finish: "Finish",
/**
* Label for the next button.
*
* @property next
* @type String
* @default "Next"
* @for defaults
**/
next: "Next",
/**
* Label for the previous button.
*
* @property previous
* @type String
* @default "Previous"
* @for defaults
**/
previous: "Previous",
/**
* Label for the loading animation.
*
* @property loading
* @type String
* @default "Loading ..."
* @for defaults
**/
loading: "Loading ..."
}
};
})(jQuery);In this way, you can create a registration form page with the help of these front-end languages. If you are facing any error in making it by copying this code then we have a solution for it.
Download the below file and then extract these files from it. Run the Html file and you will see the registration form in your browser.
If this post was helpful then must like, share and comment. Thanks for reading this article.
