diff --git a/dist/bootstrap-toggle/Gruntfile.js b/dist/bootstrap-toggle/Gruntfile.js new file mode 100644 index 00000000..9ac6fc52 --- /dev/null +++ b/dist/bootstrap-toggle/Gruntfile.js @@ -0,0 +1,37 @@ +module.exports = function(grunt) { + 'use strict'; + + grunt.initConfig({ + clean: ['dist'], + uglify: { + options: { + preserveComments: 'some', + sourceMap: true + }, + build: { + expand: true, + cwd: 'js', + src: ['**/*.js', ['!**/*.min.js']], + dest: 'js', + ext: '.min.js', + } + }, + cssmin: { + options: { + keepBreaks: true + }, + build: { + expand: true, + cwd: 'css', + src: ['**/*.css', ['!**/*.min.css']], + dest: 'css', + ext: '.min.css', + } + } + }); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.registerTask('default', ['clean', 'uglify', 'cssmin']); + +}; \ No newline at end of file diff --git a/dist/bootstrap-toggle/LICENSE b/dist/bootstrap-toggle/LICENSE new file mode 100644 index 00000000..88bb5abf --- /dev/null +++ b/dist/bootstrap-toggle/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2011-2014 Min Hur, The New York Times Company + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/dist/bootstrap-toggle/README.md b/dist/bootstrap-toggle/README.md new file mode 100644 index 00000000..f9c0dcd4 --- /dev/null +++ b/dist/bootstrap-toggle/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 + + +``` + +### 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 +
+ +
+
+ +
+``` + +### Inline Checkboxes +Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles. + +```html + + + +``` + +## API + +### Initialize by JavaScript +Initialize toggles with id `toggle-one` with a single line of JavaScript. + +```html + + +``` + +### 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 + + + +``` + +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 + +
+ +``` + +### API vs Input +This also means that using the API or Input to trigger events will work both ways. + +```html + + + + + + +``` + +### 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. diff --git a/dist/bootstrap-toggle/bower.json b/dist/bootstrap-toggle/bower.json new file mode 100644 index 00000000..9d941dff --- /dev/null +++ b/dist/bootstrap-toggle/bower.json @@ -0,0 +1,32 @@ +{ + "name": "bootstrap-toggle", + "description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles", + "version": "2.2.1", + "keywords": [ + "bootstrap", + "toggle", + "bootstrap-toggle", + "switch", + "bootstrap-switch" + ], + "homepage": "http://www.bootstraptoggle.com", + "repository": { + "type": "git", + "url": "https://github.com/minhur/bootstrap-toggle.git" + }, + "license": "MIT", + "authors": [ + "Min Hur " + ], + "main": [ + "./js/bootstrap-toggle.min.js", + "./css/bootstrap-toggle.min.css" + ], + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/dist/bootstrap-toggle/css/bootstrap-toggle.css b/dist/bootstrap-toggle/css/bootstrap-toggle.css new file mode 100644 index 00000000..057d08b3 --- /dev/null +++ b/dist/bootstrap-toggle/css/bootstrap-toggle.css @@ -0,0 +1,83 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + +.checkbox label .toggle, +.checkbox-inline .toggle { + margin-left: -20px; + margin-right: 5px; +} + +.toggle { + position: relative; + overflow: hidden; +} +.toggle input[type="checkbox"] { + display: none; +} +.toggle-group { + position: absolute; + width: 200%; + top: 0; + bottom: 0; + left: 0; + transition: left 0.35s; + -webkit-transition: left 0.35s; + -moz-user-select: none; + -webkit-user-select: none; +} +.toggle.off .toggle-group { + left: -100%; +} +.toggle-on { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 50%; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 0; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0px; + padding-bottom: 0px; + height: 100%; + width: 0px; + border-width: 0 1px; +} + +.toggle.btn { min-width: 59px; min-height: 34px; } +.toggle-on.btn { padding-right: 24px; } +.toggle-off.btn { padding-left: 24px; } + +.toggle.btn-lg { min-width: 79px; min-height: 45px; } +.toggle-on.btn-lg { padding-right: 31px; } +.toggle-off.btn-lg { padding-left: 31px; } +.toggle-handle.btn-lg { width: 40px; } + +.toggle.btn-sm { min-width: 50px; min-height: 30px;} +.toggle-on.btn-sm { padding-right: 20px; } +.toggle-off.btn-sm { padding-left: 20px; } + +.toggle.btn-xs { min-width: 35px; min-height: 22px;} +.toggle-on.btn-xs { padding-right: 12px; } +.toggle-off.btn-xs { padding-left: 12px; } + diff --git a/dist/bootstrap-toggle/css/bootstrap-toggle.min.css b/dist/bootstrap-toggle/css/bootstrap-toggle.min.css new file mode 100644 index 00000000..0d42ed09 --- /dev/null +++ b/dist/bootstrap-toggle/css/bootstrap-toggle.min.css @@ -0,0 +1,28 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ +.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px} +.toggle{position:relative;overflow:hidden} +.toggle input[type=checkbox]{display:none} +.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} +.toggle.off .toggle-group{left:-100%} +.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} +.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} +.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} +.toggle.btn{min-width:59px;min-height:34px} +.toggle-on.btn{padding-right:24px} +.toggle-off.btn{padding-left:24px} +.toggle.btn-lg{min-width:79px;min-height:45px} +.toggle-on.btn-lg{padding-right:31px} +.toggle-off.btn-lg{padding-left:31px} +.toggle-handle.btn-lg{width:40px} +.toggle.btn-sm{min-width:50px;min-height:30px} +.toggle-on.btn-sm{padding-right:20px} +.toggle-off.btn-sm{padding-left:20px} +.toggle.btn-xs{min-width:35px;min-height:22px} +.toggle-on.btn-xs{padding-right:12px} +.toggle-off.btn-xs{padding-left:12px} \ No newline at end of file diff --git a/dist/bootstrap-toggle/css/bootstrap2-toggle.css b/dist/bootstrap-toggle/css/bootstrap2-toggle.css new file mode 100644 index 00000000..3f48927e --- /dev/null +++ b/dist/bootstrap-toggle/css/bootstrap2-toggle.css @@ -0,0 +1,85 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + +label.checkbox .toggle, +label.checkbox.inline .toggle { + margin-left: -20px; + margin-right: 5px; +} +.toggle { + min-width: 40px; + height: 20px; + position: relative; + overflow: hidden; +} +.toggle input[type="checkbox"] { + display: none; +} +.toggle-group { + position: absolute; + width: 200%; + top: 0; + bottom: 0; + left: 0; + transition: left 0.35s; + -webkit-transition: left 0.35s; + -moz-user-select: none; + -webkit-user-select: none; +} +.toggle.off .toggle-group { + left: -100%; +} +.toggle-on { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 50%; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 0; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0px; + padding-bottom: 0px; + height: 100%; + width: 0px; + border-width: 0 1px; +} +.toggle-handle.btn-mini { + top: -1px; +} +.toggle.btn { min-width: 30px; } +.toggle-on.btn { padding-right: 24px; } +.toggle-off.btn { padding-left: 24px; } + +.toggle.btn-large { min-width: 40px; } +.toggle-on.btn-large { padding-right: 35px; } +.toggle-off.btn-large { padding-left: 35px; } + +.toggle.btn-small { min-width: 25px; } +.toggle-on.btn-small { padding-right: 20px; } +.toggle-off.btn-small { padding-left: 20px; } + +.toggle.btn-mini { min-width: 20px; } +.toggle-on.btn-mini { padding-right: 12px; } +.toggle-off.btn-mini { padding-left: 12px; } + diff --git a/dist/bootstrap-toggle/css/bootstrap2-toggle.min.css b/dist/bootstrap-toggle/css/bootstrap2-toggle.min.css new file mode 100644 index 00000000..1509c573 --- /dev/null +++ b/dist/bootstrap-toggle/css/bootstrap2-toggle.min.css @@ -0,0 +1,28 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ +label.checkbox .toggle,label.checkbox.inline .toggle{margin-left:-20px;margin-right:5px} +.toggle{min-width:40px;height:20px;position:relative;overflow:hidden} +.toggle input[type=checkbox]{display:none} +.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none} +.toggle.off .toggle-group{left:-100%} +.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0} +.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0} +.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px} +.toggle-handle.btn-mini{top:-1px} +.toggle.btn{min-width:30px} +.toggle-on.btn{padding-right:24px} +.toggle-off.btn{padding-left:24px} +.toggle.btn-large{min-width:40px} +.toggle-on.btn-large{padding-right:35px} +.toggle-off.btn-large{padding-left:35px} +.toggle.btn-small{min-width:25px} +.toggle-on.btn-small{padding-right:20px} +.toggle-off.btn-small{padding-left:20px} +.toggle.btn-mini{min-width:20px} +.toggle-on.btn-mini{padding-right:12px} +.toggle-off.btn-mini{padding-left:12px} \ No newline at end of file diff --git a/dist/bootstrap-toggle/doc/header.png b/dist/bootstrap-toggle/doc/header.png new file mode 100644 index 00000000..eb8d58be Binary files /dev/null and b/dist/bootstrap-toggle/doc/header.png differ diff --git a/dist/bootstrap-toggle/doc/nyt.png b/dist/bootstrap-toggle/doc/nyt.png new file mode 100644 index 00000000..4025f263 Binary files /dev/null and b/dist/bootstrap-toggle/doc/nyt.png differ diff --git a/dist/bootstrap-toggle/doc/nytdev.svg b/dist/bootstrap-toggle/doc/nytdev.svg new file mode 100644 index 00000000..39669eeb --- /dev/null +++ b/dist/bootstrap-toggle/doc/nytdev.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/bootstrap-toggle/doc/script.js b/dist/bootstrap-toggle/doc/script.js new file mode 100644 index 00000000..863728ae --- /dev/null +++ b/dist/bootstrap-toggle/doc/script.js @@ -0,0 +1,49 @@ ++function ($) { + 'use strict'; + + $('.example:not(.skip)').each(function() { + // fetch & encode html + var html = $('
').text($(this).html()).html() + // find number of space/tabs on first line (minus line break) + var count = html.match(/^(\s+)/)[0].length - 1 + // replace tabs/spaces on each lines with + var regex = new RegExp('\\n\\s{'+count+'}', 'g') + var code = html.replace(regex, '\n').replace(/\t/g, ' ').trim() + // other cleanup + code = code.replace(/=""/g,'') + // add code block to dom + $(this).after( $('').html(code) ) + }); + + $('code.highlight').each(function() { + hljs.highlightBlock(this) + }); + +}(jQuery); + +var Demo = function () {} + +Demo.prototype.init = function(selector) { + $(selector).bootstrapToggle(selector) +} +Demo.prototype.destroy = function(selector) { + $(selector).bootstrapToggle('destroy') +} +Demo.prototype.on = function(selector) { + $(selector).bootstrapToggle('on') +} +Demo.prototype.off = function(selector) { + $(selector).bootstrapToggle('off') +} +Demo.prototype.toggle = function(selector) { + $(selector).bootstrapToggle('toggle') +} +Demo.prototype.enable = function(selector) { + $(selector).bootstrapToggle('enable') +} +Demo.prototype.disable = function(selector) { + $(selector).bootstrapToggle('disable') +} + + +demo = new Demo() diff --git a/dist/bootstrap-toggle/doc/stylesheet.css b/dist/bootstrap-toggle/doc/stylesheet.css new file mode 100644 index 00000000..fe7a444c --- /dev/null +++ b/dist/bootstrap-toggle/doc/stylesheet.css @@ -0,0 +1,112 @@ +header, footer { + padding: 20px; + background-image: url('header.png'); + background-size: 256px 256px; +} +footer { + color: #fff; + text-align: center; +} +.nyt-logo { + max-height: 40px; + margin-top: 5px; + margin-right: 5px; +} + +nav.navbar { + margin-bottom: 10px; + background-color: #fff; + border: 0px; + border-radius: 2px; +} +#navbar { + margin: 0px; +} +#navbar .navbar-nav li iframe { + margin-top: 15px; +} +#navbar .navbar-nav li:last-child iframe { + margin-right: 15px; +} + +@media screen and (max-width: 767px) { + #navbar .navbar-nav li iframe { + display: none; + } +} + +.mast-head { + margin: 10px 0; +} +.mast-head h1 { + margin-bottom: 15px; + color: #fff; +} +.mast-head p { + color: #fff; +} + +.mast-links { + padding-top: 10px; +} + +.mast-links > * { + vertical-align: middle; + margin-bottom: 10px; +} + +.mast-links > .btn { + margin-right: 30px; +} +main { + margin: 10px 20px; +} +main .container { + margin-bottom: 40px; +} + +code.hljs { + border: 1px solid #ccc; + padding: 1em; + white-space: pre; + margin-bottom: 10px; +} + +.example { + position: relative; + border: 1px solid #ccc; + padding: 1em 1em 0.5em 1em; + border-radius: 4px 4px 0 0; +} + +.example:after { + content: "Example"; + position: absolute; + top: 0px; + right: 0px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ccc; + color: #9da0a4; + border-radius: 0px 4px 0px 4px; + border-width: 0px 0px 1px 1px; +} + +.example + code.hljs { + border-top: 0; + border-radius: 0px 0px 4px 4px; +} + +.example > * { + margin-bottom: 10px; +} + +.example > div.toggle { + margin-right: 10px; +} + +.table-striped code { + background-color: inherit; +} \ No newline at end of file diff --git a/dist/bootstrap-toggle/index.html b/dist/bootstrap-toggle/index.html new file mode 100644 index 00000000..3874fa25 --- /dev/null +++ b/dist/bootstrap-toggle/index.html @@ -0,0 +1,449 @@ + + + + + + + + + + + + + Bootstrap Toggle + + + + + + + + + +
+ +
+
+

Bootstrap Toggle

+

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles

+
+ + +
+
+
+
+ +
+
+

Getting Started

+
+

Installation

+

You can download 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.

+ <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> +<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script> + +

Bower Install

+

+ bower install bootstrap-toggle +
+
+

Usage

+
+ +

Basic example

+

Simply add data-toggle="toggle" to convert checkboxes into toggles.

+
+ +
+ +

Stacked checkboxes

+

Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add data-toggle="toggle" to convert checkboxes into toggles.

+
+
+ +
+
+ +
+
+ +

Inline Checkboxes

+

Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add data-toggle="toggle" to a convert checkboxes into toggles.

+
+ + + +
+
+ +
+

API

+
+ +

Initialize by JavaScript

+

Initialize toggles with id toggle-one with a single line of JavaScript.

+
+ + +
+ +

Options

+

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".

+
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
onstring | html"On"Text of the on toggle
offstring | html"Off"Text of the off toggle
sizestring"normal" + Size of the toggle. Possible values are:large,normal,small,mini
+ Refer to Bootstrap Button Sizes documentation for more information. +
onstylestring"primary" + Style of the on toggle.
Possible values are:default,primary,success,info,warning,danger
+ Refer to Bootstrap Button Options documentation for more information. +
offstylestring"default" + Style of the off toggle.
Possible values are:default,primary,success,info,warning,danger
+ Refer to Bootstrap Button Options documentation for more information. +
stylestring + Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. +
widthintegernull + Sets the width of the toggle. if set to null, width will be calculated. +
heightintegernull + Sets the height of the toggle. if set to null, height will be calculated. +
+
+ +

Methods

+

Methods can be used to control toggles directly.

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodExampleDescriptionDemo
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.

+
+ +
+ +
+ +

API vs Input

+

This also means that using the API or Input to trigger events will work both ways.

+
+ + + + + + +
+
+ +
+

Demos

+
+ +

Sizes

+

Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.

+
+ + + + +
+ +

Custom Sizes

+

Bootstrap toggle can handle custom sizes by data-width and data-height options.

+
+ + + +
+ +

Colors

+

Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.

+
+ + + + + + +
+ +

Colors Mix

+

You can style on state as well as the off state.

+
+ + +
+ +

Custom Style

+

Customized styles can be applied as easily.

+
+ + + + +
+ +

Custom Text

+

The text can be changed easily with attributes or options.

+
+ +
+ +

Icons/Html Text

+

You can easily add icons or images since html is supported for on/off text.

+
+ +
+ +

Multiple Lines of Text

+

Toggles with multiple lines will adjust its heights.

+
+ +
+ +

Animation Speed

+

Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.

+
+ + + + +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/dist/bootstrap-toggle/js/bootstrap-toggle.js b/dist/bootstrap-toggle/js/bootstrap-toggle.js new file mode 100644 index 00000000..533914ed --- /dev/null +++ b/dist/bootstrap-toggle/js/bootstrap-toggle.js @@ -0,0 +1,180 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + + +function ($) { + 'use strict'; + + // TOGGLE PUBLIC CLASS DEFINITION + // ============================== + + var Toggle = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, this.defaults(), options) + this.render() + } + + Toggle.VERSION = '2.2.0' + + Toggle.DEFAULTS = { + on: 'On', + off: 'Off', + onstyle: 'primary', + offstyle: 'default', + size: 'normal', + style: '', + width: null, + height: null + } + + Toggle.prototype.defaults = function() { + return { + on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, + off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, + onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, + offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, + size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, + style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, + width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, + height: this.$element.attr('data-height') || Toggle.DEFAULTS.height + } + } + + Toggle.prototype.render = function () { + this._onstyle = 'btn-' + this.options.onstyle + this._offstyle = 'btn-' + this.options.offstyle + var size = this.options.size === 'large' ? 'btn-lg' + : this.options.size === 'small' ? 'btn-sm' + : this.options.size === 'mini' ? 'btn-xs' + : '' + var $toggleOn = $('