#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.9.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
Name | Values | Description |
labelPosition |
string left, right(default) |
This is the position where the label for the inputs should be placed, if informed. |
customClass |
string A class name. |
This will add a class you want to the wrapping div surrounding the input, created by the plugin. |
color |
string blue(default), green, yellow or red |
Choose between one of the four colors options. |
###Inline Options
All inline configs will overwrite the ones you initialized the plugin with.
Name | Values | Description |
data-label |
string Text for your label |
If informed, this will create a label attached to the input. |
data-labelPosition |
string left, right(default) |
This is the position where the label for the inputs should be placed, if informed. |
data-customClass |
string A class name. |
This will add a class you want to the wrapping div surrounding the input, created by the plugin. |
data-color |
string blue(default), green, yellow or red |
Choose between one of the four colors options. |
###Methods
The plugin returns an array of Plugin instances. Once you found the object you're looking for, simply call one of theses puppies. Check main.js, which I used to build the examples you see in here for more details.
<td>
<p>Um... well... it enables the input.</p>
</td>
Name | Description |
.enableInput() | |
.disableInput() |
If you can't figure this one out, I'm not sure you should be even reading this. |
####Html
####Custom binding
ko.bindingHandlers.prettyCheckable = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var val = ko.utils.unwrapObservable(valueAccessor());
##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.