Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Rework of plugin #2

Open
wants to merge 10 commits into from

2 participants

@Akkuma

I've enhanced the plugin to use event delegation rather than directly binding, streamlined the code a bit more, added in hovering and label support

Akkuma added some commits
@Akkuma Akkuma Modified the library to use delegates rather than binding. Streamline…
…d options by removing separate checked and selected classes. Improved performance by using native operations as much as possible and checking if the input has already been initiated. DRY'd the code.
359a583
@Akkuma Akkuma Removed extra "." c704afa
@Akkuma Akkuma Added hover support onto labels and the div. f58c92c
@Akkuma Akkuma Added constants for the namespace and delegate class. Added a hover c…
…lass onto the wrapping container when label or div is hovered. Made the data stored on each input more flexible by storing as an object. Made the delegates more specific.
c981aea
@Akkuma Akkuma Merge branch 'master' of github.com:Akkuma/ezMark cbace51
@Akkuma Akkuma Added a label class and moved function invocation to be inside. eb90ffa
@Akkuma Akkuma Modified CSS to take into account new default classes 024902e
@Akkuma Akkuma JSLinted, support for multiple class names, added an additional label…
… class to identify whether the label is for a radio or checkbox
2c96058
@Akkuma Akkuma Fixed data check as to prevent multiple "instantiations" of the plugi…
…n on the same input
a442784
@Akkuma Akkuma Switched from using the change event to the click event. IE was not p…
…roperly handling the change event being fired through a programmatic input.click

Added a disabled class for additional styling control of both the label and input.

Moved default options outside of function to prevent creating the same defaults over and over.
92ae7e5
@Akkuma

I recommend anyone interested in this plugin to take a look at https://github.com/Akkuma/jquery-ui-checkable as this plugin looks "dead". It should offer you everything this plugin does and then some.

@scarfacedeb

https://github.com/tomekwojcik/jQuery-Custom-Checkboxes also looks good enough. and it doesn't require jquery UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 25, 2011
  1. @Akkuma

    Modified the library to use delegates rather than binding. Streamline…

    Akkuma authored
    …d options by removing separate checked and selected classes. Improved performance by using native operations as much as possible and checking if the input has already been initiated. DRY'd the code.
  2. @Akkuma

    Removed extra "."

    Akkuma authored
  3. @Akkuma
Commits on Jan 26, 2011
  1. @Akkuma

    Added constants for the namespace and delegate class. Added a hover c…

    Akkuma authored
    …lass onto the wrapping container when label or div is hovered. Made the data stored on each input more flexible by storing as an object. Made the delegates more specific.
  2. @Akkuma
  3. @Akkuma
  4. @Akkuma
Commits on Feb 11, 2011
  1. @Akkuma

    JSLinted, support for multiple class names, added an additional label…

    Akkuma authored
    … class to identify whether the label is for a radio or checkbox
Commits on Feb 14, 2011
  1. @Akkuma
Commits on Feb 28, 2011
  1. @Akkuma

    Switched from using the change event to the click event. IE was not p…

    Akkuma authored
    …roperly handling the change event being fired through a programmatic input.click
    
    Added a disabled class for additional styling control of both the label and input.
    
    Moved default options outside of function to prevent creating the same defaults over and over.
This page is out of date. Refresh to see the latest.
Showing with 130 additions and 81 deletions.
  1. +8 −8 css/ezmark.css
  2. +122 −73 js/jquery.ezmark.js
View
16 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; }
View
195 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 <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:
- * checkboxCls - custom Checkbox Class
- * checkedCls - checkbox Checked State's Class
- * radioCls - custom radiobutton Class
- * selectedCls - radiobutton's Selected State's Class
- *
- * </usage>
- *
- * 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 <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($) {
- $.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' ? '<div class="'+defaultOpt.checkboxCls+'">' : '<div class="'+defaultOpt.radioCls+'">';
- // 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('<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);
+}(jQuery));
Something went wrong with that request. Please try again.