JAVASCRIPT   47

toggle init

Guest on 8th July 2022 01:31:02 AM

  1. $(function() {
  2.     // initialize all the inputs
  3.     $('input[type="checkbox"],[type="radio"]').not('#create-switch').bootstrapSwitch();
  4.  
  5.     // dimension
  6.     $('#btn-size-regular-switch').on('click', function () {
  7.         $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
  8.     });
  9.     $('#btn-size-mini-switch').on('click', function () {
  10.         $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
  11.     });
  12.     $('#btn-size-small-switch').on('click', function () {
  13.         $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
  14.     });
  15.     $('#btn-size-large-switch').on('click', function () {
  16.         $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
  17.     });
  18.  
  19.     // state
  20.     $('#toggle-state-switch-button').on('click', function () {
  21.         $('#toggle-state-switch').bootstrapSwitch('toggleState');
  22.     });
  23.     $('#toggle-state-switch-button-on').on('click', function () {
  24.         $('#toggle-state-switch').bootstrapSwitch('setState', true);
  25.     });
  26.     $('#toggle-state-switch-button-off').on('click', function () {
  27.         $('#toggle-state-switch').bootstrapSwitch('setState', false);
  28.     });
  29.     $('#toggle-state-switch-button-state').on('click', function () {
  30.         alert($('#toggle-state-switch').bootstrapSwitch('state'));
  31.     });
  32.  
  33.     // destroy
  34.     $('#btn-destroy-switch').on('click', function () {
  35.         $('#destroy-switch').bootstrapSwitch('destroy');
  36.         $(this).remove();
  37.     });
  38.     // CREATE
  39.     $('#btn-create').on('click', function () {
  40.         $('#create-switch').bootstrapSwitch();
  41.         $(this).remove();
  42.     });
  43.  
  44.     // activation
  45.     var $disable = $('#disable-switch');
  46.     $('#btn-disable-is').on('click', function () {
  47.         alert($disable.bootstrapSwitch('isDisabled'));
  48.     });
  49.     $('#btn-disable-toggle').on('click', function () {
  50.         $disable.bootstrapSwitch('toggleDisabled');
  51.     });
  52.     $('#btn-disable-set').on('click', function () {
  53.         $disable.bootstrapSwitch('setDisabled', true);
  54.     });
  55.     $('#btn-disable-remove').on('click', function () {
  56.         $disable.bootstrapSwitch('setDisabled', false);
  57.     });
  58.  
  59.     // readonly
  60.     var $readonly = $('#readonly-switch');
  61.     $('#btn-readonly-is').on('click', function () {
  62.         alert($readonly.bootstrapSwitch('isReadOnly'));
  63.     });
  64.     $('#btn-readonly-toggle').on('click', function () {
  65.         $readonly.bootstrapSwitch('toggleReadOnly');
  66.     });
  67.     $('#btn-readonly-set').on('click', function () {
  68.         $readonly.bootstrapSwitch('setReadOnly', true);
  69.     });
  70.     $('#btn-readonly-remove').on('click', function () {
  71.         $readonly.bootstrapSwitch('setReadOnly', false);
  72.     });
  73.  
  74.     // label
  75.     $('#btn-label-on-switch').on('click', function() {
  76.         $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
  77.     });
  78.     $('#btn-label-off-switch').on('click', function() {
  79.         $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
  80.     });
  81.  
  82.     $('#label-toggle-switch').on('click', function(e, data) {
  83.         $('.label-toggle-switch').bootstrapSwitch('toggleState');
  84.     });
  85.     $('.label-toggle-switch').on('switch-change', function(e, data) {
  86.         alert(data.value);
  87.     });
  88.  
  89.     // event handler
  90.     $('#switch-change').on('switch-change', function (e, data) {
  91.         var $element = $(data.el),
  92.             value = data.value;
  93.  
  94.         console.log(e, $element, value);
  95.     });
  96.  
  97.     // color
  98.     $('#btn-color-on-switch').on('click', function() {
  99.         $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
  100.     });
  101.     $('#btn-color-off-switch').on('click', function() {
  102.         $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
  103.     });
  104.  
  105.     // animation
  106.     $('#btn-animate-switch').on('click', function() {
  107.         $('#animated-switch').bootstrapSwitch('setAnimated', true);
  108.     });
  109.     $('#btn-dont-animate-switch').on('click', function() {
  110.         $('#animated-switch').bootstrapSwitch('setAnimated', false);
  111.     });
  112.  
  113.     // radio
  114.     $('.radio1').on('switch-change', function () {
  115.         $('.radio1').bootstrapSwitch('toggleRadioState');
  116.     });
  117.     $('.radio2').on('switch-change', function () {
  118.         $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
  119.     });
  120. });

Raw Paste


Login or Register to edit or fork this paste. It's free.