123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370 |
- /*
- CHECKRADIOS - jQuery plugin to allow custom styling of checkboxes
- by Chris McGuckin (https://github.com/cosmicwheels)
-
-
- License: MIT (http://opensource.org/licenses/MIT)
-
-
- Credits:
- ---------------------------------------------------------------------------------
-
- icomoon (http://icomoon.io/)
-
- Please refer to the icomoon website for the license regarding their icons.
-
- ---------------------------------------------------------------------------------
-
- Fontawesome (http://fortawesome.github.io/Font-Awesome/)
-
- Please refer to the fontawesome website for the license regarding their icons.
-
- ---------------------------------------------------------------------------------
-
- Stephan Richter (https://github.com/strichter)
-
- Thanks to Stephan for pointing out and helping to add the triggering of events
- to help further mimic the checkboxes and radios as well as providing other
- important bug fixes.
-
- ---------------------------------------------------------------------------------
- ---------------------------------------------------------------------------------
-
- */
- (function ($) {
- $.fn.checkradios = function (options) {
- var $elements = this;
- //Default Settings
- var settings = $.extend({
- checkbox: {
- iconClass: 'icon-checkradios-checkmark'
- },
- radio: {
- iconClass: 'icon-checkradios-circle'
- },
- onChange: function (checked, $element, $realElement) {}
- }, options);
- // Functionality
- var form = {
- checkbox: function ($checkbox) {
-
- var THIS = this;
- //Make sure checkradios isnt already in use
- if (!$checkbox.parent().hasClass('checkradios-checkbox')) {
- //Get the elements classes
- var classes = $checkbox.attr('class');
- if (classes === undefined) {
- classes = '';
- }
- //Wrap the input
- var $item = $checkbox.wrap('<div class="checkradios-checkbox ' + classes + '"/>');
- //Get the new checkbox
- var $holder = $item.parent();
- //Check if box is checked
- if ($item.is(':checked')) {
- THIS.checkboxEnable($item);
- } else {
- THIS.checkboxDisable($item);
- }
- //Add keyboard support
- $checkbox.keypress(function (e) {
- var key = e.keyCode;
- //On enter/return or space
- if ((key < 1) || (key == 13) || (key == 32)) {
- $holder.click();
- }
- });
- //Add tabbing support
- $checkbox.on({
- focusin: function () {
- $holder.addClass('focus');
- },
- focusout: function () {
- var $this = $(this);
- setTimeout(function () {
- if (!$this.is(':focus')) {
- $holder.removeClass('focus');
- }
- }, 10);
- }
- });
- $holder.mousedown(function () {
- setTimeout(function () {
- //Add focus
- $checkbox.focus();
- }, 10);
- });
- //Disable usual click functionality
- $checkbox.click(function (e) {
- e.stopPropagation();
- e.preventDefault();
- });
- //On button click
- $holder.click(function () {
- //Add check
- if ($item.is(':checked')) {
- THIS.checkboxDisable($item);
- //Callback
- settings.onChange(false, $holder, $item);
- } else {
- THIS.checkboxEnable($item);
- //Callback
- settings.onChange(true, $holder, $item);
- }
- return false;
- });
- }
- },
- radio: function ($radio) {
- var THIS = this;
- //Make sure checkradios isnt already in use
- if (!$radio.parent().hasClass('checkradios-radio')) {
- //Get the elements classes
- var classes = $radio.attr('class');
- if (classes === undefined) {
- classes = '';
- }
- //Wrap the input
- var $item = $radio.wrap('<div class="checkradios-radio ' + classes + '"/>');
- //Get the new checkbox
- var $holder = $item.parent();
- //Check if box is checked
- if ($item.is(':checked')) {
- THIS.radioEnable($item);
- } else {
- THIS.radioDisable($item);
- }
- //Add tabbing suppot
- $radio.on({
-
- focusin: function () {
-
- //Add focus class
- $holder.addClass('focus');
-
-
- THIS.radioEnable($item);
- //Get group Name
- var radio_name = $item.attr('name');
- var $group = $('input[name="' + radio_name + '"]');
- //Set checked/unchecked for each element in group
- $group.each(function () {
-
- if ($(this).is(':checked')) {
-
- THIS.radioEnable($(this));
- //Callback
- settings.onChange(true, $(this).parent(), $(this));
-
- } else {
-
- THIS.radioDisable($(this));
- //Callback
- settings.onChange(false, $(this).parent(), $(this));
-
- }
- });
- },
- focusout: function () {
-
- var $this = $(this);
- setTimeout(function () {
-
- if (!$this.is(':focus')) {
-
- $holder.removeClass('focus');
-
- }
-
- }, 10);
-
- }
- });
- $holder.click(function () {
-
- //Add focus
- $radio.focus();
-
- });
- //Disable usual click functionality
- $radio.click(function (e) {
-
- e.stopPropagation();
- e.preventDefault();
-
- });
- }
- },
- /*Private*/
- checkboxEnable: function ($checkbox) {
-
- $checkbox.parent().removeClass(settings.checkbox.iconClass);
- $checkbox.parent().removeClass('unchecked');
- $checkbox.parent().addClass(settings.checkbox.iconClass);
- $checkbox.parent().addClass('checked');
- $checkbox.prop('checked', true).trigger('change');
-
-
- },
- checkboxDisable: function ($checkbox) {
-
- $checkbox.parent().removeClass(settings.checkbox.iconClass);
- $checkbox.parent().addClass('unchecked');
- $checkbox.prop('checked', false).trigger('change');
-
-
- },
- radioEnable: function ($radio) {
-
- $radio.parent().removeClass(settings.radio.iconClass);
- $radio.parent().removeClass('unchecked');
- $radio.parent().addClass(settings.radio.iconClass);
- $radio.parent().addClass('checked');
- $radio.prop('checked', true).trigger('change');
-
-
-
- },
- radioDisable: function ($radio) {
-
- $radio.parent().removeClass('checked');
- $radio.parent().removeClass(settings.radio.iconClass);
- $radio.parent().addClass('unchecked');
- $radio.prop('checked', false).trigger('change');
-
-
- }
- };
- //Loop through elements
- $elements.each(function (i, val) {
- var $this = $(this);
- //Check for checkbox
- if ($this.is("input[type=checkbox]")) {
-
- //Setup checkboxes
- form.checkbox($this);
-
- }
- //Check for radio
- if ($this.is("input[type=radio]")) {
-
- //Setup checkboxes
- form.radio($this);
-
- }
- return this;
- });
- };
- }(jQuery));
|