forked from mudge/jquery_example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
241 lines (216 loc) · 10.7 KB
/
demo.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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Form Example Plugin</title>
<style type="text/css">html{font:small Helvetica;background:#eee;}body{margin:20px;}.example{color:#666;}.not_example{color:#c6c;}.case{margin-bottom:10px;border:1px solid #999;padding:0 10px;background:#fff;}pre{border:1px solid #996;background:#ffc;padding:5px;}h1,h3,pre,code{font-size:1em;}h1{font-size:1.5em;}input{width:200px;}</style>
</head>
<body>
<h1>jQuery Form Example Plugin</h1>
<p>This is a usage guide for the <a href="http://mucur.name/posts/jquery-example">jQuery Form Example plugin</a> by <a href="http://mucur.name/">Paul Mucur</a>. Below you will find several different use cases including the relevant HTML and JavaScript source code.</p>
<p>As of version 1.4, the plugin now comes with a <a href="http://docs.jquery.com/QUnit">QUnit</a> test suite.</p>
<form action="javascript:alert('Form submitted, all examples should be cleared.');">
<div class="case">
<p>The following field should contain the example text "Simple example".</p>
<p><input id="simple" type="text" /></p>
<h3>HTML</h3>
<pre><code><input id="simple" type="text" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#simple').example('Simple example');</code></pre>
</div>
<div class="case">
<p>The following field should contain the example text "Taken from the title" which is stored in its title attribute and set using a callback.</p>
<p><input type="text" id="callback" title="Taken from the title" /></p>
<h3>HTML</h3>
<pre><code><input type="text" id="callback" title="Taken from the title" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#callback').example(function() {
return $(this).attr('title');
});</code></pre>
</p>
</div>
<div class="case">
<p>The following field should contain the example text "Taken from the title and pink" in pink as it uses both a callback and the <code>className</code> option.</p>
<p><input type="text" id="callback_with_custom_class" title="Taken from the title and pink" /></p>
<h3>HTML</h3>
<pre><code><input type="text" id="callback_with_custom_class" title="Taken from the title and pink" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#callback_with_custom_class').example(function() {
return $(this).attr('title');
}, {className: 'not_example'});</code></pre>
</p>
</div>
<div class="case">
<p>The following fields should all have examples set from their title attribute.</p>
<p>
<input type="text" class="multiple_callback" title="Title 1" />
<input type="text" class="multiple_callback" title="Title 2" />
<input type="text" class="multiple_callback" title="Title 3" />
</p>
<h3>HTML</h3>
<pre><code><input type="text" class="multiple_callback" title="Title 1" />
<input type="text" class="multiple_callback" title="Title 2" />
<input type="text" class="multiple_callback" title="Title 3" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('.multiple_callback').example(function() {
return $(this).attr('title');
});</code></pre>
</div>
<div class="case">
<p>The following field should contain the example text "Type here..." in pink text.</p>
<p>
<textarea id="content"></textarea>
</p>
<h3>HTML</h3>
<pre><code><textarea id="content"></textarea></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#content').example('Type here...', {
className: 'not_example'
});</code></pre>
</div>
<div class="case">
<p>The following fields should all contain the same example text of "Several at once."</p>
<p>
<input type="text" class="multiple" />
<input type="text" class="multiple" />
<input type="text" class="multiple" />
<input type="text" class="multiple" />
</p>
<h3>HTML</h3>
<pre><code><input type="text" class="multiple" />
<input type="text" class="multiple" />
<input type="text" class="multiple" />
<input type="text" class="multiple" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('.multiple').example('Several at once.');</code></pre>
</div>
<div class="case">
<p>The following field should have a value of "I already have a value" on page load but once cleared should have the example text of "This should not appear on page load."</p>
<p>
<input id="prefilled" type="text" value="I already have a value" />
</p>
<h3>HTML</h3>
<pre><code><input id="prefilled" type="text" value="I already have a value" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#prefilled').example('This should not appear on page load.');</code></pre>
</div>
<div class="case">
<p>The following field should contain the example text "Multiple class names".</p>
<p>
<input id="multiple_classNames" type="text" class="something anything" />
</p>
<h3>HTML</h3>
<pre><code><input id="multiple_classNames" type="text" class="something anything" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#multiple_classNames').example('Multiple class names');</code></pre>
</div>
<div class="case">
<p>The following field should contain the example text "This is one thing" taken from its <code>title</code> attribute but after focusing on it once, the example should change to "Not anymore".</p>
<p><input id="modifying_callback" title="This is one thing" type="text" /></p>
<h3>HTML</h3>
<pre><code><input id="modifying_callback" title="This is one thing" type="text" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#modifying_callback').example(function() {
var text = $(this).attr('title');
$(this).attr('title', 'Not anymore');
return text;
});</code></pre>
</div>
<div class="case">
<p>The following three fields should have values of "Not example by default" in pink text as they are all styled with the CSS class name "not_example" by changing the plugin defaults.</p>
<p>
<input id="defaults_test_1" type="text" />
<input id="defaults_test_2" type="text" />
<input id="defaults_test_3" type="text" />
</p>
<h3>HTML</h3>
<pre><code><input id="defaults_test_1" type="text" />
<input id="defaults_test_2" type="text" />
<input id="defaults_test_3" type="text" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$.fn.example.defaults.className = 'not_example';
$('#defaults_test_1').example('Not example by default');
$('#defaults_test_2').example('Not example by default');
$('#defaults_test_3').example('Not example by default');</code></pre>
</div>
<div class="case">
<p>The following field should have its example set to "Metadata plugin rules" as defined by using the Metadata plugin.</p>
<p>
<input id="metadata_1" class="{example: 'Metadata plugin rules'}" />
</p>
<h3>HTML</h3>
<pre><code><input id="metadata_1" class="{example: 'Metadata plugin rules'}" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#metadata_1').example();</code></pre>
</div>
<div class="case">
<p>The following field should have its example set to "This will override the metadata" as specified in the function call even though it has metadata.</p>
<p>
<input id="metadata_2" class="{example: 'Metadata plugin does not take precedence'}" />
</p>
<h3>HTML</h3>
<pre><code><input id="metadata_2" class="{example: 'Metadata plugin does not takes precedence'}" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#metadata_2').example('This will be override the metadata');</code></pre>
</div>
<div class="case">
<p>Clicking the following submit button should clear all example text but leave real values (if this was a real form, you do not want the examples to be sent with the form).</p>
<p><input type="submit" /></p>
</div>
</form>
<form action="javascript:alert('Second form submitted, all examples within this form only should be cleared.');">
<div class="case">
<p>This field is inside a separate form and submitting it should only clear the values here, leaving the other form intact.</p>
<p><input id="second_form" type="text" /></p>
<p><input type="submit" /></p>
<h3>HTML</h3>
<pre><code><input id="second_form" type="text" /></code></pre>
<h3>JavaScript</h3>
<pre><code>$('#second_form').example('Only I should be cleared when you click below');</code></pre>
</div>
</form>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2");
</script>
<script src="http://dev.jquery.com/~john/plugins/profile/jquery-profile.js"></script>
<script type="text/javascript" src="test/metadata.js"></script>
<script type="text/javascript" src="jquery.example.js"></script>
<script type="text/javascript">
$(function() {
$('#simple').example('Simple example');
$('#callback').example(function() {
return $(this).attr('title');
});
$('#callback_with_custom_class').example(function() {
return $(this).attr('title');
}, { className: 'not_example' });
$('.multiple_callback').example(function() {
return $(this).attr('title');
});
$('#comments').example('First!', {
className: 'not_example'
});
$('#content').example('Type here...', {
className: 'not_example'
});
$('.multiple').example('Several at once.');
$('#prefilled').example('This should not appear on page load.');
$('#multiple_classNames').example('Multiple class names');
$('#modifying_callback').example(function() {
var text = $(this).attr('title');
$(this).attr('title', 'Not anymore');
return text;
});
$('#metadata_1').example();
$('#metadata_2').example('This will override the metadata');
$('#second_form').example('Only I should be cleared when you click below');
$.fn.example.defaults.className = 'not_example';
$('#defaults_test_1').example('Not example by default');
$('#defaults_test_2').example('Not example by default');
$('#defaults_test_3').example('Not example by default');
});
</script>
</body>
</html>