Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
176 lines (156 sloc) 5.75 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ezMark jQuery Plugin - Stylize Checkbox and Radio Button Easily</title>
<link rel="stylesheet" href="css/ezmark.css" media="all" />
<style type="text/css">
/** basic styles **/
body {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica;
padding: 0; margin: 10px;
line-height: 200%;
.body-wrap { font-size: 1.2em; }
pre, code { font-size: 1.1em; }
.odd { background-color: #F2FAFC; }
th { text-align: left; }
h2 {
border-bottom: solid 1px #069;
pre {
padding: 5px;
border: solid 1px #ccc;
.error {
color: #D8000C;
background-color: #FFBABA;
padding: 10px;
border: solid 1px #D8000C;
.example {
border: dotted 1px #ccc;
padding: 10px;
margin: 10px;
<div class="body-wrap">
<h2>ezMark jQuery Plugin</h2>
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. <br /><br />
Online Documentation can be read here: <a href="" title="ezMark jQuery Plugin"></a>
<br />
Check out online demo here: <a href="" title="ezmark jquery demo"></a>
- jQuery 1.3+
<h2>File Structure</h2>
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
<h2>How to use: Basic</h2>
At first include the default CSS File and JS File
<pre>&lt;link&gt; href="cs/ezmark.css" rel="stylesheet" /&gt;
&lt;script type="text/javascript" language="Javascript" src="jquery.ezmark.js"&gt;&lt;/script&gt;</pre>
<br />
Basic Syntax:
<br />
To apply on all checkbox and radio button across the page, use:
This should apply the styling to all the checkbox and radio button across the page based on the CSS.
<br /><br />
To style <u>only checkbox</u>, use:
<br />
Likewise, to style <u>only radio button</u>, use:
<h2>How to use: Customization</h2>
To use multiple styled checkbox in the same page, at first declare a class in the CSS for the new checkbox/radiobutton. For example:
<pre>.ez-checkbox-green { background: transparent url('../images/checkbox-green.png') 0 1px no-repeat; display:inline-block; }
.ez-checked-green { background-position: 0 -18px; }</pre>
Then call:
<pre>$('selector').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});</pre>
The method ezMark accepts the following optional parameters as JSON
<table width="95%">
<th>Parameter's (JSON) Properties:</th>
<th>Explanation/Details of the Property</th>
<td width="30%">checkboxCls</td>
<td>The Checkbox Class as per declaration on CSS.</td>
<tr class="odd">
<td>The Checkbox Class on Checked State</td>
<td width="30%">radioCls</td>
<td>The Radio button's Class as per CSS</td>
<tr class="odd">
<td width="30%">selectedCls</td>
<td>The Radio Button's Class on selected State</td>
<div class="example">
<form id="testForm" action="#" method="post">
<p class="defaultP">
Single Checkbox Demo: <br />
<input type="checkbox" name="soccer_like" value="1" id="soccer_like"><label for="soccer_like">I like Soccer</label>
<p class="defaultP">
Shopping Items (Multiple Checkbox): <br />
<input type="checkbox" name="item[]" id="banana" value="banana" /> <label for="banana">Banana</label> <br />
<input type="checkbox" name="item[]" id="apple" value="apple" /> <label for="apple">Apple</label> <br />
<input type="checkbox" name="item[]" id="coke" value="coke" /> <label for="coke">Coke</label> <br />
<input type="checkbox" name="item[]" id="pineapple" value="pineapple" /> <label for="pineapple">Pineapple</label> <br />
<p class="defaultP">
House contract (Grouped Radio button): <br />
<input type="radio" name="month" value="6" id="month6" /> <label for="month6">6 month Contract</label> <br />
<input type="radio" name="month" value="3" id="month3" /> <label for="month3">3 month Contract</label> <br />
<input type="radio" name="month" value="12" id="month12" /> <label for="month12">12 month Contract</label> <br />
<p class="customP">
Custom Checkbox: <br />
<input type="checkbox" name="jquery_like" id="jquery_like" value="1" /><label for="jquery_like">I Like jQuery</label>
<input type="submit" name="Submit" value="Submit me!" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jquery.ezmark.min.js"></script>
<script type="text/javascript">
$(function() {
$('.defaultP input').ezMark();
$('.customP input[type="checkbox"]').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'})