Home » jQuery 外掛

[jQ]FormToWizard

[ 日期： | 瀏覽：7,172 | 迴響：6 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



常常申請或是註冊會員時都要填一堆落落長的表單資料，也時要填寫的欄位可能要捲好幾次捲軸才寫的話，筆者還沒填之前可能就準備按上一頁離開了。如果能把填資訊換成像是安裝軟體時的精靈方式，填完某一區塊後繼續下一步驟的話，也許能讓訪客能在不知不覺中填完呢。

FormToWizard 就是一個能把一般表單轉換成精靈式表單的外掛套件。只要事先用 fieldset 來區分出欄位區塊就可以輕輕鬆鬆的無痛轉換囉！

套件名稱：FormToWizard
套件版本：N/A
作者網站：http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
套件網址：N/A
發佈日期：2009-09-28
檔案大小：2.33 KB
檔案下載：formToWizard.js

參數說明：

檢視原始碼 JavaScript
1
2
3

submitButton(選填)
描述： 送出鈕的 id，若有提供則會先隱藏改鈕, 待進行到最後一步驟時才顯示
預設值： ""

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定表單轉換成精靈式表單
$(selector).formToWizard(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="formToWizard.js"></script>
<style type="text/css">
	#main { width:400px; border:solid 1px #b2b3b5; padding:20px; background-color:#f6f6f6;}
	fieldset { border: none; width:320px;}
	legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
	label { display:block; margin:15px 0 5px;}
	input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}
	.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; margin:0px; padding:0px;}
	#steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
	#steps li span {font-size:11px; display:block;}
	#steps li.current { color:#000;}
</style>
<script type="text/javascript">
	$(function(){
		// 讓文字及密碼輸入框加大
		$('input[type=text], input[type=password]').css({
			width: 300,
			padding: 5,
			border: 'solid 1px #000'
		});
 
		$('#toWizard').one('click', function(){
			// 把 #SignupForm 轉換成精靈式表單
			// 並先隱藏 #SaveAccount 送出鈕
			$('#SignupForm').formToWizard({
				submitButton: 'SaveAccount'
			});
 
			return false;
		});
	});
</script>
 
<body>
	<p>
		<a href="#" id="toWizard">把表單轉換成精靈式表單</a>
	</p>
	<div id="main">
		<form id="SignupForm" action="">
			<fieldset>
				<legend>基本資訊</legend>
				<label for="Name">姓名</label>
				<input id="Name" type="text" />
				<label for="Email">電子信箱</label>
				<input id="Email" type="text" />
				<label for="Password">密碼</label>
				<input id="Password" type="password" />
			</fieldset>
			<fieldset>
				<legend>公司資訊</legend>
				<label for="CompanyName">公司名稱</label>
				<input id="CompanyName" type="text" />
				<label for="Website">公司網址</label>
				<input id="Website" type="text" />
				<label for="CompanyEmail">公司電子信箱</label>
				<input id="CompanyEmail" type="text" />
			</fieldset>
			<fieldset>
				<legend>信用卡帳單資訊</legend>
				<label for="NameOnCard">姓名</label>
				<input id="NameOnCard" type="text" />
				<label for="CardNumber">號碼</label>
				<input id="CardNumber" type="text" />
				<label for="CreditcardMonth">期限</label>
				<select id="CreditcardMonth">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</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>
				</select>
				<label for="Country">縣市</label>
				<select id="Country">
					<option value="c1">台北縣</option>
					<option value="c2">台北市</option>
					<option value="c3">桃園縣</option>
					<option value="c4">桃園市</option>
					<option value="c5">台南縣</option>
					<option value="c6">台南市</option>
				</select>
				<label for="Address1">地址</label>
				<input id="Address1" type="text" />
			</fieldset>
			<p>
				<input id="SaveAccount" type="button" value="Submit form" />
			</p>
		</form>
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

附註：
範例中的 css 除了 #main 之外，其它都是 FormToWizard 會需要用到的。

6 筆針對 [jQ]FormToWizard 的迴響

  1. 男丁老師，請教一下，有辦法不讓使用者點把表單轉換成精靈式表單，表單就自動排列嗎？

  2. 男丁老師，修改完之後變成一開始還是長長一串表單，當我要填寫某一塊表格的時候才會自動切換，這樣是對的嗎？

  3. 我只有把#main包在#toWizard裡面，沒有動到程式碼，男丁老師是修改這一段嗎？
    $('#toWizard').one('click', function(){
    $('#SignupForm').formToWizard({
    submitButton: 'SaveAccount'
    });

發表迴響