yvanui.checkbox.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /**
  2. * YvanUI
  3. *
  4. * Copyright (c) 2018 www.yvanui.com. All rights reserved.
  5. * @author luoyifan@qq.com
  6. * @time 2018-11-27 11:16:00
  7. */
  8. "use strict";
  9. (function ($) {
  10. var idx = 1;
  11. function createBox(target) {
  12. //_2
  13. var $dom = $(
  14. '<div class="yvan-checkbox" tabindex="0">\n' +
  15. '<input type="checkbox" class="checkbox-value" style="display: none;">\n' +
  16. '<span></span><i class="fa fa-check"></i>\n' +
  17. '</div>'
  18. ).insertAfter(target);
  19. var t = $(target);
  20. t.addClass("checkbox-f").hide();
  21. var name = t.attr("name");
  22. if (name) {
  23. //安排新的 input 框,取代他的名字
  24. t.removeAttr("name").attr("checkboxName", name);
  25. $dom.find(".checkbox-value").attr("name", name);
  26. }
  27. return $dom;
  28. }
  29. function init(target) {
  30. //_6
  31. var state = $.data(target, "checkbox");
  32. var opts = state.options;
  33. var $dom = state.checkbox;
  34. var id = "_yvan_checkbox_" + (++idx);
  35. $dom.find(".checkbox-value").attr("id", id);
  36. if (opts.label) {
  37. $dom.find('span').html(opts.label);
  38. }
  39. if (opts.primary) {
  40. $dom.attr('lay-skin', 'primary');
  41. }
  42. $(target).checkbox("setValue", opts.value);
  43. setValue(target, opts.checked);
  44. setDisable(target, opts.disabled);
  45. }
  46. function bindEvent(target) {
  47. //_e
  48. var state = $.data(target, "checkbox");
  49. var opts = state.options;
  50. var $dom = state.checkbox;
  51. $dom.unbind(".checkbox").bind("click.checkbox", function () {
  52. if (!opts.disabled) {
  53. setValue(target, !opts.checked);
  54. }
  55. });
  56. }
  57. function setValue(target, value, isInit) {
  58. //_c
  59. var state = $.data(target, "checkbox");
  60. var opts = state.options;
  61. var $dom = state.checkbox;
  62. $dom.find(".checkbox-value")._propAttr("checked", value);
  63. if (value) {
  64. $dom.addClass('yvan-checked');
  65. } else {
  66. $dom.removeClass('yvan-checked');
  67. }
  68. if (isInit) {
  69. opts.checked = value;
  70. return;
  71. }
  72. if (opts.checked !== value) {
  73. opts.checked = value;
  74. opts.onChange.call(target, value);
  75. }
  76. }
  77. function setDisable(target, value) {
  78. //_d
  79. var state = $.data(target, "checkbox");
  80. var opts = state.options;
  81. var $dom = state.checkbox;
  82. var rv = $dom.find(".checkbox-value");
  83. opts.disabled = value;
  84. if (value) {
  85. $(target).add(rv)._propAttr("disabled", true);
  86. $dom.addClass('yvan-checkbox-disabled').addClass('yvan-disabled');
  87. } else {
  88. $(target).add(rv)._propAttr("disabled", false);
  89. $dom.removeClass('yvan-checkbox-disabled').removeClass('yvan-disabled');
  90. }
  91. }
  92. $.fn.checkbox = function (options, param) {
  93. if (typeof options == 'string') {
  94. return $.fn.checkbox.methods[options](this, param);
  95. }
  96. options = options || {};
  97. return this.each(function () {
  98. var state = $.data(this, 'checkbox');
  99. if (state) {
  100. $.extend(state.options, options);
  101. } else {
  102. state = $.data(this, 'checkbox', {
  103. options: $.extend({},
  104. $.fn.checkbox.defaults,
  105. $.fn.checkbox.parseOptions(this), options),
  106. checkbox: createBox(this)
  107. });
  108. }
  109. state.options.originalChecked = state.options.checked;
  110. init(this); //_6
  111. bindEvent(this); //_e
  112. //_13
  113. });
  114. };
  115. $.fn.checkbox.methods = {
  116. options: function (jq) {
  117. var opts = jq.data("checkbox");
  118. return $.extend(opts.options, { value: opts.checkbox.find(".checkbox-value").val() });
  119. }, checkbox: function (jq, value) {
  120. var state = $.data(jq[0], "checkbox");
  121. return state.checkbox;
  122. }, initValue: function (jq, value) {
  123. return jq.each(function () {
  124. setValue(this, value, true);
  125. $.data(this, "checkbox").checkbox.find(".checkbox-value").val(value);
  126. });
  127. }, setValue: function (jq, value) {
  128. return jq.each(function () {
  129. $(this).val(value);
  130. $.data(this, "checkbox").checkbox.find(".checkbox-value").val(value);
  131. });
  132. }, isChecked: function (jq, value) {
  133. return $.data(jq[0], "checkbox").checkbox.find(".checkbox-value").is(':checked');
  134. }, enable: function (jq) {
  135. return jq.each(function () {
  136. setDisable(this, false);
  137. });
  138. }, disable: function (jq) {
  139. return jq.each(function () {
  140. setDisable(this, true);
  141. });
  142. }, check: function (jq) {
  143. return jq.each(function () {
  144. setValue(this, true);
  145. });
  146. }, uncheck: function (jq) {
  147. return jq.each(function () {
  148. setValue(this, false);
  149. });
  150. }, clear: function (jq) {
  151. return jq.each(function () {
  152. setValue(this, false);
  153. });
  154. }, reset: function (jq) {
  155. return jq.each(function () {
  156. var _28 = $(this).checkbox("options");
  157. setValue(this, _28.originalChecked);
  158. });
  159. }
  160. };
  161. $.fn.checkbox.parseOptions = function (html) {
  162. var t = $(html);
  163. return $.extend({},
  164. $.parser.parseOptions(html, ["label", { labelWidth: "number" }]),
  165. {
  166. value: (t.val() || undefined),
  167. checked: (t.attr("checked") ? true : undefined),
  168. disabled: (t.attr("disabled") ? true : undefined)
  169. });
  170. };
  171. $.fn.checkbox.defaults = {
  172. width: 20,
  173. height: 20,
  174. value: null,
  175. primary: true,
  176. disabled: false,
  177. checked: false,
  178. label: null,
  179. labelWidth: "auto",
  180. onChange: function (value) {
  181. }
  182. };
  183. })(jQuery);