Skip to content

myalban/prettyCheckable

 
 

Repository files navigation

#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.

Knockout compatibility

####Html

####Custom binding ko.bindingHandlers.prettyCheckable = { init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var val = ko.utils.unwrapObservable(valueAccessor()); $(element).prettyCheckable({color: val.color, label: val.label}); }, update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { $(element).trigger("change"); } };

##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.

About

A jQuery plugin to replace checkboxes and radios for custom images

Resources

Stars

Watchers

Forks

Packages

No packages published