Get new jQuery plugins just once a week

×

jqFlipSwitch

FavoriteLoadingAdd to favorites

April 27, 2015

jqFlipSwitch | A simple jQuery Plugin for Flip-Switch

jqFlipSwitch is a simple jQuery Plugin for Flip-Switch toggling with animation.
It has got the following options:-

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.

Example Code:


$(function() {
// Change animates option
$("#flipswitch").flipswitch({
animates : {
duration : 1000,  // msec
easing   : "linear"
}
});
});

Created by Tomohiro IKEDA

Download

Example

jqFlipSwitch jQuery plugin

flip switch

jqFlipSwitch

Build Status

jQuery Plugin for Flip-Switch

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,

HTML

<div id="flipswitch"></div>

JavaScript

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

This plugin can also apply to checkbox.

HTML

<input type="checkbox" id="flipswitch-checkbox" />

JavaScript

$(function() {
    $("#flipswitch-checkbox").flipswitch();
});

API

License

Copyright (c) 2014 Tomohiro IKEDA (Korilakkuma)
Released under the MIT license

jqFlipSwitch

Related posts:

text-complete
Quill
Autocomplete-Table
jqFlipSwitch jQuery plugin

http://jquer.in/wp-content/uploads/2015/04/jqFlipSwitch.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever