-
Notifications
You must be signed in to change notification settings - Fork 55
/
index.html
executable file
·345 lines (329 loc) · 12.3 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
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta charset="utf-8">
<title>JavaScript Custom Forms</title>
<!-- jcf scripts and styles -->
<link rel="stylesheet" href="css/theme-minimal/jcf.css">
<script src="js/jquery.js"></script>
<script src="js/jcf.js"></script>
<script src="js/jcf.file.js"></script>
<script src="js/jcf.radio.js"></script>
<script src="js/jcf.range.js"></script>
<script src="js/jcf.button.js"></script>
<script src="js/jcf.number.js"></script>
<script src="js/jcf.select.js"></script>
<script src="js/jcf.checkbox.js"></script>
<script src="js/jcf.textarea.js"></script>
<script src="js/jcf.scrollable.js"></script>
<script>
$(function() {
jcf.replaceAll();
});
</script>
<!-- demo page styles -->
<link rel="stylesheet" href="css/demo.css">
<!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
</head>
<body>
<main role="main">
<section class="intro">
<h1>JavaScript Custom Forms</h1>
<p>This library allows crossbrowser form elements customization using CSS.</p>
<p>Supported elements are following: <strong>select, checkbox, radio, file input, textarea and scrollbars</strong> (and more coming)</p>
</section>
<section class="demo-number">
<h2>Number inputs</h2>
<input type="number" min="-3" max="20" step="2">
<input type="number" value="2">
<input type="number" step="7" value="5" min="-20" max="45">
<input type="number" disabled value="7">
</section>
<section class="demo-range">
<h2>Range inputs</h2>
<div class="col">
<div class="row">
<label>Default range input:</label>
<input type="range">
</div>
<div class="row">
<label>Disabled range input:</label>
<input type="range" disabled>
</div>
<div class="row">
<label>With "min", "max" and "step" attributes:</label>
<input type="range" min="-3" max="45" step="7">
</div>
<div class="row">
<label>HTML5 Datalist test:</label>
<input type="range" value="0" min="0" max="100" list="testdata1">
</div>
<div class="row">
<label>With "multiple" attribute:</label>
<input value="20,80" type="range" multiple>
</div>
</div>
<div class="col">
<div class="row">
<label>Vertical slider:</label>
<input type="range" value="30" min="0" max="100" list="testdata1" data-jcf='{"orientation": "vertical", "range": "min"}'>
</div>
<datalist id="testdata1">
<option>0</option>
<option>10</option>
<option>11</option>
<option>15</option>
<option>30</option>
<option>50</option>
<option>90</option>
<option>100</option>
</datalist>
</div>
<div class="col">
<div class="row">
<label>Vertical range slider:</label>
<input type="range" multiple value="15,90" min="0" max="100" list="testdata1" data-jcf='{"orientation": "vertical"}'>
</div>
</div>
</section>
<section class="demo-selects">
<h2><select></h2>
<p>Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.</p>
<div class="col">
<div class="row">
<select data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option value="v1">Custom drop in <body></option>
<option value="v2">Option 1</option>
<option value="v3">Option 2</option>
<option value="v4">Option 3</option>
<option value="v5">Option 4</option>
<optgroup label="test">
<option value="v6">Option 5</option>
<option value="v7">Option 6</option>
</optgroup>
<option value="v7">Option 7</option>
<option value="v8">Option 8</option>
<option value="v9" disabled>Option 9 (disabled)</option>
<option value="v10" disabled>Option 10 (disabled)</option>
<option value="v11">Option 11</option>
<option value="v12">Option 12</option>
<option value="v13">Option 13</option>
<option value="v14">Option 14</option>
<option value="v15">Option 15</option>
<option value="v16">Option 16</option>
<option value="v17">Option 17</option>
<option value="v18">Option 18</option>
<option value="v19">Option 19</option>
<option value="v20">Option 20</option>
<option value="v21">Option 21</option>
<option value="v22">Option 22</option>
<option value="v23">Option 23</option>
<option value="v24">Option 24</option>
<optgroup label="last 26">
<option value="v25">Option 25</option>
<option value="v26">Option 26</option>
</optgroup>
</select>
</div>
<div class="row">
<select class="custom color" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "fakeDropInBody": false, "useCustomScroll": false}'>
<option value="v1">Custom drop in area</option>
<option class="color red" value="v2">Option 1</option>
<option class="color green" value="v3">Option 2</option>
<option class="color blue" value="v4">Option 3</option>
<option value="v5">Option 4</option>
<option value="v6">Option 5</option>
</select>
</div>
<div class="row">
<select>
<option value="v1">Native dropdown</option>
<option value="v2">Option 1</option>
<option value="v3">Option 2</option>
<option value="v4">Option 3</option>
<option value="v5">Option 4</option>
<option value="v6">Option 5</option>
</select>
</div>
<div class="row">
<select class="present" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option class="hideme">Select gift !</option>
<option data-image="images/test-icon1.png" value="v4">Woo!</option>
<option data-image="images/test-icon2.png" value="v5">Haaa!</option>
<option data-image="images/test-icon3.png" value="v6">Boom?</option>
</select>
</div>
<div class="row">
<select disabled="disabled">
<option value="v4">Option 1</option>
<option value="v5" selected>Disabled select</option>
</select>
</div>
</div>
<div class="col">
<div class="row">
<select size="6">
<optgroup label="Test group1">
<option value="v1">Option 1</option>
<option value="v2">Option 2</option>
<option value="v3" selected>Option 3</option>
</optgroup>
<option value="v4">Option 4</option>
<option value="v5">Option 5</option>
<optgroup label="Test group2">
<option value="v6">Option 6</option>
<option value="v7" disabled>Option 7 (disabled)</option>
<option value="v8">Option 8</option>
<option value="v9">Option 9</option>
</optgroup>
<option value="v10">Option 10</option>
<option value="v11">Option 11</option>
</select>
<select class="multitest" size="7" data-jcf='{"wrapNativeOnMobile":true}' multiple>
<optgroup label="Multiple select test">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
<optgroup label="Test group3">
<option>Option 6</option>
<option selected>Option 7</option>
<option selected>Option 8</option>
<option>Option 9</option>
</optgroup>
<option>Option 10</option>
<option>Option 11</option>
<option>Option 12</option>
<option>Option 13</option>
<option>Option 14</option>
<option>Option 15</option>
<option>Option 16</option>
<option>Option 17</option>
<option>Option 18</option>
<option>Option 19</option>
<option>Option 20</option>
<option>Option 21</option>
<option>Option 22</option>
<option>Option 23</option>
</select>
<select multiple placeholder="Compact multiple select" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}'>
<option value="v2">Option 1</option>
<option value="v3">Option 2</option>
<option value="v4">Option 3</option>
<option value="v5">Option 4</option>
<option value="v6">Option 5</option>
</select>
</div>
</div>
</section>
<section class="demo-checkboxes">
<h2>Checkboxes and radios</h2>
<p>Focused and pressed states are also handled.</p>
<div class="col">
<div class="row">
<input type="checkbox" id="chk1" />
<label title="Unchecked state" for="chk1">Unchecked</label>
</div>
<div class="row">
<input type="checkbox" checked="checked" id="chk2" />
<label title="Checked state" for="chk2">Checked</label>
</div>
<div class="row">
<input type="checkbox" disabled="disabled" id="chk3" />
<label title="Checked state" for="chk3">Disabled</label>
</div>
<div class="row">
<input type="checkbox" disabled="disabled" checked="checked" id="chk4" />
<label title="Checked state" for="chk4">Disabled checked</label>
</div>
</div>
<div class="col">
<div class="row">
<input type="radio" name="rtest" id="rad1" />
<label for="rad1" title="Unchecked state">Unchecked</label>
</div>
<div class="row">
<input type="radio" name="rtest" checked="checked" id="rad2" data-jcf='{"wrapNative": true}' />
<label for="rad2" title="Checked state">Checked</label>
</div>
<div class="row">
<input type="radio" name="rtest" disabled="disabled" checked="checked" id="rad3" />
<label for="rad3" title="Disabled state">Disabled</label>
</div>
</div>
</section>
<section class="demo-file">
<h2>File input</h2>
<p>Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.</p>
<div class="row">
<label>Normal:</label>
<input type="file">
</div>
<div class="row">
<label>Custom:</label>
<input type="file" data-jcf='{"buttonText": "Custom button", "placeholderText": "Custom placeholder"}'>
</div>
<div class="row">
<label>Disabled:</label>
<input type="file" disabled>
</div>
</section>
<section class="demo-scrollbars">
<h2>Scrollbars</h2>
<p>Scrollbars can be either vertical or horizontal. Nested scrollbars are supported. Can be applied on textarea.</p>
<div class="col">
<div class="test jcf-scrollable">
<img src="images/test.png" width="512" height="512" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!</p>
</div>
</div>
<div class="col">
<textarea cols="40" rows="10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aspernatur saepe nostrum quas enim, tenetur unde ut.
Eum aspernatur, sunt enim ea magni repellat debitis, sequi recusandae temporibus explicabo minus eaque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, fuga modi tempora id voluptatibus, nostrum quae nihil quam dignissimos praesentium et totam repudiandae sequi magnam numquam reprehenderit animi ea.
END.</textarea>
</div>
</section>
<section class="browser-support">
<h2>Browser support</h2>
<p>The script was tested in the following browsers:</p>
<ul>
<li>Internet Explorer 8+</li>
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Opera</li>
<li>Windows RT Tablets</li>
<li>Android 4+</li>
<li>iOS7+</li>
</ul>
</section>
<section class="usage">
<h2>Usage</h2>
<p>The script requires <a href="http://jquery.com/">jQuery 1.7+</a> to work properly. To add script in your page simply attach core file - <code>jcf.js</code> and some of modules you want to use for customization:</p>
<pre class="html">
<script src="js/jquery.js"></script>
<script src="js/jcf.js"></script>
<script src="js/jcf.select.js"></script>
<script src="js/jcf.radio.js"></script>
<script src="js/jcf.checkbox.js"></script></pre>
<p>When the page is loaded all you have to do is simply call the function:</p>
<pre class="javascript">
$(function() {
jcf.replaceAll();
});</pre>
</section>
<section class="licence">
<h2>License</h2>
<p>This script is licensed under the <a href="LICENSE.txt">MIT License</a></p>
<p>Copyright 2014-2016 <a href="http://psd2html.com/jcf">PSD2HTML.com</a></p>
</section>
</main>
</body>
</html>