A CSS only plug-in that animates an on/off control with multiple frames for a realistic look.
It displays three types of buttons:
- Toggle button
- Push button
- Sliding button
- Highly configurable;
- Works with any HTML element;
- Desktop and mobile devices;
- CSS only based design (no images) that supports responsive design;
- Optionally uses the keyboard (space, Enter or Esc);
- Small footprint.
Here is an example:
<input type="checkbox"> $("input[type='checkbox']").rsCheckboxSwitch();The following table shows each individual frame used during the transition from OFF to ON.
| Type | Frames |
|---|---|
| Toggle |  |
| Push |  |
| Sliding | Individual frames do not apply for sliding buttons |
As you can see, by default, toggle buttons have 5 frames and Push button have 4 frames.
Sure it is possible to change.
For reasons related with performance and responsive design, each frame is made out of pure CSS with relative em units. These are not images at all. These relative units should always be used, even if you wish to use a fixed size layout.
For your convenience, there is a LESS file at src/rsCheckboxSwitch.less where you can change the frames to your preference. If you are interested in changing only the color palette, you can change the @background variable in the LESS file.
However, nothing stops you from using images for each frame, although that might cause performance and responsive design issues later on.
Yes, you can use as many frames you wish. If you only use 1 or 2 frames, then there is no point using this plug-in, since that can be easly done with CSS alone.
You need to make sure the frames you specify in frameClasses property are defined in the LESS file.
Run
grunt lessIt creates a new dist/rsCheckboxSwitch.css file.
It depends...
Yes, if you want to simply smooth (interpolate) frames between a start and an end frame. In this case, you should not use this plug-in and must resort to CSS transitions.
No, if you want to design specific frames that are distinct from each other and thus not possible to replicate via CSS transitions.
The same question has been asked for the jquery.rsButton plug-in.
You can check the answer given there.
You can install from npm:
npm install jquery.rscheckboxswitch --saveor directly from git:
<script src="http://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/jquery.rsCheckboxSwitch.js"></script>or you can download the Zip archive from github, clone or fork this repository and include jquery.rsCheckboxSwitch.js from your local machine.
You also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.
#Usage
<!doctype html>
<html>
<head>
<title>jquery-rsCheckboxSwitch plug-in</title>
<link rel="stylesheet" href="http://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/demo/rsCheckboxSwitch24px.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/jquery.rsCheckboxSwitch.js"></script>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').rsCheckboxSwitch();
});
</script>
</head>
<body>
<input type="checkbox">
<body>
</html>This project is licensed under the terms of the MIT license
Please use the issue tracker to report any bugs or file feature requests.
Please refer to the Contribution page from more information.