From 7ab0e30583bdcf1474c822bc09d218dce0b373df Mon Sep 17 00:00:00 2001 From: norlin Date: Fri, 22 Mar 2013 12:55:33 +0400 Subject: [PATCH 1/2] Global refactoring of this plugin all logic and behaviors are remains the same --- js/prettyCheckboxes.js | 201 +++++++++++++++++++++++------------------ 1 file changed, 112 insertions(+), 89 deletions(-) diff --git a/js/prettyCheckboxes.js b/js/prettyCheckboxes.js index de5a3db..509e988 100644 --- a/js/prettyCheckboxes.js +++ b/js/prettyCheckboxes.js @@ -1,96 +1,119 @@ /* ------------------------------------------------------------------------ prettyCheckboxes - + Developped By: Stephane Caron (http://www.no-margin-for-errors.com) + Refactoring by: Norlin (http://github.com/norlin) Inspired By: All the non user friendly custom checkboxes solutions ;) - Version: 1.1 - + Version: 1.2 + Copyright: Feel free to redistribute the script/modify it, as - long as you leave my infos at the top. + long as you leave my infos at the top. ------------------------------------------------------------------------- */ - - jQuery.fn.prettyCheckboxes = function(settings) { - settings = jQuery.extend({ - checkboxWidth: 17, - checkboxHeight: 17, - className : 'prettyCheckbox', - display: 'list' - }, settings); - - $(this).each(function(){ - // Find the label - $label = $('label[for="'+$(this).attr('id')+'"]'); - - // Add the checkbox holder to the label - $label.prepend(""); - - // If the checkbox is checked, display it as checked - if($(this).is(':checked')) { $label.addClass('checked'); }; - - // Assign the class on the label - $label.addClass(settings.className).addClass($(this).attr('type')).addClass(settings.display); - - // Assign the dimensions to the checkbox display - $label.find('span.holderWrap').width(settings.checkboxWidth).height(settings.checkboxHeight); - $label.find('span.holder').width(settings.checkboxWidth); - - // Hide the checkbox - $(this).addClass('hiddenCheckbox'); - - // Associate the click event - $label.bind('click',function(){ - $('input#' + $(this).attr('for')).triggerHandler('click'); - - if($('input#' + $(this).attr('for')).is(':checkbox')){ - $(this).toggleClass('checked'); - $('input#' + $(this).attr('for')).checked = true; - - $(this).find('span.holder').css('top',0); - }else{ - $toCheck = $('input#' + $(this).attr('for')); - - // Uncheck all radio - $('input[name="'+$toCheck.attr('name')+'"]').each(function(){ - $('label[for="' + $(this).attr('id')+'"]').removeClass('checked'); - }); - - $(this).addClass('checked'); - $toCheck.checked = true; - }; - }); - - $('input#' + $label.attr('for')).bind('keypress',function(e){ - if(e.keyCode == 32){ - if($.browser.msie){ - $('label[for="'+$(this).attr('id')+'"]').toggleClass("checked"); - }else{ - $(this).trigger('click'); - } - return false; - }; - }); + +jQuery.fn.prettyCheckboxes = function(settings) { + var classes = { + checked: 'checked', + holder: 'holder', + holderWrap: 'holderWrap', + hidden: 'hiddenCheckbox' + }, + template = ''; + + settings = jQuery.extend({ + checkboxWidth: 17, + checkboxHeight: 17, + className : 'prettyCheckbox', + display: 'list' + }, settings); + + $(this).each(function () { + // Find the label + var $input = $(this), + $label = $('label[for="' + $input.attr('id') + '"]'); + + // Add the checkbox holder to the label + $label.prepend(template); + + // If the checkbox is checked, display it as checked + if ($input.is(':checked')) { + $label.addClass(classes.checked); + } + + // Assign the class on the label + $label.addClass(settings.className). + addClass($input.attr('type')). + addClass(settings.display); + + // Assign the dimensions to the checkbox display + $label.find('.' + classes.holderWrap). + width(settings.checkboxWidth). + height(settings.checkboxHeight); + + $label.find('.' + classes.holder). + width(settings.checkboxWidth); + + // Hide the checkbox + $input.addClass(classes.hidden); + + // Associate the click event + $label.click(function(){ + if ($input.is(':disabled')) { + return false; + } + + $input.triggerHandler('click'); + + if ($input.is(':checkbox')){ + $label.toggleClass(classes.checked); + $input.checked = true; + + $label.find('.' + classes.holder).css('top',0); + } else { + // Uncheck all radio + $('input[name="' + $input.attr('name') + '"]').each(function () { + $('label[for="' + this.id + '"]').removeClass(classes.checked); + }); + + $input.addClass(classes.checked); + $input.checked = true; + } + }); + + $input.keypress(function(e) { + if (e.keyCode == 32){ + if ($.browser.msie){ + $label.toggleClass(classes.checked); + } else { + $input.trigger('click'); + } + + return false; + } }); - }; - - checkAllPrettyCheckboxes = function(caller, container){ - if($(caller).is(':checked')){ - // Find the label corresponding to each checkbox and click it - $(container).find('input[type=checkbox]:not(:checked)').each(function(){ - $('label[for="'+$(this).attr('id')+'"]').trigger('click'); - if($.browser.msie){ - $(this).attr('checked','checked'); - }else{ - $(this).trigger('click'); - }; - }); - }else{ - $(container).find('input[type=checkbox]:checked').each(function(){ - $('label[for="'+$(this).attr('id')+'"]').trigger('click'); - if($.browser.msie){ - $(this).attr('checked',''); - }else{ - $(this).trigger('click'); - }; - }); - }; - }; \ No newline at end of file + }); +}; + +var checkAllPrettyCheckboxes = function(caller, container){ + var $container = $(container), + $inputs = $container.find('input[type=checkbox]'); + + // Find the label corresponding to each checkbox... + if ($(caller).is(':checked')) { + $inputs = $inputs.not(':checked'); + } else { + $inputs = $inputs.filter(':checked'); + } + + //...and click it + $inputs.each(function(){ + var $this = $(this); + + $('label[for="' + this.id + '"]').trigger('click'); + + if ($.browser.msie) { + $this.attr('checked','checked'); + } else { + $this.trigger('click'); + } + }); +}; \ No newline at end of file From 09959f20042487f33eb68747d48431c14b797f5f Mon Sep 17 00:00:00 2001 From: norlin Date: Fri, 22 Mar 2013 19:25:32 +0400 Subject: [PATCH 2/2] oops --- js/prettyCheckboxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/prettyCheckboxes.js b/js/prettyCheckboxes.js index 509e988..5e7f0ed 100644 --- a/js/prettyCheckboxes.js +++ b/js/prettyCheckboxes.js @@ -74,7 +74,7 @@ jQuery.fn.prettyCheckboxes = function(settings) { $('label[for="' + this.id + '"]').removeClass(classes.checked); }); - $input.addClass(classes.checked); + $label.addClass(classes.checked); $input.checked = true; } });