index.js 4.5 KB

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