index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. $(function() {
  2. var stateSwitch = $('#state-switch')
  3. // initialize highlight.js
  4. hljs.initHighlightingOnLoad();
  5. $('input[name="download-version"]').on({
  6. 'init.bootstrapSwitch': function(e) {
  7. var state = $(this).is(':checked');
  8. $('#download-' + (state ? '2' : '3')).hide();
  9. },
  10. 'switchChange.bootstrapSwitch': function(e, state) {
  11. $('#download-3')[state ? 'show' : 'hide']();
  12. $('#download-2')[state ? 'hide' : 'show']();
  13. }
  14. });
  15. // initialize all the inputs
  16. $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
  17. // state
  18. $('#state-switch-toggle').on('click', function () {
  19. stateSwitch.bootstrapSwitch('toggleState');
  20. });
  21. $('#state-switch-on').on('click', function () {
  22. stateSwitch.bootstrapSwitch('state', true);
  23. });
  24. $('#state-switch-off').on('click', function () {
  25. stateSwitch.bootstrapSwitch('state', false);
  26. });
  27. $('#state-switch-state').on('click', function () {
  28. alert(stateSwitch.bootstrapSwitch('state'));
  29. });
  30. /*
  31. // dimension
  32. $('#btn-size-regular-switch').on('click', function () {
  33. $('#dimension-switch').bootstrapSwitch('size', '');
  34. });
  35. $('#btn-size-mini-switch').on('click', function () {
  36. $('#dimension-switch').bootstrapSwitch('size', 'mini');
  37. });
  38. $('#btn-size-small-switch').on('click', function () {
  39. $('#dimension-switch').bootstrapSwitch('size', 'small');
  40. });
  41. $('#btn-size-large-switch').on('click', function () {
  42. $('#dimension-switch').bootstrapSwitch('size', 'large');
  43. });
  44. // destroy
  45. $('#btn-destroy-switch').on('click', function () {
  46. $('#destroy-switch').bootstrapSwitch('destroy');
  47. $(this).remove();
  48. });
  49. // CREATE
  50. $('#btn-create').on('click', function () {
  51. $('#create-switch').bootstrapSwitch();
  52. $(this).remove();
  53. });
  54. // activation
  55. var $disable = $('#disable-switch');
  56. $('#btn-disable-is').on('click', function () {
  57. alert($disable.bootstrapSwitch('disabled'));
  58. });
  59. $('#btn-disable-toggle').on('click', function () {
  60. $disable.bootstrapSwitch('toggleDisabled');
  61. });
  62. $('#btn-disable-set').on('click', function () {
  63. $disable.bootstrapSwitch('disabled', true);
  64. });
  65. $('#btn-disable-remove').on('click', function () {
  66. $disable.bootstrapSwitch('disabled', false);
  67. });
  68. // readonly
  69. var $readonly = $('#readonly-switch');
  70. $('#btn-readonly-is').on('click', function () {
  71. alert($readonly.bootstrapSwitch('readonly'));
  72. });
  73. $('#btn-readonly-toggle').on('click', function () {
  74. $readonly.bootstrapSwitch('toggleReadonly');
  75. });
  76. $('#btn-readonly-set').on('click', function () {
  77. $readonly.bootstrapSwitch('readonly', true);
  78. });
  79. $('#btn-readonly-remove').on('click', function () {
  80. $readonly.bootstrapSwitch('readonly', false);
  81. });
  82. // label
  83. $('#btn-label-on-switch').on('click', function() {
  84. $('#label-switch').bootstrapSwitch('onText', 'I');
  85. });
  86. $('#btn-label-off-switch').on('click', function() {
  87. $('#label-switch').bootstrapSwitch('offText', 'O');
  88. });
  89. $('#label-toggle-switch').on('click', function(e, data) {
  90. $('.label-toggle-switch').bootstrapSwitch('toggleState');
  91. });
  92. $('.label-toggle-switch').on('switch-change', function(e, data) {
  93. alert(data.value);
  94. });
  95. // event handler
  96. $('#events-switch').on({
  97. init: function() {
  98. console.log('Initialized!');
  99. },
  100. switchChange: function ($element, data) {
  101. var $element = $(data.el),
  102. value = data.value;
  103. console.log(e, $element, value);
  104. }
  105. }).bootstrapSwitch();
  106. // color
  107. $('#btn-color-on-switch').on('click', function() {
  108. $('#change-color-switch').bootstrapSwitch('onColor', 'success');
  109. });
  110. $('#btn-color-off-switch').on('click', function() {
  111. $('#change-color-switch').bootstrapSwitch('offColor', 'danger');
  112. });
  113. // animation
  114. $('#btn-animate-switch').on('click', function() {
  115. $('#animated-switch').bootstrapSwitch('animate', true);
  116. });
  117. $('#btn-dont-animate-switch').on('click', function() {
  118. $('#animated-switch').bootstrapSwitch('animate', false);
  119. });
  120. // radio
  121. $('.radio1').on('switch-change', function () {
  122. $('.radio1').bootstrapSwitch('toggleRadioState');
  123. });
  124. $('.radio2').on('switch-change', function () {
  125. console.log("ok");
  126. $('.radio2').bootstrapSwitch('toggleRadioState', true);
  127. });
  128. */
  129. });