Home » jQuery 外掛

[jQ]Sisyphus.js

範例 1
沒錯!只要 600 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



有時候填寫某些落落長的表單時,當遇到瀏覽器或是電腦當機的話,整個可能又要重新輸入了。所以 Sisyphus.js 利用了 HTML5localStorage 功能來每隔 N 秒暫存目前所輸入的欄位資料,當瀏覽器未送出前重整或重新開啟都能把資料載回來呢!

套件名稱:Sisyphus.js
套件網址:N/A
作者網站:http://simsalabim.github.com/sisyphus/
套件網址:N/A
發佈日期:2012-05-17
檔案大小:12.7 KB
檔案下載:sisyphus.js

參數選項說明:

檢視原始碼 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
excludeFields(選填)
描述: 要排除暫存的欄位; 需要傳入 jQuery 物件, 例如: $('textarea, :text')
預設值: null
 
customKeyPrefix(選填)
描述: 暫存資料名稱的後綴
預設值: ""
 
timeout(選填)
描述: 每隔幾秒暫存一次, 設成 0 則會當欄位值有更新時就馬上儲存
預設值: 0
 
autoRelease(選填)
描述: 若設為 false, 就算當按下表單的送出或清除鈕也不會刪除暫存資料
預設值: true
 
name(選填)
描述: 暫存資料名稱的前綴; 若沒設定則會用 location.hostname + location.pathname + location.search
預設值: null
 
onSave(選填)
描述: 當資料暫存後執行的動作
預設值: function() {}
 
onBeforeRestore(選填)
描述: 當暫存資料要還原前執行的動作
預設值: function() {}
 
onRestore(選填)
描述: 當暫存資料還原後執行的動作
預設值: function() {}
 
onRelease(選填)
描述: 當暫存資料刪除後執行的動作
預設值: function() {}

方法說明:

檢視原始碼 JavaScript
1
2
// 每隔 N 秒暫存指定表單的欄位值
$(selector).sisyphus(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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sisyphus.js"></script>
<style type="text/css">
	.input-label {
		display: block;
		margin: 0 0 5px 0;
	}
	.field {
		margin: 10px 0 20px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 自動定時每 5 秒儲存一次輸入的資料
		// 網頁載入時, 若有未送出的資料則載入它, ˊ
		$('#form').sisyphus({
			timeout: 5, 
			onRestore: function(){
				alert('載入已輸入但未送出的資料完成');
			}
		});
	});
</script>
 
<body>
	<h3>隨意輸入後重整瀏覽器或是開另一個新的同網址頁面</h3>
	<form name="form" id="form" method="get">
		<div class="field">
			<label for="yetAnotherName" class="input-label">Input Text:</label>
			<input type="text" name="name" value="" id="yetAnotherName" />
		</div>
		<div class="field">
			<label for="planet" class="input-label">Select Multiple:</label>
			<select name="planet[]" multiple size="5" id="planet">
				<option value="Mercury">Mercury</option>
				<option value="Venus">Venus</option>
				<option value="Earth">Earth</option>
			</select>
		</div>
		<div class="field">
			<label for="single">Checkbox:</label>
			<input type="checkbox" name="single" value="1" id="single" />
		</div>
		<div class="field">
			<label for="single-noname">Checkbox without name:</label>
			<input type="checkbox" value="1" id="single-noname" />
		</div>
		<div class="field">
			<label for="yetAnotherTextarea" class="input-label">Textarea:</label>
			<textarea name="description" cols="50" rows="10" id="yetAnotherTextarea"></textarea>
		</div>
		<div class="field">
			<input type="submit" value="Submit" />
			<input type="reset" value="Reset" />
		</div>
	</form>
</body>
範例 1

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

發表迴響