{"id":24708756,"url":"https://github.com/ruisoftware/jquery-rscheckboxswitch","last_synced_at":"2026-04-15T14:02:22.342Z","repository":{"id":14829183,"uuid":"17551965","full_name":"ruisoftware/jquery-rsCheckboxSwitch","owner":"ruisoftware","description":"Animates UI toggle controls with multiple frames for realistic look","archived":false,"fork":false,"pushed_at":"2017-05-06T20:09:57.000Z","size":177,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T06:19:36.914Z","etag":null,"topics":["animates","checkbox","css","jquery","multiple-frames","plugin","push","slider","toggle","toggle-buttons","toggle-sliders","toggle-switches"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruisoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-08T21:58:29.000Z","updated_at":"2017-11-06T00:05:36.000Z","dependencies_parsed_at":"2022-09-26T20:20:37.244Z","dependency_job_id":null,"html_url":"https://github.com/ruisoftware/jquery-rsCheckboxSwitch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsCheckboxSwitch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsCheckboxSwitch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsCheckboxSwitch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsCheckboxSwitch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruisoftware","download_url":"https://codeload.github.com/ruisoftware/jquery-rsCheckboxSwitch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244917853,"owners_count":20531662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animates","checkbox","css","jquery","multiple-frames","plugin","push","slider","toggle","toggle-buttons","toggle-sliders","toggle-switches"],"created_at":"2025-01-27T06:47:25.101Z","updated_at":"2026-04-15T14:02:22.286Z","avatar_url":"https://github.com/ruisoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-rsCheckboxSwitch [![Build Status](https://travis-ci.org/ruisoftware/jquery-rsCheckboxSwitch.svg?branch=master)](https://travis-ci.org/ruisoftware/jquery-rsCheckboxSwitch)\nA CSS only plug-in that animates an on/off control with multiple frames for a realistic look.\n\nIt displays three types of buttons:\n- Toggle button  \n![image](https://cloud.githubusercontent.com/assets/428736/25072479/f539c94c-22d7-11e7-8fdf-1b60e2720cff.png)\n- Push button  \n![image](https://cloud.githubusercontent.com/assets/428736/25072483/08b13c3a-22d8-11e7-9991-38a53637196a.png)\n- Sliding button  \n![image](https://cloud.githubusercontent.com/assets/428736/25072476/d93c9468-22d7-11e7-9a72-1b2bc3d458e0.png)\n\n# Key Features\n - Highly configurable;\n - Works with any HTML element;\n - Desktop and mobile devices;\n - CSS only based design (no images) that supports responsive design;\n - Optionally uses the keyboard (space, Enter or Esc);\n - Small footprint.\n\nHere is an example:\n```html\n    \u003cinput type=\"checkbox\"\u003e\n```\n```javascript\n    $(\"input[type='checkbox']\").rsCheckboxSwitch();\n```\nThe following table shows each individual frame used during the transition from OFF to ON.  \n\n| Type | Frames |\n|---|---|\n|Toggle|![image](https://cloud.githubusercontent.com/assets/428736/25073090/59f46b9e-22e7-11e7-8c11-d4e1117accbc.png)|\n|Push|![image](https://cloud.githubusercontent.com/assets/428736/25073087/4f3dd10e-22e7-11e7-8787-08a1d5850630.png)|\n|Sliding|Individual frames do not apply for sliding buttons|\n\nAs you can see, by default, toggle buttons have 5 frames and Push button have 4 frames.\n\n[Live demo here](https://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/demo/demo.html).\n\n# Faq\n### Is it possible to change the colors and style?\nSure it is possible to change.\nFor 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.  \nFor 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.  \nHowever, nothing stops you from using images for each frame, although that might cause performance and responsive design issues later on.\n\n### Is it possible to change the number of frames?\nYes, 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.  \nYou need to make sure the frames you specify in `frameClasses` property are defined in the LESS file.\n\n### How can I compile LESS into CSS?\nRun\n```bash\ngrunt less\n```\nIt creates a new `dist/rsCheckboxSwitch.css` file.\n\n### Cannot this be done with CSS alone?\nIt depends...  \nYes, 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.  \nNo, if you want to design specific frames that are distinct from each other and thus not possible to replicate via CSS transitions.\n\n### Why cannot use CSS animations to specify distinct frames?\nThe same question has been asked for the jquery.rsButton plug-in.  \nYou can check the [answer given there](https://github.com/ruisoftware/jquery-rsButton#why-cannot-use-css-animations-to-specify-distinct-frames).\n\n# Installation\n\nYou can install from [npm](https://www.npmjs.com/):\n```bash\nnpm install jquery.rscheckboxswitch --save\n```\nor directly from git:\n```javascript\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/jquery.rsCheckboxSwitch.js\"\u003e\u003c/script\u003e\n```\nor you can download the Zip archive from github, clone or fork this repository and include `jquery.rsCheckboxSwitch.js` from your local machine.\n\nYou also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.\n\n#Usage\n```javascript\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003ejquery-rsCheckboxSwitch plug-in\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"http://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/demo/rsCheckboxSwitch24px.css\"\u003e\n    \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsCheckboxSwitch/master/src/jquery.rsCheckboxSwitch.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        $(document).ready(function () {\n            $('input[type=\"checkbox\"]').rsCheckboxSwitch();\n        });\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cinput type=\"checkbox\"\u003e\n\u003cbody\u003e\n\u003c/html\u003e\n````\n[Live demo here](https://codepen.io/ruisoftware/pen/mmqrKy).\n\n# License\nThis project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)\n\n# Bug Reports \u0026 Feature Requests\nPlease use the [issue tracker](https://github.com/ruisoftware/jquery-rsCheckboxSwitch/issues) to report any bugs or file feature requests.\n\n# Contributing\nPlease refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsCheckboxSwitch/blob/master/CONTRIBUTING.md) from more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rscheckboxswitch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruisoftware%2Fjquery-rscheckboxswitch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rscheckboxswitch/lists"}