Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/minhur/bootstrap-toggle
Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles
https://github.com/minhur/bootstrap-toggle
Last synced: 28 days ago
JSON representation
Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles
- Host: GitHub
- URL: https://github.com/minhur/bootstrap-toggle
- Owner: minhur
- License: mit
- Created: 2013-06-13T03:15:04.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-09-11T15:30:45.000Z (about 1 year ago)
- Last Synced: 2024-04-26T04:02:23.000Z (7 months ago)
- Language: HTML
- Homepage: http://www.bootstraptoggle.com
- Size: 267 KB
- Stars: 1,480
- Watchers: 39
- Forks: 440
- Open Issues: 171
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap Toggle
Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
Visit http://www.bootstraptoggle.com for demos.
## Getting Started
### Installation
You can [download](https://github.com/minhur/bootstrap-toggle/archive/master.zip) the latest version of Bootstrap Toggle or use CDN to load the library.
`Warning` If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead.
```html
```
### Bower Install
```bash
bower install bootstrap-toggle
```
## Usage
### Basic example
Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
```html
```
### Stacked checkboxes
Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
```html
Option one is enabled
Option two is disabled
```
### Inline Checkboxes
Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles.
```html
First
Second
Third
```
## API
### Initialize by JavaScript
Initialize toggles with id `toggle-one` with a single line of JavaScript.
```html
$(function() {
$('#toggle-one').bootstrapToggle();
})
```
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`.
```html
$(function() {
$('#toggle-two').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
})
```
Name|Type|Default|Description|
---|---|---|---
on|string/html|"On"|Text of the on toggle
off|string/html|"Off"|Text of the off toggle
size|string|"normal"|Size of the toggle. Possible values are `large`, `normal`, `small`, `mini`.
onstyle|string|"primary"|Style of the on toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
offstyle|string|"default"|Style of the off toggle. Possible values are `default`, `primary`, `success`, `info`, `warning`, `danger`
style|string| |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
width|integer|*null*|Sets the width of the toggle. if set to *null*, width will be calculated.
height|integer|*null*|Sets the height of the toggle. if set to *null*, height will be calculated.
### Methods
Methods can be used to control toggles directly.
```html
```
Method|Example|Description
---|---|---
initialize|$('#toggle-demo').bootstrapToggle()|Initializes the toggle plugin with options
destroy|$('#toggle-demo').bootstrapToggle('destroy')|Destroys the toggle
on|$('#toggle-demo').bootstrapToggle('on')|Sets the toggle to 'On' state
off|$('#toggle-demo').bootstrapToggle('off')|Sets the toggle to 'Off' state
toggle|$('#toggle-demo').bootstrapToggle('toggle')|Toggles the state of the toggle
enable|$('#toggle-demo').bootstrapToggle('enable')|Enables the toggle
disable|$('#toggle-demo').bootstrapToggle('disable')|Disables the toggle
## Events
### Event Propagation
Note All events are propagated to and from input element to the toggle.
You should listen to events from the `` directly rather than look for custom events.
```html
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
```
### API vs Input
This also means that using the API or Input to trigger events will work both ways.
```html
On by API
Off by API
On by Input
Off by Input
function toggleOn() {
$('#toggle-trigger').bootstrapToggle('on')
}
function toggleOff() {
$('#toggle-trigger').bootstrapToggle('off')
}
function toggleOnByInput() {
$('#toggle-trigger').prop('checked', true).change()
}
function toggleOffByInput() {
$('#toggle-trigger').prop('checked', false).change()
}
```
### Integration
#### [KnockoutJS](http://knockoutjs.com)
A binding for knockout is available here: [aAXEe/knockout-bootstrap-toggle](https://github.com/aAXEe/knockout-bootstrap-toggle)
## Demos
Visit http://www.bootstraptoggle.com for demos.