将长表单转换为向导式表单的JQuery插件formToWizard

简介

formToWizard是一款JQuery插件，可以使用此插件将长表单转换为向导式表单，以显示当前所处的步骤及输入的内容，方便用户输入。

（附件下载的文件中包含DEMO）

使用

1.  引入 jquery.js 和 jquery.formToWizard.js 文件

2.  HTML

<form id="SignupForm">
  <fieldset>
    <legend>个人信息</legend>
    <dl>
      <dt><label for="Name">姓名</label></dt>
      <dd><input id="Name" type="text" /></dd>
      
      <dt><label for="Email">电子邮箱</label></dt>
      <dd><input id="Email" type="text" /></dd>
      
      <dt><label for="Password">密码</label></dt>
      <dd><input id="Password" type="password" /></dd>
    </dl>
  </fieldset>
  
  <fieldset>
    <legend>公司信息</legend>
    <dt><label for="CompanyName">公司名称</label></dt>
    <dd><input id="CompanyName" type="text" /></dd>
    
    <dt><label for="Website">公司主页</label></dt>
    <dd><input id="Website" type="text" /></dd>
    
    <dt><label for="CompanyEmail">公司的联络邮箱</label></dt>
    <dd><input id="CompanyEmail" type="text" /></dd>
  </fieldset>
  
  <fieldset>
    <legend>支付信息</legend>
    <dt><label for="NameOnCard">信用卡公司</label></dt>
    <dd><input id="NameOnCard" type="text" /></dd>
    
    <dt><label for="CardNumber">信用卡号码</label></dt>
    <dd><input id="CardNumber" type="text" /></dd>
    
    <dt><label for="CreditcardMonth">有効期限</label></dt>
    <dd>
      <select id="CreditcardMonth">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      
      <select id="CreditcardYear">
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
      </select>
    </dd>
    
    <dt><label for="City">所属省市</label></dt>
    <dd><input id="City" type="text" /></dd>
    
    <dt><label for="Address1">地址1</label></dt>
    <dd><input id="Address1" type="text" /></dd>
    
    <dt><label for="Address2">地址2</label></dt>
    <dd><input id="Address2" type="text" /></dd>
    
  </fieldset>
  
  <div id="submitform">
    <input id="SaveAccount" type="button" value="提交" />
  </div>
</form>

[css]
<style>
dt {width: 11em;}
dd {margin: -1.5em 0 1em 0;padding: 0 0 1em 12em;border-bottom: 1px solid #ccc;}
#submitform {width: 320px;text-align: right;}
#SaveAccount {margin: 10px 0 0 0;}
fieldset {width: 320px;}
legend {font-size: 1.6em;padding: 10px 0px;color: #b0232a;font-weight: bold;}
.prev, .next {background-color: #b0232a;padding: 5px 10px;color: #fff;text-decoration: none;}
.prev:hover, .next:hover {background-color: #000;text-decoration: none;}
.prev {float: left;}
.next {float: right;}
#steps {list-style: none;width: 100%;overflow: hidden;}
#steps li {font-size: 24px;float: left;padding: 10px;color:#b0b1b3;}
#steps li span {font-size: 11px;display:block;}
#steps li.current {color: #000;}
#makeWizard {background-color: #b0232a;color: #fff;padding: 5px 10px;text-decoration: none;font-size: 18px;}
#makeWizard:hover {background-color: #000;}
</style>
[/css]

3.  调用

<script>
  $(function () {
    $('#SignupForm').formToWizard({submitButton: 'SaveAccount'});
  });
</script>

相关链接

GitHub 地址 ：https://github.com/artoodetoo/formtowizard