diff options
| author | stephanchrst <stephanchrst@gmail.com> | 2022-05-10 17:14:58 +0700 |
|---|---|---|
| committer | stephanchrst <stephanchrst@gmail.com> | 2022-05-10 17:14:58 +0700 |
| commit | 1ca3b3df3421961caec3b747a364071c80f5c7da (patch) | |
| tree | 6778a1f0f3f9b4c6e26d6d87ccde16e24da6c9d6 /base_accounting_kit/static/lib/bootstrap-toggle-master/README.md | |
| parent | b57188be371d36d96caac4b8d65a40745c0e972c (diff) | |
initial commit
Diffstat (limited to 'base_accounting_kit/static/lib/bootstrap-toggle-master/README.md')
| -rw-r--r-- | base_accounting_kit/static/lib/bootstrap-toggle-master/README.md | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/base_accounting_kit/static/lib/bootstrap-toggle-master/README.md b/base_accounting_kit/static/lib/bootstrap-toggle-master/README.md new file mode 100644 index 0000000..301ff03 --- /dev/null +++ b/base_accounting_kit/static/lib/bootstrap-toggle-master/README.md @@ -0,0 +1,175 @@ +# 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.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> +<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/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> +``` + +### 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. |
