ezMark jQuery Plugin

More script and css style : www.htmldrive.net

ezMark is a jQuery Plugin that can style checkbox and radiobutton easily. ezMark uses an image replacement for checkbox and radiobutton. Unlike most other script which requires a lot of code, ezMark is very small (minified version is ~1.5kb) and it gracefully degrades.

Online Documentation can be read here: http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin
Check out online demo here: http://www.itsalif.info/content/demo-ezmark-jquery-plugin

Requirements

- jQuery 1.3+

File Structure

ezMark comes with the following files:

 js/ezmark.jquery.js    - The Plugin File
 css/ezmark.css         - The CSS File for styling
 images/                - The replacement images for checkbox and radiobutton
  checkbox-black.png
  checkbox-red.png
  radio-black.png

How to use: Basic

At first include the default CSS File and JS File

<link> href="cs/ezmark.css" rel="stylesheet" /> 
<script type="text/javascript" language="Javascript" src="jquery.ezmark.js"></script>

Basic Syntax:

$('selector').ezMark([options]);

To apply on all checkbox and radio button across the page, use:

$('input').ezMark();

This should apply the styling to all the checkbox and radio button across the page based on the CSS.

To style only checkbox, use:

$('input[type="checkbox"]').ezMark();

Likewise, to style only radio button, use:

$('input[type="radio"]').ezMark();

How to use: Customization

To use multiple styled checkbox in the same page, at first declare a class in the CSS for the new checkbox/radiobutton. For example:

.ez-checkbox-green { background: transparent url('../images/checkbox-green.png') 0 1px no-repeat; display:inline-block; }
.ez-checked-green { background-position: 0 -18px; }

Then call:

$('selector').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});

The method ezMark accepts the following optional parameters as JSON

Parameter's (JSON) Properties:	Explanation/Details of the Property
checkboxCls	The Checkbox Class as per declaration on CSS.
checkedCls	The Checkbox Class on Checked State
radioCls	The Radio button's Class as per CSS
selectedCls	The Radio Button's Class on selected State

Example