Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 1
<!DOCTYPE html>
2
<html lang="en">
3
 
4
    <head>
5
        <title>Checkboxes and radio buttons customization (jQuery and Zepto) plugin</title>
6
        <meta charset="utf-8">
7
        <meta content="width=device-width" name="viewport">
8
        <link href="./css/custom.css?v=1.0.2" rel="stylesheet">
9
        <link href="../skins/all.css?v=1.0.2" rel="stylesheet">
10
        <script src="./js/jquery.js"></script>
11
        <script src="../icheck.js?v=1.0.2"></script>
12
        <script src="./js/custom.min.js?v=1.0.2"></script>
13
    </head>
14
 
15
    <body>
16
        <div class="layout clear">
17
            <div class="header">
18
                <h1>super customized checkboxes and radio buttons for jQuery &amp; Zepto</h1>
19
                <h3>iCheck
20
                    <span>v1.0.2</span>
21
                </h3>
22
                <strong>@
23
                    <a href="http://twitter.com/fronteed/">Fronteed</a>
24
                </strong>
25
            </div>
26
            <div class="features">
27
                <div class="arrows">
28
                    <div class="bottom" data-to="demo"></div>
29
                </div>
30
                <h2>Plugin features</h2>
31
                <ul>
32
                    <li>
33
                        <strong>Identical inputs across different browsers and devices</strong> &mdash; both
34
                        <span class="self" data-to="download">desktop and mobile</span>
35
                    </li>
36
                    <li>
37
                        <strong>Touch devices support</strong> &mdash; iOS, Android, BlackBerry, Windows Phone, Amazon Kindle </li>
38
                    <li>
39
                        <strong>Keyboard accessible inputs</strong> &mdash;
40
                        <span class="mark">Tab</span>,
41
                        <span class="mark">Spacebar</span>,
42
                        <span class="mark">Arrow up/down</span> and other shortcuts </li>
43
                    <li>
44
                        <strong>Screenreader accessible inputs</strong> &mdash;
45
                        <a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA" target="blank">ARIA</a> attributes for VoiceOver and others </li>
46
                    <li>
47
                        <strong>Customization freedom</strong> &mdash; use any HTML and CSS to style inputs (try
48
                        <span class="self" data-to="skins">6 Retina-ready skins</span>) </li>
49
                    <li>
50
                        <strong>jQuery and Zepto</strong> JavaScript libraries support from single file </li>
51
                    <li>
52
                        <strong>Lightweight size</strong> &mdash; 1 kb gzipped </li>
53
                    <li class="offset">
54
                        <strong class="self" data-to="options">32 options</strong> to customize checkboxes and radio buttons </li>
55
                    <li>
56
                        <strong class="self" data-to="callbacks">11 callbacks</strong> to handle changes </li>
57
                    <li>
58
                        <strong class="self" data-to="methods">9 methods</strong> to make changes programmatically </li>
59
                    <li> Saves changes to original inputs,
60
                        <span class="self" data-to="init">works carefully</span> with any selectors </li>
61
                </ul>
62
            </div>
63
            <div class="social clear">
64
                <ul class="left">
65
                    <li>
66
                        <a href="http://github.com/fronteed/iCheck/">Download latest version</a>
67
                    </li>
68
                </ul>
69
                <ul class="right local">
70
                    <li>
71
                        <a href="http://twitter.com/fronteed/">Follow @fronteed</a>
72
                    </li>
73
                    <li>
74
                        <a href="https://twitter.com/intent/tweet?text=Highly customizable checkboxes and radio buttons&amp;url=http://fronteed.com/iCheck/&amp;via=fronteed&amp;hashtags=jQuery,Zepto">Share on Twitter</a>
75
                    </li>
76
                    <li>
77
                        <a href="https://github.com/fronteed/iCheck">Star on GitHub</a>
78
                    </li>
79
                </ul>
80
            </div>
81
            <div class="demo-holder">
82
                <h2 class="demo-title">Demo</h2>
83
                <div class="demo">
84
                    <div class="arrows">
85
                        <div class="top" data-to="features"></div>
86
                        <div class="bottom" data-to="skins"></div>
87
                    </div>
88
                    <div class="demo-list clear">
89
                        <ul>
90
                            <li>
91
                                <input tabindex="1" type="checkbox" id="input-1">
92
                                <label for="input-1">Checkbox,
93
                                    <span>#input-1</span>
94
                                </label>
95
                            </li>
96
                            <li>
97
                                <input tabindex="2" type="checkbox" id="input-2" checked>
98
                                <label for="input-2">Checkbox,
99
                                    <span>#input-2</span>
100
                                </label>
101
                            </li>
102
                        </ul>
103
                        <ul>
104
                            <li>
105
                                <input tabindex="3" type="radio" id="input-3" name="demo-radio">
106
                                <label for="input-3">Radio button,
107
                                    <span>#input-3</span>
108
                                </label>
109
                            </li>
110
                            <li>
111
                                <input tabindex="4" type="radio" id="input-4" name="demo-radio" checked>
112
                                <label for="input-4">Radio button,
113
                                    <span>#input-4</span>
114
                                </label>
115
                            </li>
116
                        </ul>
117
                        <script>
118
                            $(document).ready(function()
119
                            {
120
                                var callbacks_list = $('.demo-callbacks ul');
121
                                $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event)
122
                                {
123
                                    callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
124
                                }).iCheck(
125
                                {
126
                                    checkboxClass: 'icheckbox_square-blue',
127
                                    radioClass: 'iradio_square-blue',
128
                                    increaseArea: '20%'
129
                                });
130
                            });
131
                        </script>
132
                    </div>
133
                    <dl class="demo-methods">
134
                        <dt>
135
                            <span class="self do-check">Add
136
                                <span class="mark">checked</span> state to 1 and 3 inputs</span>
137
                            <span class="code">
138
                                <span class="self">show code</span>
139
                            </span>
140
                        </dt>
141
                        <dd> <pre class="markup">
142
$('#input-1, #input-3').iCheck('check');
143
</pre> </dd>
144
                        <dt>
145
                            <span class="self do-uncheck">Remove
146
                                <span class="mark">checked</span> state from 1 and 3 inputs</span>
147
                            <span class="code">
148
                                <span class="self">show code</span>
149
                            </span>
150
                        </dt>
151
                        <dd> <pre class="markup">
152
$('#input-1, #input-3').iCheck('uncheck');
153
</pre> </dd>
154
                        <dt>
155
                            <span class="self do-disable">Add
156
                                <span class="mark">disabled</span> state to 2 and 4 inputs</span>
157
                            <span class="code">
158
                                <span class="self">show code</span>
159
                            </span>
160
                        </dt>
161
                        <dd> <pre class="markup">
162
$('#input-2, #input-4').iCheck('disable');
163
</pre> </dd>
164
                        <dt>
165
                            <span class="self do-enable">Remove
166
                                <span class="mark">disabled</span> state from 2 and 4 inputs</span>
167
                            <span class="code">
168
                                <span class="self">show code</span>
169
                            </span>
170
                        </dt>
171
                        <dd> <pre class="markup">
172
$('#input-2, #input-4').iCheck('enable');
173
</pre> </dd>
174
                        <dt>
175
                            <span class="self do-destroy">Remove all traces of iCheck</span>
176
                            <span class="code">
177
                                <span class="self">show code</span>
178
                            </span>
179
                        </dt>
180
                        <dd> <pre class="markup">
181
$('input').iCheck('destroy');
182
</pre> </dd>
183
                    </dl>
184
                    <div class="demo-callbacks">
185
                        <h2>Callbacks</h2>
186
                        <ul></ul>
187
                    </div>
188
                </div>
189
            </div>
190
            <div class="skins">
191
                <h2>Skins</h2>
192
                <div class="skin skin-minimal">
193
                    <div class="arrows">
194
                        <div class="top" data-to="demo"></div>
195
                        <div class="bottom" data-to="skin-square"></div>
196
                    </div>
197
                    <h3>Minimal skin</h3>
198
                    <dl class="clear">
199
                        <dd class="selected">
200
                            <div class="skin-section">
201
                                <h4>Live</h4>
202
                                <ul class="list">
203
                                    <li>
204
                                        <input tabindex="5" type="checkbox" id="minimal-checkbox-1">
205
                                        <label for="minimal-checkbox-1">Checkbox 1</label>
206
                                    </li>
207
                                    <li>
208
                                        <input tabindex="6" type="checkbox" id="minimal-checkbox-2" checked>
209
                                        <label for="minimal-checkbox-2">Checkbox 2</label>
210
                                    </li>
211
                                    <li>
212
                                        <input type="checkbox" id="minimal-checkbox-disabled" disabled>
213
                                        <label for="minimal-checkbox-disabled">Disabled</label>
214
                                    </li>
215
                                    <li>
216
                                        <input type="checkbox" id="minimal-checkbox-disabled-checked" checked disabled>
217
                                        <label for="minimal-checkbox-disabled-checked">Disabled &amp; checked</label>
218
                                    </li>
219
                                </ul>
220
                                <ul class="list">
221
                                    <li>
222
                                        <input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio">
223
                                        <label for="minimal-radio-1">Radio button 1</label>
224
                                    </li>
225
                                    <li>
226
                                        <input tabindex="8" type="radio" id="minimal-radio-2" name="minimal-radio" checked>
227
                                        <label for="minimal-radio-2">Radio button 2</label>
228
                                    </li>
229
                                    <li>
230
                                        <input type="radio" id="minimal-radio-disabled" disabled>
231
                                        <label for="minimal-radio-disabled">Disabled</label>
232
                                    </li>
233
                                    <li>
234
                                        <input type="radio" id="minimal-radio-disabled-checked" checked disabled>
235
                                        <label for="minimal-radio-disabled-checked">Disabled &amp; checked</label>
236
                                    </li>
237
                                </ul>
238
                                <div class="colors clear">
239
                                    <strong>Color schemes</strong>
240
                                    <ul>
241
                                        <li class="active" title="Black"></li>
242
                                        <li class="red" title="Red"></li>
243
                                        <li class="green" title="Green"></li>
244
                                        <li class="blue" title="Blue"></li>
245
                                        <li class="aero" title="Aero"></li>
246
                                        <li class="grey" title="Grey"></li>
247
                                        <li class="orange" title="Orange"></li>
248
                                        <li class="yellow" title="Yellow"></li>
249
                                        <li class="pink" title="Pink"></li>
250
                                        <li class="purple" title="Purple"></li>
251
                                    </ul>
252
                                </div>
253
                            </div>
254
                            <div class="skin-section skin-states">
255
                                <h4>States</h4>
256
                                <ul class="list">
257
                                    <li>
258
                                        <div class="state icheckbox_minimal"></div>
259
                                        <div class="state iradio_minimal"></div> Normal </li>
260
                                    <li>
261
                                        <div class="state icheckbox_minimal hover"></div>
262
                                        <div class="state iradio_minimal hover"></div> Hover </li>
263
                                    <li>
264
                                        <div class="state icheckbox_minimal checked"></div>
265
                                        <div class="state iradio_minimal checked"></div> Checked </li>
266
                                    <li>
267
                                        <div class="state icheckbox_minimal disabled"></div>
268
                                        <div class="state iradio_minimal disabled"></div> Disabled </li>
269
                                    <li>
270
                                        <div class="state icheckbox_minimal checked disabled"></div>
271
                                        <div class="state iradio_minimal checked disabled"></div> Disabled &amp; checked </li>
272
                                </ul>
273
                            </div>
274
                            <script>
275
                                $(document).ready(function()
276
                                {
277
                                    $('.skin-minimal input').iCheck(
278
                                    {
279
                                        checkboxClass: 'icheckbox_minimal',
280
                                        radioClass: 'iradio_minimal',
281
                                        increaseArea: '20%'
282
                                    });
283
                                });
284
                            </script>
285
                        </dd>
286
                        <dt class="selected">Demo</dt>
287
                        <dd>
288
                            <div class="skin-pre">
289
                                <p> Make sure
290
                                    <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
291
                                    <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the
292
                                    <span class="mark">icheck.js</span>. </p>
293
                            </div>
294
                            <ol class="skin-usage">
295
                                <li> Choose a color scheme, there are 10 different styles available:
296
                                    <div class="schemes clear">
297
                                        <ul>
298
                                            <li>
299
                                                <strong>Black</strong> &mdash; minimal.css</li>
300
                                            <li>
301
                                                <strong>Red</strong> &mdash; red.css</li>
302
                                            <li>
303
                                                <strong>Green</strong> &mdash; green.css</li>
304
                                            <li>
305
                                                <strong>Blue</strong> &mdash; blue.css</li>
306
                                            <li>
307
                                                <strong>Aero</strong> &mdash; aero.css</li>
308
                                        </ul>
309
                                        <ul>
310
                                            <li>
311
                                                <strong>Grey</strong> &mdash; grey.css</li>
312
                                            <li>
313
                                                <strong>Orange</strong> &mdash; orange.css</li>
314
                                            <li>
315
                                                <strong>Yellow</strong> &mdash; yellow.css</li>
316
                                            <li>
317
                                                <strong>Pink</strong> &mdash; pink.css</li>
318
                                            <li>
319
                                                <strong>Purple</strong> &mdash; purple.css</li>
320
                                        </ul>
321
                                    </div>
322
                                </li>
323
                                <li> Copy
324
                                    <span class="mark">/skins/minimal/</span> folder and
325
                                    <span class="mark">icheck.js</span> file to your site. </li>
326
                                <li>
327
                                    <p>Insert before
328
                                        <span class="mark">&lt;/head></span> in your HTML (replace
329
                                        <span class="mark">your-path</span> and
330
                                        <span class="mark">color-scheme</span>):</p> <pre class="markup">
331
&lt;link href="your-path/minimal/color-scheme.css" rel="stylesheet">
332
&lt;script src="your-path/icheck.js">&lt;/script>
333
</pre>
334
                                    <p>Example for a
335
                                        <strong>Red</strong> color scheme:</p> <pre class="markup">
336
&lt;link href="your-path/minimal/red.css" rel="stylesheet">
337
&lt;script src="your-path/icheck.js">&lt;/script>
338
</pre> </li>
339
                                <li>
340
                                    <p>Add some checkboxes and radio buttons to your HTML:</p> <pre class="markup">
341
&lt;input type="checkbox">
342
&lt;input type="checkbox" checked>
343
&lt;input type="radio" name="iCheck">
344
&lt;input type="radio" name="iCheck" checked>
345
</pre> </li>
346
                                <li>
347
                                    <p>Add JavaScript to your HTML to launch iCheck plugin:</p> <pre class="markup">
348
&lt;script>
349
$(document).ready(function(){
350
  $('input').iCheck({
351
    checkboxClass: 'icheckbox_minimal',
352
    radioClass: 'iradio_minimal',
353
    increaseArea: '20%' <span class="comment">// optional</span>
354
  });
355
});
356
&lt;/script>
357
</pre>
358
                                    <p>For different from black color schemes use this code (example for
359
                                        <strong>Red</strong>):</p> <pre class="markup">
360
&lt;script>
361
$(document).ready(function(){
362
  $('input').iCheck({
363
    checkboxClass: 'icheckbox_minimal-red',
364
    radioClass: 'iradio_minimal-red',
365
    increaseArea: '20%' <span class="comment">// optional</span>
366
  });
367
});
368
&lt;/script>
369
</pre> </li>
370
                                <li>Done.</li>
371
                            </ol>
372
                        </dd>
373
                        <dt>Usage</dt>
374
                    </dl>
375
                </div>
376
                <div class="skin skin-square">
377
                    <div class="arrows">
378
                        <div class="top" data-to="skin-minimal"></div>
379
                        <div class="bottom" data-to="skin-flat"></div>
380
                    </div>
381
                    <h3>Square skin</h3>
382
                    <dl class="clear">
383
                        <dd class="selected">
384
                            <div class="skin-section">
385
                                <h4>Live</h4>
386
                                <ul class="list">
387
                                    <li>
388
                                        <input tabindex="9" type="checkbox" id="square-checkbox-1">
389
                                        <label for="square-checkbox-1">Checkbox 1</label>
390
                                    </li>
391
                                    <li>
392
                                        <input tabindex="10" type="checkbox" id="square-checkbox-2" checked>
393
                                        <label for="square-checkbox-2">Checkbox 2</label>
394
                                    </li>
395
                                    <li>
396
                                        <input type="checkbox" id="square-checkbox-disabled" disabled>
397
                                        <label for="square-checkbox-disabled">Disabled</label>
398
                                    </li>
399
                                    <li>
400
                                        <input type="checkbox" id="square-checkbox-disabled-checked" checked disabled>
401
                                        <label for="square-checkbox-disabled-checked">Disabled &amp; checked</label>
402
                                    </li>
403
                                </ul>
404
                                <ul class="list">
405
                                    <li>
406
                                        <input tabindex="11" type="radio" id="square-radio-1" name="square-radio">
407
                                        <label for="square-radio-1">Radio button 1</label>
408
                                    </li>
409
                                    <li>
410
                                        <input tabindex="12" type="radio" id="square-radio-2" name="square-radio" checked>
411
                                        <label for="square-radio-2">Radio button 2</label>
412
                                    </li>
413
                                    <li>
414
                                        <input type="radio" id="square-radio-disabled" disabled>
415
                                        <label for="square-radio-disabled">Disabled</label>
416
                                    </li>
417
                                    <li>
418
                                        <input type="radio" id="square-radio-disabled-checked" checked disabled>
419
                                        <label for="square-radio-disabled-checked">Disabled &amp; checked</label>
420
                                    </li>
421
                                </ul>
422
                                <div class="colors clear">
423
                                    <strong>Color schemes</strong>
424
                                    <ul>
425
                                        <li title="Black"></li>
426
                                        <li class="red" title="Red"></li>
427
                                        <li class="green active" title="Green"></li>
428
                                        <li class="blue" title="Blue"></li>
429
                                        <li class="aero" title="Aero"></li>
430
                                        <li class="grey" title="Grey"></li>
431
                                        <li class="orange" title="Orange"></li>
432
                                        <li class="yellow" title="Yellow"></li>
433
                                        <li class="pink" title="Pink"></li>
434
                                        <li class="purple" title="Purple"></li>
435
                                    </ul>
436
                                </div>
437
                            </div>
438
                            <div class="skin-section skin-states">
439
                                <h4>States</h4>
440
                                <ul class="list">
441
                                    <li>
442
                                        <div class="state icheckbox_square-green"></div>
443
                                        <div class="state iradio_square-green"></div> Normal </li>
444
                                    <li>
445
                                        <div class="state icheckbox_square-green hover"></div>
446
                                        <div class="state iradio_square-green hover"></div> Hover </li>
447
                                    <li>
448
                                        <div class="state icheckbox_square-green checked"></div>
449
                                        <div class="state iradio_square-green checked"></div> Checked </li>
450
                                    <li>
451
                                        <div class="state icheckbox_square-green disabled"></div>
452
                                        <div class="state iradio_square-green disabled"></div> Disabled </li>
453
                                    <li>
454
                                        <div class="state icheckbox_square-green checked disabled"></div>
455
                                        <div class="state iradio_square-green checked disabled"></div> Disabled &amp; checked </li>
456
                                </ul>
457
                            </div>
458
                            <script>
459
                                $(document).ready(function()
460
                                {
461
                                    $('.skin-square input').iCheck(
462
                                    {
463
                                        checkboxClass: 'icheckbox_square-green',
464
                                        radioClass: 'iradio_square-green',
465
                                        increaseArea: '20%'
466
                                    });
467
                                });
468
                            </script>
469
                        </dd>
470
                        <dt class="selected">Demo</dt>
471
                        <dd>
472
                            <div class="skin-pre">
473
                                <p> Make sure
474
                                    <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
475
                                    <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the
476
                                    <span class="mark">icheck.js</span>. </p>
477
                            </div>
478
                            <ol class="skin-usage">
479
                                <li> Choose a color scheme, there are 10 different styles available:
480
                                    <div class="schemes clear">
481
                                        <ul>
482
                                            <li>
483
                                                <strong>Black</strong> &mdash; square.css</li>
484
                                            <li>
485
                                                <strong>Red</strong> &mdash; red.css</li>
486
                                            <li>
487
                                                <strong>Green</strong> &mdash; green.css</li>
488
                                            <li>
489
                                                <strong>Blue</strong> &mdash; blue.css</li>
490
                                            <li>
491
                                                <strong>Aero</strong> &mdash; aero.css</li>
492
                                        </ul>
493
                                        <ul>
494
                                            <li>
495
                                                <strong>Grey</strong> &mdash; grey.css</li>
496
                                            <li>
497
                                                <strong>Orange</strong> &mdash; orange.css</li>
498
                                            <li>
499
                                                <strong>Yellow</strong> &mdash; yellow.css</li>
500
                                            <li>
501
                                                <strong>Pink</strong> &mdash; pink.css</li>
502
                                            <li>
503
                                                <strong>Purple</strong> &mdash; purple.css</li>
504
                                        </ul>
505
                                    </div>
506
                                </li>
507
                                <li> Copy
508
                                    <span class="mark">/skins/square/</span> folder and
509
                                    <span class="mark">icheck.js</span> file to your site. </li>
510
                                <li>
511
                                    <p>Insert before
512
                                        <span class="mark">&lt;/head></span> in your HTML (replace
513
                                        <span class="mark">your-path</span> and
514
                                        <span class="mark">color-scheme</span>):</p> <pre class="markup">
515
&lt;link href="your-path/square/color-scheme.css" rel="stylesheet">
516
&lt;script src="your-path/icheck.js">&lt;/script>
517
</pre>
518
                                    <p>Example for a
519
                                        <strong>Red</strong> color scheme:</p> <pre class="markup">
520
&lt;link href="your-path/square/red.css" rel="stylesheet">
521
&lt;script src="your-path/icheck.js">&lt;/script>
522
</pre> </li>
523
                                <li>
524
                                    <p>Add some checkboxes and radio buttons to your HTML:</p> <pre class="markup">
525
&lt;input type="checkbox">
526
&lt;input type="checkbox" checked>
527
&lt;input type="radio" name="iCheck">
528
&lt;input type="radio" name="iCheck" checked>
529
</pre> </li>
530
                                <li>
531
                                    <p>Add JavaScript to your HTML to launch iCheck plugin:</p> <pre class="markup">
532
&lt;script>
533
$(document).ready(function(){
534
  $('input').iCheck({
535
    checkboxClass: 'icheckbox_square',
536
    radioClass: 'iradio_square',
537
    increaseArea: '20%' <span class="comment">// optional</span>
538
  });
539
});
540
&lt;/script>
541
</pre>
542
                                    <p>For different from black color schemes use this code (example for
543
                                        <strong>Red</strong>):</p> <pre class="markup">
544
&lt;script>
545
$(document).ready(function(){
546
  $('input').iCheck({
547
    checkboxClass: 'icheckbox_square-red',
548
    radioClass: 'iradio_square-red',
549
    increaseArea: '20%' <span class="comment">// optional</span>
550
  });
551
});
552
&lt;/script>
553
</pre> </li>
554
                                <li>Done.</li>
555
                            </ol>
556
                        </dd>
557
                        <dt>Usage</dt>
558
                    </dl>
559
                </div>
560
                <div class="skin skin-flat">
561
                    <div class="arrows">
562
                        <div class="top" data-to="skin-square"></div>
563
                        <div class="bottom" data-to="skin-line"></div>
564
                    </div>
565
                    <h3>Flat skin</h3>
566
                    <dl class="clear">
567
                        <dd class="selected">
568
                            <div class="skin-section">
569
                                <h4>Live</h4>
570
                                <ul class="list">
571
                                    <li>
572
                                        <input tabindex="13" type="checkbox" id="flat-checkbox-1">
573
                                        <label for="flat-checkbox-1">Checkbox 1</label>
574
                                    </li>
575
                                    <li>
576
                                        <input tabindex="14" type="checkbox" id="flat-checkbox-2" checked>
577
                                        <label for="flat-checkbox-2">Checkbox 2</label>
578
                                    </li>
579
                                    <li>
580
                                        <input type="checkbox" id="flat-checkbox-disabled" disabled>
581
                                        <label for="flat-checkbox-disabled">Disabled</label>
582
                                    </li>
583
                                    <li>
584
                                        <input type="checkbox" id="flat-checkbox-disabled-checked" checked disabled>
585
                                        <label for="flat-checkbox-disabled-checked">Disabled &amp; checked</label>
586
                                    </li>
587
                                </ul>
588
                                <ul class="list">
589
                                    <li>
590
                                        <input tabindex="15" type="radio" id="flat-radio-1" name="flat-radio">
591
                                        <label for="flat-radio-1">Radio button 1</label>
592
                                    </li>
593
                                    <li>
594
                                        <input tabindex="16" type="radio" id="flat-radio-2" name="flat-radio" checked>
595
                                        <label for="flat-radio-2">Radio button 2</label>
596
                                    </li>
597
                                    <li>
598
                                        <input type="radio" id="flat-radio-disabled" disabled>
599
                                        <label for="flat-radio-disabled">Disabled</label>
600
                                    </li>
601
                                    <li>
602
                                        <input type="radio" id="flat-radio-disabled-checked" checked disabled>
603
                                        <label for="flat-radio-disabled-checked">Disabled &amp; checked</label>
604
                                    </li>
605
                                </ul>
606
                                <div class="colors clear">
607
                                    <strong>Color schemes</strong>
608
                                    <ul>
609
                                        <li title="Black"></li>
610
                                        <li class="red active" title="Red"></li>
611
                                        <li class="green" title="Green"></li>
612
                                        <li class="blue" title="Blue"></li>
613
                                        <li class="aero" title="Aero"></li>
614
                                        <li class="grey" title="Grey"></li>
615
                                        <li class="orange" title="Orange"></li>
616
                                        <li class="yellow" title="Yellow"></li>
617
                                        <li class="pink" title="Pink"></li>
618
                                        <li class="purple" title="Purple"></li>
619
                                    </ul>
620
                                </div>
621
                            </div>
622
                            <div class="skin-section skin-states">
623
                                <h4>States</h4>
624
                                <ul class="list">
625
                                    <li>
626
                                        <div class="state icheckbox_flat-red"></div>
627
                                        <div class="state iradio_flat-red"></div> Normal </li>
628
                                    <li>
629
                                        <div class="state icheckbox_flat-red checked"></div>
630
                                        <div class="state iradio_flat-red checked"></div> Checked </li>
631
                                    <li>
632
                                        <div class="state icheckbox_flat-red disabled"></div>
633
                                        <div class="state iradio_flat-red disabled"></div> Disabled </li>
634
                                    <li>
635
                                        <div class="state icheckbox_flat-red checked disabled"></div>
636
                                        <div class="state iradio_flat-red checked disabled"></div> Disabled &amp; checked </li>
637
                                </ul>
638
                            </div>
639
                            <script>
640
                                $(document).ready(function()
641
                                {
642
                                    $('.skin-flat input').iCheck(
643
                                    {
644
                                        checkboxClass: 'icheckbox_flat-red',
645
                                        radioClass: 'iradio_flat-red'
646
                                    });
647
                                });
648
                            </script>
649
                        </dd>
650
                        <dt class="selected">Demo</dt>
651
                        <dd>
652
                            <div class="skin-pre">
653
                                <p> Make sure
654
                                    <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
655
                                    <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the
656
                                    <span class="mark">icheck.js</span>. </p>
657
                            </div>
658
                            <ol class="skin-usage">
659
                                <li> Choose a color scheme, there are 10 different styles available:
660
                                    <div class="schemes clear">
661
                                        <ul>
662
                                            <li>
663
                                                <strong>Black</strong> &mdash; square.css</li>
664
                                            <li>
665
                                                <strong>Red</strong> &mdash; red.css</li>
666
                                            <li>
667
                                                <strong>Green</strong> &mdash; green.css</li>
668
                                            <li>
669
                                                <strong>Blue</strong> &mdash; blue.css</li>
670
                                            <li>
671
                                                <strong>Aero</strong> &mdash; aero.css</li>
672
                                        </ul>
673
                                        <ul>
674
                                            <li>
675
                                                <strong>Grey</strong> &mdash; grey.css</li>
676
                                            <li>
677
                                                <strong>Orange</strong> &mdash; orange.css</li>
678
                                            <li>
679
                                                <strong>Yellow</strong> &mdash; yellow.css</li>
680
                                            <li>
681
                                                <strong>Pink</strong> &mdash; pink.css</li>
682
                                            <li>
683
                                                <strong>Purple</strong> &mdash; purple.css</li>
684
                                        </ul>
685
                                    </div>
686
                                </li>
687
                                <li> Copy
688
                                    <span class="mark">/skins/flat/</span> folder and
689
                                    <span class="mark">icheck.js</span> file to your site. </li>
690
                                <li>
691
                                    <p>Insert before
692
                                        <span class="mark">&lt;/head></span> in your HTML (replace
693
                                        <span class="mark">your-path</span> and
694
                                        <span class="mark">color-scheme</span>):</p> <pre class="markup">
695
&lt;link href="your-path/flat/color-scheme.css" rel="stylesheet">
696
&lt;script src="your-path/icheck.js">&lt;/script>
697
</pre>
698
                                    <p>Example for a
699
                                        <strong>Red</strong> color scheme:</p> <pre class="markup">
700
&lt;link href="your-path/flat/red.css" rel="stylesheet">
701
&lt;script src="your-path/icheck.js">&lt;/script>
702
</pre> </li>
703
                                <li>
704
                                    <p>Add some checkboxes and radio buttons to your HTML:</p> <pre class="markup">
705
&lt;input type="checkbox">
706
&lt;input type="checkbox" checked>
707
&lt;input type="radio" name="iCheck">
708
&lt;input type="radio" name="iCheck" checked>
709
</pre> </li>
710
                                <li>
711
                                    <p>Add JavaScript to your HTML to launch iCheck plugin:</p> <pre class="markup">
712
&lt;script>
713
$(document).ready(function(){
714
  $('input').iCheck({
715
    checkboxClass: 'icheckbox_flat',
716
    radioClass: 'iradio_flat'
717
  });
718
});
719
&lt;/script>
720
</pre>
721
                                    <p>For different from black color schemes use this code (example for
722
                                        <strong>Red</strong>):</p> <pre class="markup">
723
&lt;script>
724
$(document).ready(function(){
725
  $('input').iCheck({
726
    checkboxClass: 'icheckbox_flat-red',
727
    radioClass: 'iradio_flat-red'
728
  });
729
});
730
&lt;/script>
731
</pre> </li>
732
                                <li>Done.</li>
733
                            </ol>
734
                        </dd>
735
                        <dt>Usage</dt>
736
                    </dl>
737
                </div>
738
                <div class="skin skin-line">
739
                    <div class="arrows">
740
                        <div class="top" data-to="skin-flat"></div>
741
                        <div class="bottom" data-to="skin-polaris"></div>
742
                    </div>
743
                    <h3>Line skin</h3>
744
                    <dl class="clear">
745
                        <dd class="selected">
746
                            <div class="skin-section">
747
                                <h4>Live</h4>
748
                                <ul class="list">
749
                                    <li>
750
                                        <input tabindex="17" type="checkbox" id="line-checkbox-1">
751
                                        <label for="line-checkbox-1">Checkbox 1</label>
752
                                    </li>
753
                                    <li>
754
                                        <input tabindex="18" type="checkbox" id="line-checkbox-2" checked>
755
                                        <label for="line-checkbox-2">Checkbox 2</label>
756
                                    </li>
757
                                    <li>
758
                                        <input type="checkbox" id="line-checkbox-disabled" disabled>
759
                                        <label for="line-checkbox-disabled">Disabled</label>
760
                                    </li>
761
                                    <li>
762
                                        <input type="checkbox" id="line-checkbox-disabled-checked" checked disabled>
763
                                        <label for="line-checkbox-disabled-checked">Disabled &amp; checked</label>
764
                                    </li>
765
                                </ul>
766
                                <ul class="list">
767
                                    <li>
768
                                        <input tabindex="19" type="radio" id="line-radio-1" name="line-radio">
769
                                        <label for="line-radio-1">Radio button 1</label>
770
                                    </li>
771
                                    <li>
772
                                        <input tabindex="20" type="radio" id="line-radio-2" name="line-radio" checked>
773
                                        <label for="line-radio-2">Radio button 2</label>
774
                                    </li>
775
                                    <li>
776
                                        <input type="radio" id="line-radio-disabled" disabled>
777
                                        <label for="line-radio-disabled">Disabled</label>
778
                                    </li>
779
                                    <li>
780
                                        <input type="radio" id="line-radio-disabled-checked" checked disabled>
781
                                        <label for="line-radio-disabled-checked">Disabled &amp; checked</label>
782
                                    </li>
783
                                </ul>
784
                                <div class="colors clear">
785
                                    <strong>Color schemes</strong>
786
                                    <ul>
787
                                        <li title="Black"></li>
788
                                        <li class="red" title="Red"></li>
789
                                        <li class="green" title="Green"></li>
790
                                        <li class="blue active" title="Blue"></li>
791
                                        <li class="aero" title="Aero"></li>
792
                                        <li class="grey" title="Grey"></li>
793
                                        <li class="orange" title="Orange"></li>
794
                                        <li class="yellow" title="Yellow"></li>
795
                                        <li class="pink" title="Pink"></li>
796
                                        <li class="purple" title="Purple"></li>
797
                                    </ul>
798
                                </div>
799
                            </div>
800
                            <div class="skin-section skin-states">
801
                                <h4>States</h4>
802
                                <ul class="list">
803
                                    <li>
804
                                        <div class="state icheckbox_line-blue">
805
                                            <div class="icheck_line-icon"></div> Normal </div>
806
                                    </li>
807
                                    <li>
808
                                        <div class="state icheckbox_line-blue hover">
809
                                            <div class="icheck_line-icon"></div> Hover </div>
810
                                    </li>
811
                                    <li>
812
                                        <div class="state icheckbox_line-blue checked">
813
                                            <div class="icheck_line-icon"></div> Checked </div>
814
                                    </li>
815
                                    <li>
816
                                        <div class="state icheckbox_line-blue disabled">
817
                                            <div class="icheck_line-icon"></div> Disabled </div>
818
                                    </li>
819
                                    <li>
820
                                        <div class="state icheckbox_line-blue checked disabled">
821
                                            <div class="icheck_line-icon"></div> Disabled &amp; checked </div>
822
                                    </li>
823
                                </ul>
824
                            </div>
825
                            <script>
826
                                $(document).ready(function()
827
                                {
828
                                    $('.skin-line input').each(function()
829
                                    {
830
                                        var self = $(this),
831
                                            label = self.next(),
832
                                            label_text = label.text();
833
                                        label.remove();
834
                                        self.iCheck(
835
                                        {
836
                                            checkboxClass: 'icheckbox_line-blue',
837
                                            radioClass: 'iradio_line-blue',
838
                                            insert: '<div class="icheck_line-icon"></div>' + label_text
839
                                        });
840
                                    });
841
                                });
842
                            </script>
843
                        </dd>
844
                        <dt class="selected">Demo</dt>
845
                        <dd>
846
                            <div class="skin-pre">
847
                                <p> Make sure
848
                                    <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
849
                                    <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the
850
                                    <span class="mark">icheck.js</span>. </p>
851
                            </div>
852
                            <ol class="skin-usage">
853
                                <li> Choose a color scheme, there are 10 different styles available:
854
                                    <div class="schemes clear">
855
                                        <ul>
856
                                            <li>
857
                                                <strong>Black</strong> &mdash; line.css</li>
858
                                            <li>
859
                                                <strong>Red</strong> &mdash; red.css</li>
860
                                            <li>
861
                                                <strong>Green</strong> &mdash; green.css</li>
862
                                            <li>
863
                                                <strong>Blue</strong> &mdash; blue.css</li>
864
                                            <li>
865
                                                <strong>Aero</strong> &mdash; aero.css</li>
866
                                        </ul>
867
                                        <ul>
868
                                            <li>
869
                                                <strong>Grey</strong> &mdash; grey.css</li>
870
                                            <li>
871
                                                <strong>Orange</strong> &mdash; orange.css</li>
872
                                            <li>
873
                                                <strong>Yellow</strong> &mdash; yellow.css</li>
874
                                            <li>
875
                                                <strong>Pink</strong> &mdash; pink.css</li>
876
                                            <li>
877
                                                <strong>Purple</strong> &mdash; purple.css</li>
878
                                        </ul>
879
                                    </div>
880
                                </li>
881
                                <li> Copy
882
                                    <span class="mark">/skins/line/</span> folder and
883
                                    <span class="mark">icheck.js</span> file to your site. </li>
884
                                <li>
885
                                    <p>Insert before
886
                                        <span class="mark">&lt;/head></span> in your HTML (replace
887
                                        <span class="mark">your-path</span> and
888
                                        <span class="mark">color-scheme</span>):</p> <pre class="markup">
889
&lt;link href="your-path/line/color-scheme.css" rel="stylesheet">
890
&lt;script src="your-path/icheck.js">&lt;/script>
891
</pre>
892
                                    <p>Example for a
893
                                        <strong>Red</strong> color scheme:</p> <pre class="markup">
894
&lt;link href="your-path/line/red.css" rel="stylesheet">
895
&lt;script src="your-path/icheck.js">&lt;/script>
896
</pre> </li>
897
                                <li>
898
                                    <p>Add some checkboxes, radio buttons and labels to your HTML:</p> <pre class="markup">
899
&lt;input type="checkbox">
900
&lt;label>Checkbox 1&lt;/label>
901
 
902
&lt;input type="checkbox" checked>
903
&lt;label>Checkbox 2&lt;/label>
904
 
905
&lt;input type="radio" name="iCheck">
906
&lt;label>Radio button 1&lt;/label>
907
 
908
&lt;input type="radio" name="iCheck" checked>
909
&lt;label>Radio button 2&lt;/label>
910
</pre> </li>
911
                                <li>
912
                                    <p>Add JavaScript to your HTML to launch iCheck plugin:</p> <pre class="markup">
913
&lt;script>
914
$(document).ready(function(){
915
  $('input').each(function(){
916
    var self = $(this),
917
      label = self.next(),
918
      label_text = label.text();
919
 
920
    label.remove();
921
    self.iCheck({
922
      checkboxClass: 'icheckbox_line',
923
      radioClass: 'iradio_line',
924
      insert: '&lt;div class="icheck_line-icon">&lt;/div>' + label_text
925
    });
926
  });
927
});
928
&lt;/script>
929
</pre>
930
                                    <p>For different from black color schemes use this code (example for
931
                                        <strong>Red</strong>):</p> <pre class="markup">
932
&lt;script>
933
$(document).ready(function(){
934
  $('input').each(function(){
935
    var self = $(this),
936
      label = self.next(),
937
      label_text = label.text();
938
 
939
    label.remove();
940
    self.iCheck({
941
      checkboxClass: 'icheckbox_line-red',
942
      radioClass: 'iradio_line-red',
943
      insert: '&lt;div class="icheck_line-icon">&lt;/div>' + label_text
944
    });
945
  });
946
});
947
&lt;/script>
948
</pre> </li>
949
                                <li>Done.</li>
950
                            </ol>
951
                        </dd>
952
                        <dt>Usage</dt>
953
                    </dl>
954
                </div>
955
                <div class="skin skin-polaris">
956
                    <div class="arrows">
957
                        <div class="top" data-to="skin-line"></div>
958
                        <div class="bottom" data-to="skin-futurico"></div>
959
                    </div>
960
                    <h3>Polaris skin</h3>
961
                    <dl class="clear">
962
                        <dd class="selected">
963
                            <div class="skin-section">
964
                                <h4>Live</h4>
965
                                <ul class="list">
966
                                    <li>
967
                                        <input tabindex="21" type="checkbox" id="polaris-checkbox-1">
968
                                        <label for="polaris-checkbox-1">Checkbox 1</label>
969
                                    </li>
970
                                    <li>
971
                                        <input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
972
                                        <label for="polaris-checkbox-2">Checkbox 2</label>
973
                                    </li>
974
                                    <li>
975
                                        <input type="checkbox" id="polaris-checkbox-disabled" disabled>
976
                                        <label for="polaris-checkbox-disabled">Disabled</label>
977
                                    </li>
978
                                    <li>
979
                                        <input type="checkbox" id="polaris-checkbox-disabled-checked" checked disabled>
980
                                        <label for="polaris-checkbox-disabled-checked">Disabled &amp; checked</label>
981
                                    </li>
982
                                </ul>
983
                                <ul class="list">
984
                                    <li>
985
                                        <input tabindex="23" type="radio" id="polaris-radio-1" name="polaris-radio">
986
                                        <label for="polaris-radio-1">Radio button 1</label>
987
                                    </li>
988
                                    <li>
989
                                        <input tabindex="24" type="radio" id="polaris-radio-2" name="polaris-radio" checked>
990
                                        <label for="polaris-radio-2">Radio button 2</label>
991
                                    </li>
992
                                    <li>
993
                                        <input type="radio" id="polaris-radio-disabled" disabled>
994
                                        <label for="polaris-radio-disabled">Disabled</label>
995
                                    </li>
996
                                    <li>
997
                                        <input type="radio" id="polaris-radio-disabled-checked" checked disabled>
998
                                        <label for="polaris-radio-disabled-checked">Disabled &amp; checked</label>
999
                                    </li>
1000
                                </ul>
1001
                            </div>
1002
                            <div class="skin-section skin-states">
1003
                                <h4>States</h4>
1004
                                <ul class="list">
1005
                                    <li>
1006
                                        <div class="state icheckbox_polaris"></div>
1007
                                        <div class="state iradio_polaris"></div> Normal </li>
1008
                                    <li>
1009
                                        <div class="state icheckbox_polaris hover"></div>
1010
                                        <div class="state iradio_polaris hover"></div> Hover </li>
1011
                                    <li>
1012
                                        <div class="state icheckbox_polaris checked"></div>
1013
                                        <div class="state iradio_polaris checked"></div> Checked </li>
1014
                                    <li>
1015
                                        <div class="state icheckbox_polaris disabled"></div>
1016
                                        <div class="state iradio_polaris disabled"></div> Disabled </li>
1017
                                    <li>
1018
                                        <div class="state icheckbox_polaris checked disabled"></div>
1019
                                        <div class="state iradio_polaris checked disabled"></div> Disabled &amp; checked </li>
1020
                                </ul>
1021
                            </div>
1022
                            <script>
1023
                                $(document).ready(function()
1024
                                {
1025
                                    $('.skin-polaris input').iCheck(
1026
                                    {
1027
                                        checkboxClass: 'icheckbox_polaris',
1028
                                        radioClass: 'iradio_polaris',
1029
                                        increaseArea: '-10%'
1030
                                    });
1031
                                });
1032
                            </script>
1033
                        </dd>
1034
                        <dt class="selected">Demo</dt>
1035
                        <dd>
1036
                            <div class="skin-pre">
1037
                                <p> Make sure
1038
                                    <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
1039
                                    <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the
1040
                                    <span class="mark">icheck.js</span>. </p>
1041
                            </div>
1042
                            <ol class="skin-usage">
1043
                                <li> Copy
1044
                                    <span class="mark">/skins/polaris/</span> folder and
1045
                                    <span class="mark">icheck.js</span> file to your site. </li>
1046
                                <li>
1047
                                    <p>Insert before
1048
                                        <span class="mark">&lt;/head></span> in your HTML (replace
1049
                                        <span class="mark">your-path</span> and
1050
                                        <span class="mark">color-scheme</span>):</p> <pre class="markup">
1051
&lt;link href="your-path/polaris/polaris.css" rel="stylesheet">
1052
&lt;script src="your-path/icheck.js">&lt;/script>
1053
</pre> </li>
1054
                                <li>
1055
                                    <p>Add some checkboxes and radio buttons to your HTML:</p> <pre class="markup">
1056
&lt;input type="checkbox">
1057
&lt;input type="checkbox" checked>
1058
&lt;input type="radio" name="iCheck">
1059
&lt;input type="radio" name="iCheck" checked>
1060
</pre> </li>
1061
                                <li>
1062
                                    <p>Add JavaScript to your HTML to launch iCheck plugin:</p> <pre class="markup">
1063
&lt;script>
1064
$(document).ready(function(){
1065
  $('input').iCheck({
1066
    checkboxClass: 'icheckbox_polaris',
1067
    radioClass: 'iradio_polaris',
1068
    increaseArea: '-10%' <span class="comment">// optional</span>
1069
  });
1070
});
1071
&lt;/script>
1072
</pre> </li>
1073
                                <li>Done.</li>
1074
                            </ol>
1075
                        </dd>
1076
                        <dt>Usage</dt>
1077
                    </dl>
1078
                </div>
1079
                <div class="skin skin-futurico">
1080
                    <div class="arrows">
1081
                        <div class="top" data-to="skin-polaris"></div>
1082
                        <div class="bottom" data-to="usage"></div>
1083
                    </div>
1084
                    <h3>Futurico skin</h3>
1085
                    <dl class="clear">
1086
                        <dd class="selected">
1087
                            <div class="skin-section">
1088
                                <h4>Live</h4>
1089
                                <ul class="list">
1090
                                    <li>
1091
                                        <input tabindex="25" type="checkbox" id="futurico-checkbox-1">
1092
                                        <label for="futurico-checkbox-1">Checkbox 1</label>
1093
                                    </li>
1094
                                    <li>
1095
                                        <input tabindex="26" type="checkbox" id="futurico-checkbox-2" checked>
1096
                                        <label for="futurico-checkbox-2">Checkbox 2</label>
1097
                                    </li>
1098
                                    <li>
1099
                                        <input type="checkbox" id="futurico-checkbox-disabled" disabled>
1100
                                        <label for="futurico-checkbox-disabled">Disabled</label>
1101
                                    </li>
1102
                                    <li>
1103
                                        <input type="checkbox" id="futurico-checkbox-disabled-checked" checked disabled>
1104
                                        <label for="futurico-checkbox-disabled-checked">Disabled &amp; checked</label>
1105
                                    </li>
1106
                                </ul>
1107
                                <ul class="list">
1108
                                    <li>
1109
                                        <input tabindex="27" type="radio" id="futurico-radio-1" name="futurico-radio">
1110
                                        <label for="futurico-radio-1">Radio button 1</label>
1111
                                    </li>
1112
                                    <li>
1113
                                        <input tabindex="28" type="radio" id="futurico-radio-2" name="futurico-radio" checked>
1114
                                        <label for="futurico-radio-2">Radio button 2</label>
1115
                                    </li>
1116
                                    <li>
1117
                                        <input type="radio" id="futurico-radio-disabled" disabled>
1118
                                        <label for="futurico-radio-disabled">Disabled</label>
1119
                                    </li>
1120
                                    <li>
1121
                                        <input type="radio" id="futurico-radio-disabled-checked" checked disabled>
1122
                                        <label for="futurico-radio-disabled-checked">Disabled &amp; checked</label>
1123
                                    </li>
1124
                                </ul>
1125
                            </div>
1126
                            <div class="skin-section skin-states">
1127
                                <h4>States</h4>
1128
                                <ul class="list">
1129
                                    <li>
1130
                                        <div class="state icheckbox_futurico"></div>
1131
                                        <div class="state iradio_futurico"></div> Normal </li>
1132
                                    <li>
1133
                                        <div class="state icheckbox_futurico checked"></div>
1134
                                        <div class="state iradio_futurico checked"></div> Checked </li>
1135
                                    <li>
1136
                                        <div class="state icheckbox_futurico disabled"></div>
1137
                                        <div class="state iradio_futurico disabled"></div> Disabled </li>
1138
                                    <li>
1139
                                        <div class="state icheckbox_futurico checked disabled"></div>
1140
                                        <div class="state iradio_futurico checked disabled"></div> Disabled &amp; checked </li>
1141
                                </ul>
1142
                            </div>
1143
                            <script>
1144
                                $(document).ready(function()
1145
                                {
1146
                                    $('.skin-futurico input').iCheck(
1147
                                    {
1148
                                        checkboxClass: 'icheckbox_futurico',
1149
                                        radioClass: 'iradio_futurico',
1150
                                        increaseArea: '20%'
1151
                                    });
1152
                                });
1153
                            </script>
1154
                        </dd>
1155
                        <dt class="selected">Demo</dt>
1156
                        <dd>
1157
                            <div class="skin-pre">
1158
                                <p> Make sure
1159
                                    <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
1160
                                    <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]) is loaded before the
1161
                                    <span class="mark">icheck.js</span>. </p>
1162
                            </div>
1163
                            <ol class="skin-usage">
1164
                                <li> Copy
1165
                                    <span class="mark">/skins/futurico/</span> folder and
1166
                                    <span class="mark">icheck.js</span> file to your site. </li>
1167
                                <li>
1168
                                    <p>Insert before
1169
                                        <span class="mark">&lt;/head></span> in your HTML (replace
1170
                                        <span class="mark">your-path</span> and
1171
                                        <span class="mark">color-scheme</span>):</p> <pre class="markup">
1172
&lt;link href="your-path/futurico/futurico.css" rel="stylesheet">
1173
&lt;script src="your-path/icheck.js">&lt;/script>
1174
</pre> </li>
1175
                                <li>
1176
                                    <p>Add some checkboxes and radio buttons to your HTML:</p> <pre class="markup">
1177
&lt;input type="checkbox">
1178
&lt;input type="checkbox" checked>
1179
&lt;input type="radio" name="iCheck">
1180
&lt;input type="radio" name="iCheck" checked>
1181
</pre> </li>
1182
                                <li>
1183
                                    <p>Add JavaScript to your HTML to launch iCheck plugin:</p> <pre class="markup">
1184
&lt;script>
1185
$(document).ready(function(){
1186
  $('input').iCheck({
1187
    checkboxClass: 'icheckbox_futurico',
1188
    radioClass: 'iradio_futurico',
1189
    increaseArea: '20%' <span class="comment">// optional</span>
1190
  });
1191
});
1192
&lt;/script>
1193
</pre> </li>
1194
                                <li>Done.</li>
1195
                            </ol>
1196
                        </dd>
1197
                        <dt>Usage</dt>
1198
                    </dl>
1199
                </div>
1200
                <div class="skins-info">
1201
                    <p>All skins (except Line) are transparent, you may use them on any background.</p>
1202
                    <p>
1203
                        <a href="http://designmodo.com/square/?u=718" target="blank">Square</a>,
1204
                        <a href="http://designmodo.com/flat/?u=718" target="blank">Flat</a>,
1205
                        <a href="http://designmodo.com/?u=718" target="blank">Polaris</a> and
1206
                        <a href="http://designmodo.com/futuricopro/?u=718" target="blank">Futurico</a> skins are based on
1207
                        <a href="http://designmodo.com/shop/?u=718" target="blank">Designmodo's UI packs</a>.</p>
1208
                    <p class="skins-banner">
1209
                        <a href="http://designmodo.com/shop/?u=718" target="blank">Awesome UI packs</a>
1210
                    </p>
1211
                </div>
1212
            </div>
1213
            <div class="usage">
1214
                <div class="arrows">
1215
                    <div class="top" data-to="skin-futurico"></div>
1216
                    <div class="bottom" data-to="comparison"></div>
1217
                </div>
1218
                <h2>Simple usage</h2>
1219
                <div class="usage-inner">
1220
                    <p> iCheck plugin works with checkboxes and radio buttons like a constructor.
1221
                        <br>
1222
                        <strong>It wraps each input with a div</strong>, which may be customized by you or using one of the
1223
                        <span class="self" data-to="skins">available skins</span>.
1224
                        <br>You may also place inside that div some HTML code or text using
1225
                        <span class="mark">insert</span> option. </p>
1226
                    <p class="offset">For this HTML:</p> <pre class="markup">
1227
&lt;label>
1228
  &lt;input type="checkbox" name="quux[1]" disabled>
1229
  Foo
1230
&lt;/label>
1231
 
1232
&lt;label for="baz[1]">Bar&lt;/label>
1233
&lt;input type="radio" name="quux[2]" id="baz[1]" checked>
1234
 
1235
&lt;label for="baz[2]">Bar&lt;/label>
1236
&lt;input type="radio" name="quux[2]" id="baz[2]">
1237
</pre>
1238
                    <p class="offset">With default options you'll get nearly this:</p> <pre class="markup">
1239
&lt;label>
1240
  &lt;div class="icheckbox disabled">
1241
    &lt;input type="checkbox" name="quux[1]" disabled>
1242
  &lt;/div>
1243
  Foo
1244
&lt;/label>
1245
 
1246
&lt;label for="baz[1]">Bar&lt;/label>
1247
&lt;div class="iradio checked">
1248
  &lt;input type="radio" name="quux[2]" id="baz[1]" checked>
1249
&lt;/div>
1250
 
1251
&lt;label for="baz[2]">Bar&lt;/label>
1252
&lt;div class="iradio">
1253
  &lt;input type="radio" name="quux[2]" id="baz[2]">
1254
&lt;/div>
1255
</pre>
1256
                    <p>
1257
                        <strong>By default, iCheck doesn't provide any CSS styles for wrapper divs</strong> (if you don't use
1258
                        <span class="self" data-to="skins">skins</span>).</p>
1259
                    <h4 class="options">Options</h4>
1260
                    <p>These options are default:</p> <pre class="markup">
1261
{
1262
  <span class="comment">// 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default</span>
1263
  handle: '',
1264
 
1265
  <span class="comment">// base class added to customized checkboxes</span>
1266
  checkboxClass: 'icheckbox',
1267
 
1268
  <span class="comment">// base class added to customized radio buttons</span>
1269
  radioClass: 'iradio',
1270
 
1271
  <span class="comment">// class added on checked state (input.checked = true)</span>
1272
  checkedClass: 'checked',
1273
 
1274
    <span class="comment">// if not empty, used instead of 'checkedClass' option (input type specific)</span>
1275
    checkedCheckboxClass: '',
1276
    checkedRadioClass: '',
1277
 
1278
  <span class="comment">// if not empty, added as class name on unchecked state (input.checked = false)</span>
1279
  uncheckedClass: '',
1280
 
1281
    <span class="comment">// if not empty, used instead of 'uncheckedClass' option (input type specific)</span>
1282
    uncheckedCheckboxClass: '',
1283
    uncheckedRadioClass: '',
1284
 
1285
  <span class="comment">// class added on disabled state (input.disabled = true)</span>
1286
  disabledClass: 'disabled',
1287
 
1288
    <span class="comment">// if not empty, used instead of 'disabledClass' option (input type specific)</span>
1289
    disabledCheckboxClass: '',
1290
    disabledRadioClass: '',
1291
 
1292
  <span class="comment">// if not empty, added as class name on enabled state (input.disabled = false)</span>
1293
  enabledClass: '',
1294
 
1295
    <span class="comment">// if not empty, used instead of 'enabledClass' option (input type specific)</span>
1296
    enabledCheckboxClass: '',
1297
    enabledRadioClass: '',
1298
 
1299
  <span class="comment">// class added on <span class="self" data-to="indeterminate">indeterminate state</span> (input.indeterminate = true)</span>
1300
  indeterminateClass: 'indeterminate',
1301
 
1302
    <span class="comment">// if not empty, used instead of 'indeterminateClass' option (input type specific)</span>
1303
    indeterminateCheckboxClass: '',
1304
    indeterminateRadioClass: '',
1305
 
1306
  <span class="comment">// if not empty, added as class name on determinate state (input.indeterminate = false)</span>
1307
  determinateClass: '',
1308
 
1309
    <span class="comment">// if not empty, used instead of 'determinateClass' option (input type specific)</span>
1310
    determinateCheckboxClass: '',
1311
    determinateRadioClass: '',
1312
 
1313
  <span class="comment">// class added on hover state (pointer is moved onto input)</span>
1314
  hoverClass: 'hover',
1315
 
1316
  <span class="comment">// class added on focus state (input has gained focus)</span>
1317
  focusClass: 'focus',
1318
 
1319
  <span class="comment">// class added on active state (mouse button is pressed on input)</span>
1320
  activeClass: 'active',
1321
 
1322
  <span class="comment">// adds hoverClass to customized input on label hover and labelHoverClass to label on input hover</span>
1323
  labelHover: true,
1324
 
1325
    <span class="comment">// class added to label if labelHover set to true</span>
1326
    labelHoverClass: 'hover',
1327
 
1328
  <span class="comment">// increase clickable area by given % (negative number to decrease)</span>
1329
  increaseArea: '',
1330
 
1331
  <span class="comment">// true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled</span>
1332
  cursor: false,
1333
 
1334
  <span class="comment">// set true to inherit original input's class name</span>
1335
  inheritClass: false,
1336
 
1337
  <span class="comment">// if set to true, input's id is prefixed with 'iCheck-' and attached</span>
1338
  inheritID: false,
1339
 
1340
  <span class="comment">// set true to activate ARIA support</span>
1341
  aria: false,
1342
 
1343
  <span class="comment">// add HTML code or text inside customized input</span>
1344
  insert: ''
1345
}
1346
</pre>
1347
                    <p>There's no need to copy and paste all of them, you can just mention the ones you need:</p> <pre class="markup">
1348
$('input').iCheck({
1349
  labelHover: false,
1350
  cursor: true
1351
});
1352
</pre>
1353
                    <p>You can choose any class names and slyle them as you want.</p>
1354
                    <h4 class="init">Initialize</h4>
1355
                    <p>Just include
1356
                        <span class="mark">icheck.js</span> after
1357
                        <a href="http://jquery.com" target="blank">jQuery v1.7+</a> (or
1358
                        <a href="http://github.com/madrobby/zepto#zepto-modules" target="blank">Zepto</a> [polyfill, event, data]).</p>
1359
                    <p>iCheck supports any selectors, but handles only checkboxes and radio buttons:</p> <pre class="markup">
1360
<span class="comment">// customize all inputs (will search for checkboxes and radio buttons)</span>
1361
$('input').iCheck();
1362
 
1363
<span class="comment">// handle inputs only inside $('.block')</span>
1364
$('.block input').iCheck();
1365
 
1366
<span class="comment">// handle only checkboxes inside $('.test')</span>
1367
$('.test input').iCheck({
1368
  handle: 'checkbox'
1369
});
1370
 
1371
<span class="comment">// handle .vote class elements (will search inside the element, if it's not an input)</span>
1372
$('.vote').iCheck();
1373
 
1374
<span class="comment">// you can also change options after inputs are customized</span>
1375
$('input.some').iCheck({
1376
  <span class="comment">// different options</span>
1377
});
1378
</pre>
1379
                    <h4 class="indeterminate">Indeterminate</h4>
1380
                    <p>HTML5 allows specifying
1381
                        <a href="http://css-tricks.com/indeterminate-checkboxes/" target="blank">indeterminate</a> ("partially" checked) state for checkboxes. iCheck supports it for both checkboxes and radio buttons.</p>
1382
                    <p>You can make an input indeterminate through HTML using additional attributes (supported by iCheck). Both do the same job, but
1383
                        <span class="mark">indeterminate="true"</span> may not work in some browsers (like IE7):</p> <pre class="markup">
1384
<span class="comment">&lt;!-- indeterminate="true" --></span>
1385
&lt;input type="checkbox" indeterminate="true">
1386
&lt;input type="radio" indeterminate="true">
1387
 
1388
<span class="comment">&lt;!-- determinate="false" --></span>
1389
&lt;input type="checkbox" determinate="false">
1390
&lt;input type="radio" determinate="false">
1391
</pre>
1392
                    <p>
1393
                        <span class="mark">indeterminate</span> and
1394
                        <span class="mark">determinate</span>
1395
                        <span class="self" data-to="methods">methods</span> can be used to toggle indeterminate state.</p>
1396
                    <h4 class="callbacks">Callbacks</h4>
1397
                    <p class="callbacks-info">iCheck provides plenty callbacks, which may be used to handle changes.</p>
1398
                    <table>
1399
                        <thead>
1400
                            <tr>
1401
                                <th>Callback name</th>
1402
                                <td>When used</td>
1403
                            </tr>
1404
                        </thead>
1405
                        <tbody>
1406
                            <tr>
1407
                                <th>ifClicked</th>
1408
                                <td>user clicked on a customized input or an assigned label</td>
1409
                            </tr>
1410
                            <tr>
1411
                                <th>ifChanged</th>
1412
                                <td>input's
1413
                                    <span class="mark">checked</span>,
1414
                                    <span class="mark">disabled</span> or
1415
                                    <span class="mark">indeterminate</span> state is changed</td>
1416
                            </tr>
1417
                            <tr>
1418
                                <th>ifChecked</th>
1419
                                <td>input's state is changed to
1420
                                    <span class="mark">checked</span>
1421
                                </td>
1422
                            </tr>
1423
                            <tr>
1424
                                <th>ifUnchecked</th>
1425
                                <td>
1426
                                    <span class="mark">checked</span> state is removed</td>
1427
                            </tr>
1428
                            <tr>
1429
                                <th>ifToggled</th>
1430
                                <td>input's
1431
                                    <span class="mark">checked</span> state is changed</td>
1432
                            </tr>
1433
                            <tr>
1434
                                <th>ifDisabled</th>
1435
                                <td>input's state is changed to
1436
                                    <span class="mark">disabled</span>
1437
                                </td>
1438
                            </tr>
1439
                            <tr>
1440
                                <th>ifEnabled</th>
1441
                                <td>
1442
                                    <span class="mark">disabled</span> state is removed</td>
1443
                            </tr>
1444
                            <tr>
1445
                                <th>ifIndeterminate</th>
1446
                                <td>input's state is changed to
1447
                                    <span class="mark">indeterminate</span>
1448
                                </td>
1449
                            </tr>
1450
                            <tr>
1451
                                <th>ifDeterminate</th>
1452
                                <td>
1453
                                    <span class="mark">indeterminate</span> state is removed</td>
1454
                            </tr>
1455
                            <tr>
1456
                                <th>ifCreated</th>
1457
                                <td>input is just customized</td>
1458
                            </tr>
1459
                            <tr>
1460
                                <th>ifDestroyed</th>
1461
                                <td>customization is just removed</td>
1462
                            </tr>
1463
                        </tbody>
1464
                    </table>
1465
                    <p>Use
1466
                        <span class="mark">on()</span> method to bind them to inputs:
1467
                        <p> <pre class="markup">
1468
$('input').on('ifChecked', function(event){
1469
  alert(event.type + ' callback');
1470
});
1471
</pre>
1472
                            <p>
1473
                                <span class="mark">ifCreated</span> callback should be binded before plugin init.</p>
1474
                            <h4 class="methods">Methods</h4>
1475
                            <p class="methods-info">These methods can be used to make changes programmatically (any selectors can be used):</p>
1476
                            <p>
1477
                                <span class="mark">$('input').iCheck('check');</span> &mdash; change input's state to
1478
                                <span class="mark">checked</span>
1479
                            </p>
1480
                            <p>
1481
                                <span class="mark">$('input').iCheck('uncheck');</span> &mdash; remove
1482
                                <span class="mark">checked</span> state</p>
1483
                            <p>
1484
                                <span class="mark">$('input').iCheck('toggle');</span> &mdash; toggle
1485
                                <span class="mark">checked</span> state</p>
1486
                            <p>
1487
                                <span class="mark">$('input').iCheck('disable');</span> &mdash; change input's state to
1488
                                <span class="mark">disabled</span>
1489
                            </p>
1490
                            <p>
1491
                                <span class="mark">$('input').iCheck('enable');</span> &mdash; remove
1492
                                <span class="mark">disabled</span> state</p>
1493
                            <p>
1494
                                <span class="mark">$('input').iCheck('indeterminate');</span> &mdash; change input's state to
1495
                                <span class="mark">indeterminate</span>
1496
                            </p>
1497
                            <p>
1498
                                <span class="mark">$('input').iCheck('determinate');</span> &mdash; remove
1499
                                <span class="mark">indeterminate</span> state</p>
1500
                            <p>
1501
                                <span class="mark">$('input').iCheck('update');</span> &mdash; apply input changes, which were done outside the plugin</p>
1502
                            <p>
1503
                                <span class="mark">$('input').iCheck('destroy');</span> &mdash; remove all traces of iCheck</p>
1504
                            <p class="methods-callback">You may also specify some function, that will be executed on each method call:</p> <pre class="markup">
1505
$('input').iCheck('check', function(){
1506
  alert('Well done, Sir');
1507
});
1508
</pre>
1509
                            <p class="issue-tracker">Feel free to
1510
                                <a href="http://github.com/fronteed/iCheck/">fork and submit pull-request</a> or
1511
                                <a href="http://github.com/fronteed/iCheck/issues">submit an issue</a> if you find something not working.</p>
1512
                </div>
1513
            </div>
1514
            <div class="benefits comparison">
1515
                <div class="arrows">
1516
                    <div class="top" data-to="usage"></div>
1517
                    <div class="bottom" data-to="download"></div>
1518
                </div>
1519
                <h2>Comparison</h2>
1520
                <div class="benefits-inner">
1521
                    <p>iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods
1522
                        can be used to easily handle and make changes at customized inputs.</p>
1523
                    <p>There are some CSS3 ways available to style checkboxes and radio buttons, like
1524
                        <a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/" target="blank">this one</a>. You have to know about some of the disadvantages of similar methods:</p>
1525
                    <ul>
1526
                        <li> &mdash; inputs are keyboard inaccessible, since
1527
                            <span class="mark">display: none</span> or
1528
                            <span class="mark">visibility: hidden</span> used to hide them </li>
1529
                        <li> &mdash; poor browser support </li>
1530
                        <li> &mdash; multiple bugs on mobile devices </li>
1531
                        <li> &mdash; tricky, harder to maintain CSS code </li>
1532
                        <li> &mdash; JavaScript is still needed to fix specific issues </li>
1533
                    </ul>
1534
                    <p>While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.</p>
1535
                </div>
1536
            </div>
1537
            <div class="browsers">
1538
                <h2>Browser support</h2>
1539
                <div class="browsers-inner">
1540
                    <p>iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.</p>
1541
                    <p>Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.</p>
1542
                </div>
1543
            </div>
1544
            <div class="download">
1545
                <a href="http://github.com/fronteed/iCheck/">Download plugin</a>
1546
            </div>
1547
            <div class="license">iCheck plugin is released under the
1548
                <a href="http://en.wikipedia.org/wiki/MIT_License" target="blank">MIT License</a>. Feel free to use it in personal and commercial projects.</div>
1549
        </div>
1550
        <div class="footer">
1551
            <div class="footer-inner clear">
1552
                <ul class="local">
1553
                    <li>
1554
                        <a href="https://github.com/fronteed/iCheck">Star on Github</a>
1555
                    </li>
1556
                    <li>
1557
                        <a href="https://twitter.com/intent/tweet?text=Highly customizable checkboxes and radio buttons&amp;url=http://fronteed.com/iCheck/&amp;via=fronteed&amp;hashtags=jQuery,Zepto">Share on Twitter</a>
1558
                    </li>
1559
                    <li>
1560
                        <a href="http://twitter.com/fronteed/">Follow @fronteed</a>
1561
                    </li>
1562
                </ul>
1563
                <div class="code"> Created by
1564
                    <a href="http://fronteed.com/">Damir Sultanov</a>
1565
                </div>
1566
            </div>
1567
        </div>
1568
        <a href="http://github.com/fronteed/iCheck/" class="fork-me">Fork me on GitHub</a>
1569
    </body>
1570
 
1571
</html>