CheckStyle

Ok, this is my first post about jQuery plugins. I hope you enjoy it.

version v1.0

CheckStyle is a jQuery plugin that make the input checkboxes more stylish and modern without messing your HTML code. Usage is very simple, you have just to add “checkstyle” class and unique id in your input elements.

Getting started

Make sure you have these lines in your <head> section:

<script src="js/jquery.min.js"></script>
<script src="js/checkstyle.js"></script>
<link href="css/checkstyle.css" rel="stylesheet">
<link href="css/checkstyle-theme.css" rel="stylesheet">

Now make sure to add class “checkstyle” in your input checkboxes and assign them unique IDs. So the code should be something like this:

<input type="checkbox" class="checkstyle" id="mycheckbox"/>

And last important thing, add this JavaScript code before closing tag </body>

<script>checkStyle();</script>

or put in your main JavaScript file, under the ready event:

$(window).ready(function(){
    checkStyle();
})

And this is the result:

 

Optional data-theme attribute and theme presets.

There is an optional attribute that gives you the ability to customize the style of your input checkbox and it is “data-theme”. The parameter is referring to class(es) that are customizing the checkbox. Example:

<input type="checkbox" class="checkstyle" id="checkMe2" data-theme="checkstyle-green">

And this is the result:

You can also combine the classes. Another example:

<input type="checkbox" class="checkstyle" id="checkMe6" data-theme="checkstyle-circle checkstyle-green">

The result:

There are some already made presets for you:

  • checkstyle-green
  • checkstyle-blue
  • checkstyle-red
  • checkstyle-square
  • checkstyle-circle
  • checkstyle-toggle

But you can add yours if you want.

 

Examples with the already included presets:

– default
– data-theme=”checkstyle-green”
– data-theme=”checkstyle-red”
– data-theme=”checkstyle-blue”
– data-theme=”checkstyle-circle”
– data-theme=”checkstyle-circle checkstyle-green”
– data-theme=”checkstyle-circle checkstyle-red”
– data-theme=”checkstyle-circle checkstyle-blue”
– data-theme=”checkstyle-circle checkstyle-square”
– data-theme=”checkstyle-square checkstyle-green”
– data-theme=”checkstyle-square checkstyle-red”
– data-theme=”checkstyle-square checkstyle-blue”
– data-theme=”checkstyle-toggle”
– data-theme=”checkstyle-toggle checkstyle-green”
– data-theme=”checkstyle-toggle checkstyle-red”
– data-theme=”checkstyle-toggle checkstyle-blue”

 

Return value

The number of checkboxes converted. Useful when debugging.

 

Bugs? Ideas?

If you spot bugs, glitches and/or have ideas send me an email at tellme@nicolagiornetta.com