jquery.toggle.buttons.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. !function ($) {
  2. "use strict";
  3. // version: 1.6
  4. // by Mattia Larentis - follow me on twitter! @SpiritualGuru
  5. $.fn.toggleButtons = function (method) {
  6. var $element
  7. , $labelEnabled
  8. , options
  9. , active
  10. , styleActive
  11. , styleDisabled
  12. , animationCss
  13. , transitionSpeed = 0.05
  14. , defaultSpeed = 0.05
  15. , methods = {
  16. init: function (opt) {
  17. this.each(function () {
  18. $element = $(this);
  19. options = $.extend({}, $.fn.toggleButtons.defaults, opt);
  20. $element.attr("data-enabled", options.label.enabled === undefined ? "ON" : options.label.enabled);
  21. $element.attr("data-disabled", options.label.disabled === undefined ? "OFF " : options.label.disabled);
  22. $element.addClass('toggle-button');
  23. $labelEnabled = $('<label></label>').attr('for', $element.find('input').attr('id'));
  24. $element.append($labelEnabled);
  25. if (options.animated) {
  26. $element.addClass('toggle-button-animated');
  27. if (options.transitionSpeed !== undefined)
  28. if (/^(\d*%$)/.test(options.transitionSpeed)) // is a percent value?
  29. transitionSpeed = defaultSpeed * parseInt(options.transitionSpeed) / 100;
  30. else
  31. transitionSpeed = options.transitionSpeed;
  32. animationCss = ["-webkit-", "-moz-", "-o-", ""];
  33. $(animationCss).each(function () {
  34. $element.find('label').css(this + 'transition', 'all ' + transitionSpeed + 's');
  35. });
  36. }
  37. $element.css('width', options.width);
  38. active = $element.find('input').is(':checked');
  39. if (!active)
  40. $element.addClass('disabled');
  41. if($element.find('input').is(':disabled'))
  42. $element.addClass('deactivate');
  43. styleActive = options.style.enabled === undefined ? "" : options.style.enabled;
  44. styleDisabled = options.style.disabled === undefined ? "" : options.style.disabled;
  45. if (active && styleActive !== undefined)
  46. $element.addClass(styleActive);
  47. if (!active && styleDisabled !== undefined)
  48. $element.addClass(styleDisabled);
  49. $element.on('click', function (e) {
  50. if ($(e.target).is('input'))
  51. return true;
  52. e.stopPropagation();
  53. $(this).find('label').click();
  54. });
  55. $element.find('input').on('change', function(e) {
  56. e.stopPropagation();
  57. e.preventDefault();
  58. $element.toggleButtons("toggleState", true);
  59. });
  60. $element.find('label').on('click', function (e) {
  61. e.stopPropagation();
  62. e.preventDefault();
  63. if($element.is('.deactivate'))
  64. return true;
  65. $element = $(this).parent();
  66. $element
  67. .delay(transitionSpeed * 500).queue(function () {
  68. $(this).toggleClass('disabled')
  69. .toggleClass(styleActive)
  70. .toggleClass(styleDisabled)
  71. .dequeue();
  72. });
  73. active = !($element.find('input').is(':checked'));
  74. $element.find('input').attr('checked', active);
  75. options.onChange($element, active, e);
  76. });
  77. });
  78. },
  79. toggleActivation: function () {
  80. $(this).toggleClass('deactivate');
  81. },
  82. toggleState: function(clickOnAnotherLabel) {
  83. if(clickOnAnotherLabel !== undefined)
  84. $(this).toggleClass('disabled');
  85. else
  86. $(this).find('label').click();
  87. }
  88. };
  89. if (methods[method]) {
  90. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  91. } else if (typeof method === 'object' || !method) {
  92. return methods.init.apply(this, arguments);
  93. } else {
  94. $.error('Method ' + method + ' does not exist on jQuery.tooltip');
  95. }
  96. };
  97. $.fn.toggleButtons.defaults = {
  98. onChange: function () {
  99. },
  100. width: 100,
  101. animated: true,
  102. transitionSpeed: undefined,
  103. label: {
  104. enabled: undefined,
  105. disabled: undefined
  106. },
  107. style: {
  108. enabled: undefined,
  109. disabled: undefined
  110. }
  111. };
  112. }($);