带进度条的多步骤表单提交插件jQuery.step插件

    jQuery.step插件是一个带进度条的多步骤表单提交插件，点击下一步，会一步一步引导填写表单，如果表单填写有问题，会进行提示，并且进入不了下一步。配合jquery.easing.min.js，在上一步或下一步的切换中，还会有个性的动画效果。
1、在头部引入相关css和js：

<!-- jQuery -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/jquery.step.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">

2、html放入需要使用的地方

<form id="msform">
 <!-- progressbar -->
 <ul id="progressbar">
 <li class="active">Account Setup</li>
 <li>Social Profiles</li>
 <li>Personal Details</li>
 </ul>
 <!-- fieldsets -->
 <fieldset>
 <h2 class="fs-title">Create your account</h2>
 <h3 class="fs-subtitle">This is step 1</h3>
 <div class="fs-error"></div>
 <input type="text" name="email" id="email" placeholder="Email" />
 <input type="password" name="pass"  id="pass" placeholder="Password" />
 <input type="password" name="cpass"  id="cpass" placeholder="Confirm Password" />
 <input type="button" name="next" class="next action-button" value="Next" />
 </fieldset>
 <fieldset>
 <h2 class="fs-title">Social Profiles</h2>
 <h3 class="fs-subtitle">Your presence on the social network</h3>
 <input type="text" name="twitter" placeholder="Twitter" />
 <input type="text" name="facebook" placeholder="Facebook" />
 <input type="text" name="gplus" placeholder="Google Plus" />
 <input type="button" name="previous" class="previous action-button" value="Previous" />
 <input type="button" name="next" class="next action-button" value="Next" />
 </fieldset>
 <fieldset>
 <h2 class="fs-title">Personal Details</h2>
 <h3 class="fs-subtitle">We will never sell it</h3>
 <div class="fs-error"></div>
 <input type="text" name="fname" id="fname" placeholder="First Name" />
 <input type="text" name="lname" id="lname" placeholder="Last Name" />
 <input type="text" name="phone" id="phone" placeholder="Phone" />
 <textarea name="address" id="address" placeholder="Address"></textarea>
 <input type="button" name="previous" class="previous action-button" value="Previous" />
 <input type="submit" name="submit" class="submit action-button" value="Submit" />
 </fieldset>
</form>

注：
1、本插件一共三步，如果想多设几步，直接复制fieldset在后面追加，注意，submit按钮放在最后一个fieldset中，中间都用next按钮。
2、submit提交事件放在了jquery.step.js的95行，如果您需要书写自己的提交逻辑，直接在提交事件中修改即可。