73bcce88
 luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
# 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
<link href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
```
### Bower Install
```bash
bower install bootstrap-toggle
```
## Usage
### Basic example
Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
```html
<input type="checkbox" checked data-toggle="toggle">
```
### Stacked checkboxes
Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles.
```html
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle">
Option one is enabled
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled data-toggle="toggle">
Option two is disabled
</label>
</div>
```
### Inline Checkboxes
Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles.
```html
<label class="checkbox-inline">
<input type="checkbox" checked data-toggle="toggle"> First
</label>
<label class="checkbox-inline">
<input type="checkbox" data-toggle="toggle"> Second
</label>
<label class="checkbox-inline">
<input type="checkbox" data-toggle="toggle"> Third
</label>
```
## API
### Initialize by JavaScript
Initialize toggles with id `toggle-one` with a single line of JavaScript.
```html
<input id="toggle-one" checked type="checkbox">
<script>
$(function() {
$('#toggle-one').bootstrapToggle();
})
</script>
```
### 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
<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
<input type="checkbox" id="toggle-two">
<script>
$(function() {
$('#toggle-two').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
})
</script>
```
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
<input id="toggle-demo" type="checkbox" data-toggle="toggle">
```
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 `<input type="checkbox">` directly rather than look for custom events.
```html
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
```
### API vs Input
This also means that using the API or Input to trigger events will work both ways.
```html
<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button>
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button>
<script>
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()
}
</script>
```
## Demos
Visit http://www.bootstraptoggle.com for demos.
|
