openo-portal/portal-common/src/main/webapp/common/thirdparty/icheck/demo/index.html

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