honeySwitch.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. var honeySwitch = {};
  2. honeySwitch.themeColor = "rgb(100, 189, 99)";
  3. honeySwitch.init = function() {
  4. var s = "<span class='slider'></span>";
  5. $("[class^=switch]").append(s);
  6. $("[class^=switch]").click(function() {
  7. if ($(this).hasClass("switch-disabled")) {
  8. return;
  9. }
  10. if ($(this).hasClass("switch-on")) {
  11. $(this).removeClass("switch-on").addClass("switch-off");
  12. $(".switch-off").css({
  13. 'border-color' : '#dfdfdf',
  14. 'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
  15. 'background-color' : 'rgb(255, 255, 255)'
  16. });
  17. } else {
  18. $(this).removeClass("switch-off").addClass("switch-on");
  19. if (honeySwitch.themeColor) {
  20. var c = honeySwitch.themeColor;
  21. $(this).css({
  22. 'border-color' : c,
  23. 'box-shadow' : c + ' 0px 0px 0px 16px inset',
  24. 'background-color' : c
  25. });
  26. }
  27. if ($(this).attr('themeColor')) {
  28. var c2 = $(this).attr('themeColor');
  29. $(this).css({
  30. 'border-color' : c2,
  31. 'box-shadow' : c2 + ' 0px 0px 0px 16px inset',
  32. 'background-color' : c2
  33. });
  34. }
  35. }
  36. });
  37. window.switchEvent = function(ele, on, off) {
  38. $(ele).click(function() {
  39. if ($(this).hasClass("switch-disabled")) {
  40. return;
  41. }
  42. if ($(this).hasClass('switch-on')) {
  43. if ( typeof on == 'function') {
  44. on();
  45. }
  46. } else {
  47. if ( typeof off == 'function') {
  48. off();
  49. }
  50. }
  51. });
  52. }
  53. if (this.themeColor) {
  54. var c = this.themeColor;
  55. $(".switch-on").css({
  56. 'border-color' : c,
  57. 'box-shadow' : c + ' 0px 0px 0px 16px inset',
  58. 'background-color' : c
  59. });
  60. $(".switch-off").css({
  61. 'border-color' : '#dfdfdf',
  62. 'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
  63. 'background-color' : 'rgb(255, 255, 255)'
  64. });
  65. }
  66. if ($('[themeColor]').length > 0) {
  67. $('[themeColor]').each(function() {
  68. var c = $(this).attr('themeColor') || honeySwitch.themeColor;
  69. if ($(this).hasClass("switch-on")) {
  70. $(this).css({
  71. 'border-color' : c,
  72. 'box-shadow' : c + ' 0px 0px 0px 16px inset',
  73. 'background-color' : c
  74. });
  75. } else {
  76. $(".switch-off").css({
  77. 'border-color' : '#dfdfdf',
  78. 'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
  79. 'background-color' : 'rgb(255, 255, 255)'
  80. });
  81. }
  82. });
  83. }
  84. };
  85. honeySwitch.showOn = function(ele) {
  86. $(ele).removeClass("switch-off").addClass("switch-on");
  87. if(honeySwitch.themeColor){
  88. var c = honeySwitch.themeColor;
  89. $(ele).css({
  90. 'border-color' : c,
  91. 'box-shadow' : c + ' 0px 0px 0px 16px inset',
  92. 'background-color' : c
  93. });
  94. }
  95. if ($(ele).attr('themeColor')) {
  96. var c2 = $(ele).attr('themeColor');
  97. $(ele).css({
  98. 'border-color' : c2,
  99. 'box-shadow' : c2 + ' 0px 0px 0px 16px inset',
  100. 'background-color' : c2
  101. });
  102. }
  103. }
  104. honeySwitch.showOff = function(ele) {
  105. $(ele).removeClass("switch-on").addClass("switch-off");
  106. $(".switch-off").css({
  107. 'border-color' : '#dfdfdf',
  108. 'box-shadow' : 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
  109. 'background-color' : 'rgb(255, 255, 255)'
  110. });
  111. }
  112. $(function() {
  113. honeySwitch.init();
  114. });