第13款插件:formToWizard向导式表单插件

最新推荐文章于 2024-09-14 09:23:39 发布

skAce

最新推荐文章于 2024-09-14 09:23:39 发布

阅读量1.3k

点赞数

jQuery plug-in 专栏收录该内容

33 篇文章

订阅专栏

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

兼容浏览器：兼容所有IE浏览器/Firefox/Google Chrome

官方链接： http://www.jankoatwarpspeed.com/ ... -wizard-jquery.aspx

JS下载： http://ijquery.360sites.cn/js/jquery.formToWizard.js

预览： http://ijquery.360sites.cn/demo/formtowizard

打包下载： http://ijquery.360sites.cn/demo/formtowizard/formtowizard.zip

参数说明：

submitButton:'id' //button的id

复制代码

图片展示：

JS引用代码：

<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.formToWizard.js"></script>
<script>
$(function () {
$('#SignupForm').formToWizard({
submitButton: 'SaveAccount'
});
});
</script>

复制代码

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代码：

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;}