A jquery plugin that create a switchable toggle.

• Main files
• Quick start
• Requirements
• Usage
• Examples
• Options
• Methods
• Events
• No conflict
• Browser support
• Contributing
• Development
• Changelog
• Copyright and license

dist/ ├── jquery-asSwitch.js ├── jquery-asSwitch.es.js ├── jquery-asSwitch.min.js └── css/    ├── asSwitch.css    └── asSwitch.min.css 

Several quick start options are available:

• Development - unminified
• Production - minified

bower install jquery-asSwitch --save

npm install jquery-asSwitch --save

yarn add jquery-asSwitch

If you want build from source:

git clone git@github.com:amazingSurge/jquery-asSwitch.git cd jquery-asSwitch npm install npm install -g gulp-cli babel-cli gulp build

Done!

jquery-asSwitch requires the latest version of jQuery.

<link rel="stylesheet" href="/path/to/asSwitch.css"> <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery-asSwitch.js"></script>

<input class="example" type="checkbox" checked="checked" />

All you need to do is call the plugin on the element:

jQuery(function($) { $('.example').asSwitch(); });

There are some example usages that you can look at to get started. They can be found in the examples folder.

jquery-asSwitch can accept an options object to alter the way it behaves. You can see the default options by call $.asSwitch.setDefaults(). The structure of an options object is as follows:

{ namespace: 'asSwitch', skin: null, handleSelector: null, handleTemplate: '<div class="{{handle}}"></div>', barClass: null, handleClass: null, disabledClass: 'is-disabled', draggingClass: 'is-dragging', hoveringClass: 'is-hovering', direction: 'vertical', barLength: null, handleLength: null, minHandleLength: 30, maxHandleLength: null, mouseDrag: true, touchDrag: true, pointerDrag: true, clickMove: true, clickMoveStep: 0.3, // 0 - 1 mousewheel: true, mousewheelSpeed: 50, keyboard: true, useCssTransforms3d: true, useCssTransforms: true, useCssTransitions: true, duration: '500', easing: 'ease' // linear, ease-in, ease-out, ease-in-out } 

Methods are called on asSwitch instances through the asSwitch method itself. You can also save the instances to variable for further use.

// call directly $().asSwitch('destroy'); // or var api = $().data('asSwitch'); api.destroy();

Set the switch value if value is defined or get the value.

// set the val $().asSwitch('val', true); // get the val var value = $().asSwitch('val');

Set the switch value

$().asSwitch('set', true);

Get the switch value.

var value = $().asSwitch('get');

Enable the scrollbar functions.

$().asSwitch('enable');

Disable the switch functions.

$().asSwitch('disable');

Destroy the switch instance.

$().asSwitch('destroy');

jquery-asSwitch provides custom events for the plugin’s unique actions.

$('.the-element').on('asSwitch::ready', function (e) { // on instance ready });

If you have to use other plugin with the same namespace, just call the $.asSwitch.noConflict method to revert to it.

<script src="other-plugin.js"></script> <script src="jquery-asSwitch.js"></script> <script> $.asSwitch.noConflict(); // Code that uses other plugin's "$().asSwitch" can follow here. </script>

Tested on all major browsers.

Latest ✓	Latest ✓	Latest ✓	Latest ✓	9-11 ✓	Latest ✓

As a jQuery plugin, you also need to see the jQuery Browser Support.

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of jquery-asSwitch before submitting an issue. There are several ways to help out:

• Bug reports
• Feature requests
• Pull requests
• Write test cases for open bug issues
• Contribute to the documentation

jquery-asSwitch is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

npm install -g gulp npm install -g babel-cli npm install

Then you can generate new distributable files from the sources, using:

gulp build 

More gulp tasks can be found here.

To see the list of recent changes, see Releases section.

Copyright (C) 2016 amazingSurge.

Licensed under the LGPL license.

⬆ back to top