flatui-radio.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /* =============================================================
  2. * flatui-radio v0.0.3
  3. * ============================================================ */
  4. !function ($) {
  5. /* RADIO PUBLIC CLASS DEFINITION
  6. * ============================== */
  7. var Radio = function (element, options) {
  8. this.init(element, options);
  9. }
  10. Radio.prototype = {
  11. constructor: Radio
  12. , init: function (element, options) {
  13. var $el = this.$element = $(element)
  14. this.options = $.extend({}, $.fn.radio.defaults, options);
  15. $el.before(this.options.template);
  16. this.setState();
  17. }
  18. , setState: function () {
  19. var $el = this.$element
  20. , $parent = $el.closest('.radio');
  21. $el.prop('disabled') && $parent.addClass('disabled');
  22. $el.prop('checked') && $parent.addClass('checked');
  23. }
  24. , toggle: function () {
  25. var d = 'disabled'
  26. , ch = 'checked'
  27. , $el = this.$element
  28. , checked = $el.prop(ch)
  29. , $parent = $el.closest('.radio')
  30. , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
  31. , $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]')
  32. , e = $.Event('toggle')
  33. $elemGroup.not($el).each(function () {
  34. var $el = $(this)
  35. , $parent = $(this).closest('.radio');
  36. if ($el.prop(d) == false) {
  37. $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change');
  38. }
  39. });
  40. if ($el.prop(d) == false) {
  41. if (checked == false) $parent.addClass(ch) && $el.prop(ch, true);
  42. $el.trigger(e);
  43. if (checked !== $el.prop(ch)) {
  44. $el.trigger('change');
  45. }
  46. }
  47. }
  48. , setCheck: function (option) {
  49. var ch = 'checked'
  50. , $el = this.$element
  51. , $parent = $el.closest('.radio')
  52. , checkAction = option == 'check' ? true : false
  53. , checked = $el.prop(ch)
  54. , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
  55. , $elemGroup = $parentWrap.find(':radio[name="' + $el['attr']('name') + '"]')
  56. , e = $.Event(option)
  57. $elemGroup.not($el).each(function () {
  58. var $el = $(this)
  59. , $parent = $(this).closest('.radio');
  60. $parent.removeClass(ch) && $el.removeAttr(ch);
  61. });
  62. $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch);
  63. $el.trigger(e);
  64. if (checked !== $el.prop(ch)) {
  65. $el.trigger('change');
  66. }
  67. }
  68. }
  69. /* RADIO PLUGIN DEFINITION
  70. * ======================== */
  71. var old = $.fn.radio
  72. $.fn.radio = function (option) {
  73. return this.each(function () {
  74. var $this = $(this)
  75. , data = $this.data('radio')
  76. , options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option == 'object' && option);
  77. if (!data) $this.data('radio', (data = new Radio(this, options)));
  78. if (option == 'toggle') data.toggle()
  79. if (option == 'check' || option == 'uncheck') data.setCheck(option)
  80. else if (option) data.setState();
  81. });
  82. }
  83. $.fn.radio.defaults = {
  84. template: '<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span>'
  85. }
  86. /* RADIO NO CONFLICT
  87. * ================== */
  88. $.fn.radio.noConflict = function () {
  89. $.fn.radio = old;
  90. return this;
  91. }
  92. /* RADIO DATA-API
  93. * =============== */
  94. $(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) {
  95. var $radio = $(e.target);
  96. e && e.preventDefault() && e.stopPropagation();
  97. if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio');
  98. $radio.find(':radio').radio('toggle');
  99. });
  100. $(function () {
  101. $('[data-toggle="radio"]').each(function () {
  102. var $radio = $(this);
  103. $radio.radio();
  104. });
  105. });
  106. }(window.jQuery);