igormorozov / prettycheckable Goto Github PK

#What does it do?

This plugin replaces the default checkboxes and radio inputs for better looking ones.

##Features:

• Compatible with IE7+, Chrome, Firefox, Safari and mobile browsers;
• Custom design, kindly provided by Bruno O. Barros;
• Four color options (Twitter bootstrap) + editable PSD;
• Better look & size;
• Super easy implementation;
• Selectable with Tab and checkable with keyboard;
• Change events & Chainning preserved;
• More area of click/touch. A plus for mobile devices.

##Install & Setup

Download the files (or fork it) and include jQuery and prettyCheckable files:

<link rel="stylesheet" href="js/prettyCheckable/prettyCheckable.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/prettyCheckable/prettyCheckable.js"></script>

Write your inputs and add a class for the jQuery selector:

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer"/>

Setup prettyCheckable for your inputs and you're all set:

$().ready(function(){

  $('input.myClass').prettyCheckable();

});

You can start the plugin with the options you see on the documentation bellow and they will be applied to all matching inputs:

$().ready(function(){

  $('input.myClass').prettyCheckable({
    color: 'red'
  });

});

If you want to apply something to all the inputs but you need a few specific ones to be different, you can add the specifics inline:

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer" data-color="green" />

##Documentation

None of the parameters is mandatory.

###Options

###Inline Options

All inline configs will overwrite the ones you initialized the plugin with.

##Customization

If you want to create your own designed checkboxes or you just need a different color set, download the prettyCheckable PSD, do whatever you need to, add the entries to your CSS and pass the name of your color/style in the color or customClass parameters, according to the CSS code you can see on prettyCheckable.css.