diff --git a/css/ezmark.css b/css/ezmark.css index 8a74a43..48e5ead 100644 --- a/css/ezmark.css +++ b/css/ezmark.css @@ -2,24 +2,24 @@ * CSS File for ezMark jQuery Plugin * **/ -.ez-hide { opacity: 0; filter:alpha(opacity=0); } -.ez-checkbox { +.ezmark-hide { opacity: 0; filter:alpha(opacity=0); } +.ezmark-checkbox { background: transparent url('../images/checkbox-red.png') 0 1px no-repeat; display:inline-block; } -.ez-radio { +.ezmark-radio { background: transparent url('../images/radio-black.png') 0 1px no-repeat; display:inline-block; } -.ez-checked { background-position: 0 -18px; } -.ez-selected { background-position: 0 -19px; } +.ezmark-checked { background-position: 0 -18px; } +.ezmark-selected { background-position: 0 -19px; } -.ez-checkbox-green { +.ezmark-checkbox-green { background: transparent url('../images/checkbox-green.png') 0 1px no-repeat; display:inline-block; *display: inline; } -.ez-checked-green { background-position: 0 -18px; } -.ez-checkbox, .ez-radio { zoom: 1; *display:inline; _height:30px; } +.ezmark-checked-green { background-position: 0 -18px; } +.ezmark-checkbox, .ezmark-radio { zoom: 1; *display:inline; _height:30px; } diff --git a/js/jquery.ezmark.js b/js/jquery.ezmark.js index 9e4d79c..d24d54d 100644 --- a/js/jquery.ezmark.js +++ b/js/jquery.ezmark.js @@ -1,77 +1,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 . - * Released under MIT License - * - * Files with this plugin: - * - jquery.ezmark.js - * - ezmark.css - * - * - * At first, include both the css and js file at the top - * - * Then, simply use: - * $('selector').ezMark([options]); - * - * [options] accepts following JSON properties: - * checkboxCls - custom Checkbox Class - * checkedCls - checkbox Checked State's Class - * radioCls - custom radiobutton Class - * selectedCls - radiobutton's Selected State's Class - * - * - * - * View Documention/Demo here: - * http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin - * - * @author Abdullah Rubiyath - * @version 1.0 - * @date June 27, 2010 - */ +* 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 . +* Released under MIT License +* +* Files with this plugin: +* - jquery.ezmark.js +* - ezmark.css +* +* +* 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 +* +* +* 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($) { - $.fn.ezMark = function(options) { - options = options || {}; - var defaultOpt = { - checkboxCls : options.checkboxCls || 'ez-checkbox' , radioCls : options.radioCls || 'ez-radio' , - checkedCls : options.checkedCls || 'ez-checked' , selectedCls : options.selectedCls || 'ez-selected' , - hideCls : 'ez-hide' - }; - return this.each(function() { - var $this = $(this); - var wrapTag = $this.attr('type') == 'checkbox' ? '
' : '
'; - // for checkbox - if( $this.attr('type') == 'checkbox') { - $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function() { - if( $(this).is(':checked') ) { - $(this).parent().addClass(defaultOpt.checkedCls); - } - else { $(this).parent().removeClass(defaultOpt.checkedCls); } - }); - - if( $this.is(':checked') ) { - $this.parent().addClass(defaultOpt.checkedCls); - } - } - else if( $this.attr('type') == 'radio') { +(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' + }; - $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function() { - // radio button may contain groups! - so check for group - $('input[name="'+$(this).attr('name')+'"]').each(function() { - if( $(this).is(':checked') ) { - $(this).parent().addClass(defaultOpt.selectedCls); - } else { - $(this).parent().removeClass(defaultOpt.selectedCls); - } - }); - }); - - if( $this.is(':checked') ) { - $this.parent().addClass(defaultOpt.selectedCls); - } - } + $.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('
'); + 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); \ No newline at end of file +}(jQuery)); \ No newline at end of file