jqFilpSwitch

jQuery Plugin for Flip-Switch

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

jqFlipSwitch Options Overview
OptionTypeDescription
animatesObject or NullThis option is to set animation duration and easing.
cursorsObject or NullThis option is to change cursor type when flip-switch is clicked or flipped.
heightNumberThis option is height of flip-switch.
initStringThis option is initial flipper position.
textsObject or NullThis option is 2 texts that are displayed on flip-switch.
thresholdNumberThis option is threshold for flip.
typeStringThis option is event type.
valuesObjectThis option is 2 values that are returned by flip-switch.
widthNumberThis option is width of flip-switch.

animates

animates option
TypeDefaultProperties
Object or Null {duration : " fast ", easing : " swing "} durationNumber 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

cursors option
TypeDefaultProperties
Object {normal : " pointer ", flip : " ew-resize "} normalString (This is defined by CSS cursor property)
flipString (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

height option
TypeDefault
Number50 (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

init option
TypeDefault
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

texts option
TypeDefaultProperties
Object or Null {left : " ON ", right : " OFF "} leftString
rightString

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

threshold option
TypeDefault
Number50

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 option
TypeDefault
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

values option
TypeDefaultProperties
Object {left : false, right : true} leftAll types
rightAll 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

width option
TypeDefault
Number200 (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

jqFlipSwitch Methods Overview
MethodReturnsDescription
createjQuery or This method is to initialize plugin.
optionjQuery or All typesThis method is getter or setter for plugin settings.
destroyjQueryThis 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)

create(options)

$(function() {
    $("#flipswitch").flipswitch("destroy");
});

Events

jqFlipSwitch Events Overview
MethodTriggered
changeTriggered after value is changed.
flipstartTriggered before flip.
flipTriggered during flip.
flipendTriggered 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