BETA version
Download
Installation
$ npm install jq-flip-switch
or,
$ bower install jq-flip-switch
Usage
This plugin requires jQuery (greater than or equal to version 1.7).
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/jquery.jqflipswitch.js"></script>
The CSS file is optional.
<link rel="stylesheet" href="jqflipswitch.default.style.css" type="text/css" media="all" />
Of course, the style of flip-switch can be customized by creating the original CSS !!
In the case of using by default settings,
<div id="flipswitch"></div>
$(function() { $("#flipswitch").flipswitch(); });
This plugin can also apply to checkbox.
<input type="checkbox" id="flipswitch-checkbox" />
$(function() { $("#flipswitch-checkbox").flipswitch({ // This callback is in order to display checked attribute. change : function (event, ui) { console.log($(event.currentTarget).children('[type="checkbox"]')[0].checked); } }); });
Options
Option | Type | Description |
---|---|---|
animates | Object or Null | This option is to set animation duration and easing. |
cursors | Object or Null | This option is to change cursor type when flip-switch is clicked or flipped. |
height | Number | This option is height of flip-switch. |
init | String | This option is initial flipper position. |
texts | Object or Null | This option is 2 texts that are displayed on flip-switch. |
threshold | Number | This option is threshold for flip. |
type | String | This option is event type. |
values | Object | This option is 2 values that are returned by flip-switch. |
width | Number | This option is width of flip-switch. |
animates
Type | Default | Properties | |
---|---|---|---|
Object or Null | {duration : " fast ", easing : " swing "} | duration | Number or " fast " or " slow " |
easing | " swing ", " linear " ...etc |
In the case of default,
$(function() { // animates option by default $("#flipswitch").flipswitch({ animates : { duration : "fast", easing : "swing" } }); });
In the case of changing animation,
$(function() { // Change animates option $("#flipswitch").flipswitch({ animates : { duration : 1000, // msec easing : "linear" } }); });
In the case of no animation,
$(function() { // Change animates option $("#flipswitch").flipswitch({ animates : null }); });
Getter and Setter,
$(function() { // Getter var animates = $("#flipswitch").flipswitch("option", "animates"); // Setter $("#flipswitch").flipswitch("option", "animates", {duration : 1000, easing : "linear"}); });
cursors
Type | Default | Properties | |
---|---|---|---|
Object | {normal : " pointer ", flip : " ew-resize "} | normal | String (This is defined by CSS cursor property) |
flip | String (This is defined by CSS cursor property) |
In the case of default,
$(function() { // cursors option by default $("#flipswitch").flipswitch({ cursors : { normal : "pointer", flip : "ew-resize" } }); });
In the case of changing cursor,
$(function() { // Change cursors option $("#flipswitch").flipswitch({ cursors : { normal : "default", flip : "move" } }); });
Getter and Setter,
$(function() { // Getter var cursors = $("#flipswitch").flipswitch("option", "cursors"); // Setter $("#flipswitch").flipswitch("option", "cursors", {normal : "default", flip : "move"}); });
height
Type | Default |
---|---|
Number | 50 (px) |
In the case of default,
$(function() { // height option by default $("#flipswitch").flipswitch({ height : 50 // px }); });
In the case of changing height,
$(function() { // Change height option $("#flipswitch").flipswitch({ height : 200 // px }); });
Getter and Setter,
$(function() { // Getter var height = $("#flipswitch").flipswitch("option", "height"); // Setter $("#flipswitch").flipswitch("option", "height", 200); });
init
Type | Default |
---|---|
String (" left ", or " right ") | " left " |
In the case of default,
$(function() { // init option by default $("#flipswitch").flipswitch({ init : "left" }); });
In the case of changing init,
$(function() { // Change init option $("#flipswitch").flipswitch({ init : "right" }); });
Getter and Setter,
$(function() { // Getter var init = $("#flipswitch").flipswitch("option", "init"); // Setter $("#flipswitch").flipswitch("option", "init", "right"); });
texts
Type | Default | Properties | |
---|---|---|---|
Object or Null | {left : " ON ", right : " OFF "} | left | String |
right | String |
In the case of default,
$(function() { // texts option by default $("#flipswitch").flipswitch({ texts : { left : "ON", right : "OFF" } }); });
In the case of changing texts,
$(function() { // Change texts option $("#flipswitch").flipswitch({ texts : { left : "YES", right : "NO" } }); });
In the case of no texts,
$(function() { // Change animates option $("#flipswitch").flipswitch({ texts : null }); });
Getter and Setter,
$(function() { // Getter var texts = $("#flipswitch").flipswitch("option", "texts"); // Setter $("#flipswitch").flipswitch("option", "texts", {left : "YES", right : "NO"}); });
threshold
Type | Default |
---|---|
Number | 50 |
In the case of default,
$(function() { // threshold option by default $("#flipswitch").flipswitch({ type : "flip", threshold : 50 }); });
In the case of changing threshold,
$(function() { // Change threshold option $("#flipswitch").flipswitch({ type : "flip", threshold : 25 }); });
Getter and Setter,
$(function() { // Getter var threshold = $("#flipswitch").flipswitch("option", "threshold"); // Setter $("#flipswitch").flipswitch("option", "threshold", 25); });
type
Type | Default |
---|---|
String (" click ", or " flip ") | " click " |
In the case of default,
$(function() { // type option by default $("#flipswitch").flipswitch({ type : "click" }); });
In the case of "flip",
$(function() { // Change type option $("#flipswitch").flipswitch({ type : "flip" }); });
Getter and Setter,
$(function() { // Getter var type = $("#flipswitch").flipswitch("option", "type"); // Setter $("#flipswitch").flipswitch("option", "type", "flip"); });
values
Type | Default | Properties | |
---|---|---|---|
Object | {left : false, right : true} | left | All types |
right | All types |
In the case of default,
$(function() { // values option by default $("#flipswitch").flipswitch({ values : { left : false, right : true } }); });
In the case of changing values,
$(function() { // Change values option $("#flipswitch").flipswitch({ values : { left : "OFF", right : "ON" } }); });
Getter and Setter,
$(function() { // Getter var values = $("#flipswitch").flipswitch("option", "values"); // Setter $("#flipswitch").flipswitch("option", "values", {left : "OFF", right : "ON"}); });
width
Type | Default |
---|---|
Number | 200 (px) |
In the case of default,
$(function() { // width option by default $("#flipswitch").flipswitch({ width : 200 // px }); });
In the case of changing width,
$(function() { // Change width option $("#flipswitch").flipswitch({ width : 100 // px }); });
Getter and Setter,
$(function() { // Getter var width = $("#flipswitch").flipswitch("option", "width"); // Setter $("#flipswitch").flipswitch("option", "width", 100); });
Methods
Method | Returns | Description |
---|---|---|
create | jQuery or | This method is to initialize plugin. |
option | jQuery or All types | This method is getter or setter for plugin settings. |
destroy | jQuery | This method removes elements and classes that are created by plugin. |
create(options)
$(function() { var options = {}; $("#flipswitch").flipswitch("create", options); });
This method is equal to the following,
$(function() { var options = {}; $("#flipswitch").flipswitch(options); });
option(key, value)
Please refer to Options section.
create(options)
$(function() { $("#flipswitch").flipswitch("destroy"); });
Events
Method | Triggered |
---|---|
change | Triggered after value is changed. |
flipstart | Triggered before flip. |
flip | Triggered during flip. |
flipend | Triggered after flip. |
change(event, ui)
$(function() { $("#flipswitch").flipswitch({ change : function(event, ui) { console.dir(event); // This is event object that jQuery wraps. console.log(ui.value); // true or false (by default) console.log(ui.state); // "left" or "right" } }); });
flipstart(event, ui)
$(function() { $("#flipswitch").flipswitch({ type : "flip", flipstart : function(event, ui) { console.dir(event); // This is event object that jQuery wraps. console.log(ui.value); // true or false (by default) console.log(ui.state); // "left" or "right" } }); });
flip(event, ui)
$(function() { $("#flipswitch").flipswitch({ type : "flip", flip : function(event, ui) { console.dir(event); // This is event object that jQuery wraps. console.log(ui.value); // undefined console.log(ui.state); // undefined } }); });
flipend(event, ui)
$(function() { $("#flipswitch").flipswitch({ type : "flip", flipend : function(event, ui) { console.dir(event); // This is event object that jQuery wraps. console.log(ui.value); // true or false (by default) console.log(ui.state); // "left" or "right" } }); });
License
Copyright © 2014 Tomohiro IKEDA (Korilakkuma)
Released under the MIT license