/
jquery.ezmark.js
126 lines (115 loc) · 4.7 KB
/
jquery.ezmark.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
* ezMark - A Simple Checkbox and Radio button Styling plugin.
* This plugin allows you to use a custom Image for Checkbox or Radio button. Its very simple, small and easy to use.
*
* Copyright (c) Abdullah Rubiyath <http://www.itsalif.info/>.
* Released under MIT License
*
* Files with this plugin:
* - jquery.ezmark.js
* - ezmark.css
*
* <usage>
* At first, include both the css and js file at the top
*
* Then, simply use:
* $('selector').ezMark([options]);
*
* [options] accepts following JSON properties:
* checkboxClass - class applied to wrapping container (div) of a checkbox input
* checkedClass - class applied to wrapping container when the input is checked
* radioClass - class applied to the wrapping container (div) of a radio input
* hideClass - class applied to the input
* hoverClass - class applied while hovering over the label or div
* labelClass - class applied to associated label for custom input
* disabledClass - class applied to wrapping container (div) and associated label when input is disabled
* </usage>
*
* View Documention/Demo here:
* http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin
*
* @author Abdullah Rubiyath, Gregory Waxman
* @version 2.0
* @date January 25, 2011
*/
(function ($) {
var NAMESPACE = 'ezmark';
var DELEGATE_CLASS = NAMESPACE + '-del';
var defaultOptions = {
checkboxClass: NAMESPACE + '-checkbox',
radioClass: NAMESPACE + '-radio',
checkedClass: NAMESPACE + '-checked',
hideClass: NAMESPACE + '-hide',
hoverClass: NAMESPACE + '-hover',
labelClass: NAMESPACE + '-label',
labelCheckboxClass: NAMESPACE + '-label-checkbox',
labelRadioClass: NAMESPACE + '-label-radio',
disabledClass: NAMESPACE + '-disabled'
};
$.fn.ezMark = function (options) {
var defaults = $.extend({}, defaultOptions, options);
return this.each(function () {
var type = this.type;
if ((type === 'radio' || type === 'checkbox') && !$.data(this.parentNode, NAMESPACE)) {
var $this = $(this);
var classNames;
var isDisabled = !!this.disabled;
if (type === 'checkbox') {
classNames = {
input: defaults.checkboxClass,
label: defaults.labelCheckboxClass
};
}
else {
classNames = {
input: defaults.radioClass,
label: defaults.labelRadioClass
};
}
classNames.disabled = defaults.disabledClass;
$this.addClass(defaults.hideClass + ' ' + DELEGATE_CLASS)
.wrap('<div class="' +
classNames.input + ' ' +
DELEGATE_CLASS + (isDisabled ? ' ' + classNames.disabled : '') + '">');
var $parent = $this.parent();
if (this.checked) {
$parent.addClass(defaults.checkedClass);
}
$('label[for=' + this.id + ']').addClass(defaults.labelClass + ' ' + DELEGATE_CLASS + ' ' + classNames.label + (isDisabled ? ' ' + classNames.disabled : ''));
$.data(
$parent[0],
NAMESPACE,
{
classNames: {
checkedClass: defaults.checkedClass,
hoverClass: defaults.hoverClass
}
}
);
}
});
};
$(function () {
$(document.body).delegate('input.' + DELEGATE_CLASS, 'click', function ($e) {
var $this = $(this);
var type = this.type;
var $parent = $this.parent();
var parent = $parent[0];
var className = $.data(parent, NAMESPACE).classNames.checkedClass;
if (type === 'checkbox') {
$parent[(this.checked ? 'add' : 'remove') + 'Class'](className);
}
else if (type === 'radio') {
$('input[name="' + this.name + '"]').parent().removeClass(className);
if (this.checked) {
$parent.addClass(className);
}
}
}).delegate('div.' + DELEGATE_CLASS, 'hover', function () {
$(this).toggleClass($.data(this, NAMESPACE).classNames.hoverClass);
}).delegate('label.' + DELEGATE_CLASS, 'hover', function () {
var $divWrapper = $('#' + this.htmlFor).parent();
$divWrapper.toggleClass($.data($divWrapper[0], NAMESPACE).classNames.hoverClass);
});
});
}(jQuery));