Plugin checkbox Icheck

Gambar icheck

Dalam pembuatan aplikasi tentunya terkadang membutuhkan form checkbox untuk mengisi suatu inputan.

Plugin Feature :

• Identical inputs across different browsers and devices — both desktop and mobile
• Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
• Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
• Screenreader accessible inputs — ARIA attributes for VoiceOver and others
• Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
• jQuery and Zepto JavaScript libraries support from single file
• Lightweight size — 1 kb gzipped
• 32 options to customize checkboxes and radio buttons
• 11 callbacks to handle changes
• 9 methods to make changes programmatically
• Saves changes to original inputs, works carefully with any selectors

Sekarang, coba kita demokan sedikit cara untuk menempelkan iCheck pada aplikasi Anda.
Pastikan jQuery v1.7+ terload sebelum icheck.js.

1. Pilih warna skema. Ada 10 style yang berbeda yang tersedia:

Black — minimal.css
Red — red.css
Green — green.css
Blue — blue.css
Aero — aero.css
Grey — grey.css
Orange — orange.css
Yellow — yellow.css
Pink — pink.css
Purple — purple.css

2. Copy /skins/minimal/ folder and icheck.js file pada aplikasimu.

3. Masukkan sebelum </head> pada HTML Anda.

<link href="your-path/minimal/color-scheme.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

Contoh skema merah:

<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

4. Tambahkan beberapa checkbok dan radio pada HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

5. Tambahkan javascript pada HTML untuk menjalankan iCheck plugin:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});
</script>

Untuk perbedaan warna dari skema warna hitam, gunakan kode ini ( contoh warna merah )

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' // optional
  });
});
</script>

6. Selesai.

Untuk web resminya bisa diliat disini.
Untuk Download bisa disini.http://brillian-info.blogspot.com/2015/11/plugin-checkbox-icheck.html