-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
206 lines (164 loc) · 7.82 KB
/
index.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>rikrikrik - autosave jQuery plug-in</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.autosave.js"></script>
<script type="text/javascript">
$(function () {
$('form *').autosave();
});
</script>
</head>
<body>
<h1>jQuery autosave <sup>version 1.0</sup></h1>
<ul>
<li><a href="#whatitdoes">What it does</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#download">Download</a></li>
</ul>
<div class="hr">
<hr />
</div>
<h2 id="whatitdoes">What it does</h2>
<p>Autosave is designed to save the progress of forms by saving the fields to cookies so you won't lose anything should anything go wrong</p>
<p>The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.</p>
<p>The plug-in was written with work-intensive forms in mind, such as a blog article writing form.</p>
<h2 id="examples">Examples</h2>
<p>To try this example, fill in some of the form fields and leave the page – <a href="http://rikrikrik.com/jquery/autosave/">clicking here will do</a>. When you come back, your precious work will have been lost as the form fields will be blank, but you can click the "Restore form" button to magically rescue your work.</p>
<p><button class="autosave">Save form</button> <button class="autosave_restore">Restore form</button> <a href="#" class="autosave_removecookies">Delete related cookies</a> <span class="autosave_saving">Saving...</span></p>
<form action="#" method="post">
<fieldset>
<ul>
<li>
<label for="select1">Select</label>
<select name="select1" id="select1">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
</select>
</li>
<li>
<label for="inputtext">Input text</label>
<input type="text" name="inputtext" value="" id="inputtext" size="30" />
</li>
<li>
<label for="inputcheckboxes">Input checkboxes</label>
<input type="checkbox" name="inputcheckbox1" value="y" id="inputcheckbox1" checked="checked" />
<input type="checkbox" name="inputcheckbox2" value="y" id="inputcheckbox2" />
<input type="checkbox" name="inputcheckbox3" value="y" id="inputcheckbox3" />
<input type="checkbox" name="inputcheckbox4" value="y" id="inputcheckbox4" checked="checked" />
</li>
<li>
<label for="inputradio">Input radios</label>
<input type="radio" name="inputradio2" value="1" />
<input type="radio" name="inputradio2" value="2" />
<input type="radio" name="inputradio2" value="3" />
</li>
<li>
<label for="inputtext2">Input text</label>
<input type="text" name="inputtext2" value="" id="inputtext2" size="30" />
</li>
<li>
<label for="inputradio">Input radios</label>
<input type="radio" name="inputradio" value="1" />
<input type="radio" name="inputradio" value="2" checked="checked" />
<input type="radio" name="inputradio" value="3" />
</li>
<li>
<label for="textarea">Textarea</label>
<textarea name="textarea" rows="12" cols="40" id="textarea"></textarea>
</li>
</ul>
</fieldset>
</form>
<p>The example uses following code:</p>
<code><pre>
$('form *').autosave();
</pre></code>
<div class="hr">
<hr />
</div>
<h2 id="usage">Usage</h2>
<code><pre>
$(form_fields).autosave(options);
</pre></code>
<p>As the plug-in will only work on certain elements, you can select all elements and the plug-in will still work, e.g. $('<strong>form#the_form *</strong>').autosave();</p>
<p>By default, the class for saving the form is "<strong>autosave</strong>", the restore class is "<strong>autosave_restore</strong>" and the remove all related cookies class is "<strong>autosave_removecookies</strong>". So if you attach the class "autosave" to any link or button, it will save automatically.</p>
<p>The "Saving" notifier will show on any "<strong>autosave_saving</strong>" class</p>
<p><strong>The plug-in requires <a href="http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/">Klaus Hartl's jQuery Cookie plug-in</a> to work.</strong></p>
<div class="hr">
<hr />
</div>
<h2 id="options">Options</h2>
<p>Here's an example of how to use options:</p>
<code><pre>
$('textarea').autosave({
'interval': 20000,
'unique': 'articleadd'
});
</pre></code>
<p>And here are the options:</p>
<dl>
<dt>autosave</dt>
<dd>The jQuery expression that will handle save triggers.</dd>
<dd class="default">default: '.autosave'</dd>
<dt>restore</dt>
<dd>The jQuery expression that will handle restore triggers.</dd>
<dd class="default">default: '.autosave_restore'</dd>
<dt>removeCookies</dt>
<dd>The jQuery expression that will handle triggers to remove all cookies related to the autosave plug-in.</dd>
<dd class="default">default: '.autosave_removecookies'</dd>
<dt>saving</dt>
<dd>The jQuery expression that show when save is complete.</dd>
<dd class="default">default: '.autosave_saving'</dd>
<dt>interval</dt>
<dd>The interval that autosave will save to cookies in milliseconds.</dd>
<dd class="default">default: 10000</dd>
<dt>unique</dt>
<dd>If you're using autosave on multiple pages within one site, assign a unique string to differentiate between pages, e.g. on a blog add page, use something like 'blogaddpage'.</dd>
<dd class="default">default: '', takes a string</dd>
<dt>onBeforeSave</dt>
<dd>A function to be called before saving.</dd>
<dd class="default">takes a function, needs to return true to save</dd>
<dt>onAfterSave</dt>
<dd>A function to be called after saving.</dd>
<dd class="default">takes a function</dd>
<dt>onBeforeRestore</dt>
<dd>A function to be called before restoring.</dd>
<dd class="default">takes a function, needs to return true to restore</dd>
<dt>onAfterRestore</dt>
<dd>A function to be called after restoring.</dd>
<dd class="default">takes a function</dd>
<dt>savingFn</dt>
<dd>A function to be called for saving animations.</dd>
<dd class="default">default: function (e) { $(e).show().fadeTo(1000, 1).fadeOut(500); }</dd>
<dt>cookieCharMaxSize</dt>
<dd>The amount of characters for each cookie for text inputs and textareas. This isn't the maximum you can save per text input, the maximum is browser-dependent.</dd>
<dd class="default">default: 2000</dd>
<dt>cookieExpiryLength</dt>
<dd>The length in days the cookie will last</dd>
<dd class="default">default: 1</dd>
</dl>
<div class="hr">
<hr />
</div>
<h2 id="download">Download</h2>
<p>The plug-in requires <a href="http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/">Klaus Hartl's jQuery Cookie plug-in</a> to work.</p>
<ul>
<li><a href="jquery.autosave.js">Full-fat Javascript</a> (5.1k)</li>
<li><a href="jquery.autosave.pack.js">Packed version</a> (2.7k)</li>
<li><a href="jquery.autosave.pack.js">Packed version with cookies plug-in</a> (3.4k)</li>
<li><a href="jquery.autosave.txt">Text version</a></li>
</ul>
<div id="footer">
Developed by <a id="rikrikrik" href="/">Rik Lomas</a> <span>—</span> <a href="http://www.twitter.com/riklomas">Follow me on Twitter</a> <span>—</span> Problems? Email me at rik at this domain.
</div>
</body>
</html>