Cloudy River's Workshop: Apple Style JQuery Toggle Button

JQuery Toggle Button is an Apple style toggle button which has following very nice look and feel.

The light theme is very nice looking. To apply it in your web page, add following css at first:

  <head>
    <title>My cool page</title>

    <link rel="stylesheet" href="css/toggles.css">
    <link rel="stylesheet" href="css/toggles-light.css">

    <!-- ALL OF THE THEMES -->
    <!-- <link rel="stylesheet" href="css/toggles-all.css"> -->

    <!-- ALL OF THE CSS AND THEMES IN ONE FILE -->
    <!-- <link rel="stylesheet" href="css/toggles-full.css"> -->

and javascript file at latter.

    <script src="js/toggles.js" type="text/javascript"></script>
    <!-- MINIFIED JS - recommended for production -->
    <!-- <script src="js/toggles.min,js" type="text/javascript"></script> -->
  </body>
</html>

Add following to your web page to place the toggle.

<div class="toggle toggle-light">

Add following javascript to your web page javascript file.

// Simplest way:
$('.toggle').toggles();

// With options (defaults shown below)
$('.toggle').toggles({
  drag: true, // allow dragging the toggle between positions
  click: true, // allow clicking on the toggle
  text: {
    on: 'ON', // text for the ON position
    off: 'OFF' // and off
  },
  on: true, // is the toggle ON on init
  animate: 250, // animation time (ms)
  easing: 'swing', // animation transition easing function
  checkbox: null, // the checkbox to toggle (for use in forms)
  clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
  width: 50, // width used if not set in css
  height: 20, // height if not set in css
  type: 'compact' // if this is set to 'select' then the select style toggle will be used
});


// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function(e, active) {
  if (active) {
    console.log('Toggle is now ON!');
  } else {
    console.log('Toggle is now OFF!');
  }
});

Following Javascript code can be used to change toggle states:

// initiate a new Toggles class
$('.toggles').toggles({
  on: true
});

// the underlying Toggles class can be accessed
var myToggle = $('.toggles').data('toggles');

console.log(myToggle.active); // true
myToggle.toggle();
console.log(myToggle.active); // false

// set the state to 'false'
// will not do anything if the state is already false
myToggle.toggle(false);
console.log(myToggle.active); // false

// passing a boolean in place of options on an active toggle element
// will set the state
$('.toggles').toggles(true);
console.log(myToggle.active); // true

// the toggle-active data attribute stores the state too
console.log($('.toggles').data('toggle-active')); // true

// myToggle.toggle(state, noAnimate, noEvent)

// don't animate the change
myToggle.toggle(false, true);

// change the state without triggering an event 
myToggle.toggle(true, false, true);

Following javascript can be used to disable and enable your toggle control:

// your toggle element
var toggle = $('.toggle');

// initialise it
toggle.toggles();

// disable the toggle element (click + drag will no longer work)
toggle.toggleClass('disabled', true);

// setting the state via JS is NOT disabled, only user input
// toggle the toggle on
toggle.toggles(true);

// re-enable the toggle
toggle.toggleClass('disabled', false);

My own example:
Html part:

<div id="buttonAutoRefresh" class="toggle toggle-light"></div>

Javascript part:

    var autoRefresh;
    var SetAutoRefreshOnOff = function () {
        var button = $('#buttonAutoRefresh');
        var toggle = button.data('toggles');
        //alert(toggle.active);
        //button.Toggle(); //switch the states of the button
        if (toggle.active) {
            autoRefresh = setInterval(LoadPageContent, 15000); //only set one time
        }
        else if (typeof (autoRefresh) != "undefined") {
            clearInterval(autoRefresh); //clear autoRefresh
        }
    }

    // initiate a new Toggles class
    $('.toggle').toggles({ width: 50 });
    $('.toggle').on('toggle', SetAutoRefreshOnOff);

Reference:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/

Cloudy River's Workshop

Tuesday, December 1, 2015

Apple Style JQuery Toggle Button

1 comment: