Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 79 KiB |
After Width: | Height: | Size: 94 KiB |
After Width: | Height: | Size: 712 KiB |
Before Width: | Height: | Size: 257 KiB |
After Width: | Height: | Size: 86 KiB |
After Width: | Height: | Size: 74 KiB |
@ -0,0 +1,47 @@ |
|||
/* |
|||
* DOM element rendering detection |
|||
* https://davidwalsh.name/detect-node-insertion |
|||
*/ |
|||
@keyframes chartjs-render-animation { |
|||
from { opacity: 0.99; } |
|||
to { opacity: 1; } |
|||
} |
|||
|
|||
.chartjs-render-monitor { |
|||
animation: chartjs-render-animation 0.001s; |
|||
} |
|||
|
|||
/* |
|||
* DOM element resizing detection |
|||
* https://github.com/marcj/css-element-queries |
|||
*/ |
|||
.chartjs-size-monitor, |
|||
.chartjs-size-monitor-expand, |
|||
.chartjs-size-monitor-shrink { |
|||
position: absolute; |
|||
direction: ltr; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
overflow: hidden; |
|||
pointer-events: none; |
|||
visibility: hidden; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.chartjs-size-monitor-expand > div { |
|||
position: absolute; |
|||
width: 1000000px; |
|||
height: 1000000px; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.chartjs-size-monitor-shrink > div { |
|||
position: absolute; |
|||
width: 200%; |
|||
height: 200%; |
|||
left: 0; |
|||
top: 0; |
|||
} |
@ -0,0 +1 @@ |
|||
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0} |
@ -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']); |
|||
|
|||
}; |
@ -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. |
@ -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. |
@ -0,0 +1,2 @@ |
|||
.DS_Store |
|||
node_modules |
@ -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 <min.hur@gmail.com>" |
|||
], |
|||
"main": [ |
|||
"./js/bootstrap-toggle.min.js", |
|||
"./css/bootstrap-toggle.min.css" |
|||
], |
|||
"ignore": [ |
|||
"**/.*", |
|||
"node_modules", |
|||
"bower_components", |
|||
"test", |
|||
"tests" |
|||
] |
|||
} |
@ -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; } |
|||
|
@ -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} |
@ -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; } |
|||
|
@ -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} |
After Width: | Height: | Size: 87 KiB |
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,49 @@ |
|||
+function ($) { |
|||
'use strict'; |
|||
|
|||
$('.example:not(.skip)').each(function() { |
|||
// fetch & encode html
|
|||
var html = $('<div>').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( $('<code class="highlight html">').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() |
@ -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; |
|||
} |
@ -0,0 +1,449 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<script> if (window.location.href.indexOf('minhur.github.io') > 0) window.location.replace('http://www.bootstraptoggle.com') </script> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<meta name="msvalidate.01" content="3638AEFC99423BA5CB586805286C39AA" /> |
|||
<meta name="description" content="Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles." /> |
|||
<meta name="keywords" content="bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch" /> |
|||
<meta name="author" content="metatags generator"> |
|||
<meta name="robots" content="index, follow"> |
|||
<meta name="revisit-after" content="1 month"> |
|||
<title>Bootstrap Toggle</title> |
|||
<link rel="canonical" href="http://www.bootstraptoggle.com"> |
|||
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" > |
|||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> |
|||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
|||
<link href="css/bootstrap-toggle.css" rel="stylesheet"> |
|||
<link href="doc/stylesheet.css" rel="stylesheet"> |
|||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<header> |
|||
<nav class="navbar navbar-default container" role="navigation"> |
|||
<div class="container"> |
|||
<div class="navbar-header"> |
|||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> |
|||
<span class="sr-only">Toggle navigation</span> |
|||
<span class="icon-bar"></span> |
|||
<span class="icon-bar"></span> |
|||
<span class="icon-bar"></span> |
|||
</button> |
|||
<a class="navbar-brand" href="#">Bootstrap Toggle</a> |
|||
</div> |
|||
<div id="navbar" class="collapse navbar-collapse"> |
|||
<ul class="nav navbar-nav navbar-right"> |
|||
<li><a href="#usage">Usage</a></li> |
|||
<li><a href="#api">API</a></li> |
|||
<li><a href="#events">Events</a></li> |
|||
<li><a href="#demos">Demos</a></li> |
|||
<li><a href="https://github.com/minhur/bootstrap-toggle/issues">Issues</a></li> |
|||
<li><a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">Download</a></li> |
|||
<li> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> |
|||
</li> |
|||
<li> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
<div class="mast-head"> |
|||
<div class="container"> |
|||
<h1>Bootstrap Toggle</h1> |
|||
<p>Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles</p> |
|||
<div class="mast-links"> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
<main> |
|||
<div class="container"> |
|||
<h2>Getting Started</h2> |
|||
<hr> |
|||
<h3>Installation</h3> |
|||
<p>You can <a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">download</a> the latest version of Bootstrap Toggle or use CDN to load the library.</p> |
|||
<p><span class="label label-warning">Warning</span> If you are using Bootstrap v2.3.2, use <code>bootstrap2-toggle.min.js</code> and <code>bootstrap2-toggle.min.css</code> instead.</p> |
|||
<code class="highlight"><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></code> |
|||
|
|||
<h3>Bower Install</h3> |
|||
<p></p> |
|||
<code class="highlight bash">bower install bootstrap-toggle</code> |
|||
</div> |
|||
<div id="usage" class="container"> |
|||
<h2>Usage</h2> |
|||
<hr> |
|||
|
|||
<h3>Basic example</h3> |
|||
<p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle"> |
|||
</div> |
|||
|
|||
<h3>Stacked checkboxes</h3> |
|||
<p>Refer to Bootstrap <a href="http://getbootstrap.com/css/#forms-controls" target="_blank">Form Controls</a> documentation to create stacked checkboxes. Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p> |
|||
<div class="example"> |
|||
<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> |
|||
</div> |
|||
|
|||
<h3>Inline Checkboxes</h3> |
|||
<p>Refer to Bootstrap <a href="http://getbootstrap.com/css/#forms-controls" target="_blank">Form Controls</a> documentation to create inline checkboxes. Simply add <code>data-toggle="toggle"</code> to a convert checkboxes into toggles.</p> |
|||
<div class="example"> |
|||
<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> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="api" class="container"> |
|||
<h2>API</h2> |
|||
<hr> |
|||
|
|||
<h3>Initialize by JavaScript</h3> |
|||
<p>Initialize toggles with id <code>toggle-one</code> with a single line of JavaScript.</p> |
|||
<div class="example"> |
|||
<input id="toggle-one" checked type="checkbox"> |
|||
<script> |
|||
$(function() { |
|||
$('#toggle-one').bootstrapToggle(); |
|||
}) |
|||
</script> |
|||
</div> |
|||
|
|||
<h3>Options</h3> |
|||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-on="Enabled"</code>.</p> |
|||
<div class="example"> |
|||
<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> |
|||
</div> |
|||
<div class="table-responsive"> |
|||
<table class="table table-striped table-condensed"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Default</th> |
|||
<th>Description</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>on</td> |
|||
<td>string | html</td> |
|||
<td><code>"On"</code></td> |
|||
<td>Text of the <em>on</em> toggle</td> |
|||
</tr> |
|||
<tr> |
|||
<td>off</td> |
|||
<td>string | html</td> |
|||
<td><code>"Off"</code></td> |
|||
<td>Text of the <em>off</em> toggle</td> |
|||
</tr> |
|||
<tr> |
|||
<td>size</td> |
|||
<td>string</td> |
|||
<td><code>"normal"</code></td> |
|||
<td> |
|||
Size of the toggle. Possible values are:<code>large</code>,<code>normal</code>,<code>small</code>,<code>mini</code><br> |
|||
Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-sizes" target="_blank">Button Sizes</a> documentation for more information. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onstyle</td> |
|||
<td>string</td> |
|||
<td><code>"primary"</code></td> |
|||
<td> |
|||
Style of the <em>on</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br> |
|||
Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>offstyle</td> |
|||
<td>string</td> |
|||
<td><code>"default"</code></td> |
|||
<td> |
|||
Style of the <em>off</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br> |
|||
Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>style</td> |
|||
<td>string</td> |
|||
<td></td> |
|||
<td> |
|||
Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>width</td> |
|||
<td>integer</td> |
|||
<td><em>null</em></td> |
|||
<td> |
|||
Sets the width of the toggle. if set to <em>null</em>, width will be calculated. |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>height</td> |
|||
<td>integer</td> |
|||
<td><em>null</em></td> |
|||
<td> |
|||
Sets the height of the toggle. if set to <em>null</em>, height will be calculated. |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<h3>Methods</h3> |
|||
<p>Methods can be used to control toggles directly.</p> |
|||
<div class="example"> |
|||
<input id="toggle-demo" type="checkbox" data-toggle="toggle"> |
|||
</div> |
|||
<div class="table-responsive"> |
|||
<table class="table table-striped table-condensed"> |
|||
<thead> |
|||
<tr> |
|||
<th>Method</th> |
|||
<th>Example</th> |
|||
<th>Description</th> |
|||
<th>Demo</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td><em>initialize</em></td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle()</code></td> |
|||
<td>Initializes the toggle plugin with options</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.init('#toggle-demo')">Initialize</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>destroy</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('destroy')</code></td> |
|||
<td>Destroys the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.destroy('#toggle-demo')">Destroy</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>on</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('on')</code></td> |
|||
<td>Sets the toggle to 'On' state</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.on('#toggle-demo')">On</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>off</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('off')</code></td> |
|||
<td>Sets the toggle to 'Off' state</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.off('#toggle-demo')">Off</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>toggle</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('toggle')</code></td> |
|||
<td>Toggles the state of the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.toggle('#toggle-demo')">Toggle</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>enable</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('enable')</code></td> |
|||
<td>Enables the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.enable('#toggle-demo')">Enable</button></td> |
|||
</tr> |
|||
<tr> |
|||
<td>disable</td> |
|||
<td><code>$('#toggle-demo').bootstrapToggle('disable')</code></td> |
|||
<td>Disables the toggle</td> |
|||
<td><button class="btn btn-default btn-xs" onclick="demo.disable('#toggle-demo')">Disable</button></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="events" class="container"> |
|||
<h2>Events</h2> |
|||
<hr> |
|||
|
|||
<h3>Event Propagation</h3> |
|||
<p><span class="label label-primary">Note</span> All events are propagated to and from input element to the toggle. </p> |
|||
<p>You should listen to events from the <code><input type="checkbox"></code> directly rather than look for custom events.</p> |
|||
<div class="example"> |
|||
<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> |
|||
</div> |
|||
|
|||
<h3>API vs Input</h3> |
|||
<p>This also means that using the API or Input to trigger events will work both ways.</p> |
|||
<div class="example"> |
|||
<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> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="demos" class="container"> |
|||
<h2>Demos</h2> |
|||
<hr> |
|||
|
|||
<h3>Sizes</h3> |
|||
<p>Bootstrap toggle is available in different sizes. Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-sizes" target="_blank">Button Sizes</a> documentation for more information.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="large"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="normal"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="small"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-size="mini"> |
|||
</div> |
|||
|
|||
<h3>Custom Sizes</h3> |
|||
<p>Bootstrap toggle can handle custom sizes by <code>data-width</code> and <code>data-height</code> options.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-height="75"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-width="100"> |
|||
</div> |
|||
|
|||
<h3>Colors</h3> |
|||
<p>Bootstrap Toggle supports various colors. Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="info"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="default"> |
|||
</div> |
|||
|
|||
<h3>Colors Mix</h3> |
|||
<p>You can style on state as well as the off state.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"> |
|||
</div> |
|||
|
|||
<h3>Custom Style</h3> |
|||
<p>Customized styles can be applied as easily.</p> |
|||
<div class="example"> |
|||
<style> |
|||
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; } |
|||
.toggle.ios .toggle-handle { border-radius: 20px; } |
|||
</style> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="ios"> |
|||
<style> |
|||
.toggle.android { border-radius: 0px;} |
|||
.toggle.android .toggle-handle { border-radius: 0px; } |
|||
</style> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info"> |
|||
</div> |
|||
|
|||
<h3>Custom Text</h3> |
|||
<p>The text can be changed easily with attributes or options.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"> |
|||
</div> |
|||
|
|||
<h3>Icons/Html Text</h3> |
|||
<p>You can easily add icons or images since html is supported for on/off text.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-on="<i class='fa fa-play'></i> Play" data-off="<i class='fa fa-pause'></i> Pause"> |
|||
</div> |
|||
|
|||
<h3>Multiple Lines of Text</h3> |
|||
<p>Toggles with multiple lines will adjust its heights.</p> |
|||
<div class="example"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-on="Hello<br>World" data-off="Goodbye<br>World"> |
|||
</div> |
|||
|
|||
<h3>Animation Speed</h3> |
|||
<p>Transition speed can be easily controlled with css <code>transition</code> property on <code>.toggle-group</code>. You can also turn animation off completely.</p> |
|||
<div class="example"> |
|||
<style> |
|||
.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; } |
|||
.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; } |
|||
.quick .toggle-group { transition: none; -webkit-transition: none; } |
|||
</style> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="slow"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-class="fast"> |
|||
<input type="checkbox" checked data-toggle="toggle" data-style="quick"> |
|||
</div> |
|||
<div> |
|||
</main> |
|||
<footer> |
|||
<div class="container"> |
|||
<p> |
|||
<img class="nyt-logo" src="doc/nyt.png"> |
|||
<img class="nyt-logo" src="doc/nytdev.svg"> |
|||
</p> |
|||
<p>Designed and built by <a href="https://github.com/minhur" target="_blank">Min Hur</a> for <a href="http://developers.nytimes.com" target="_blank">The New York Times Company</a></p> |
|||
<p>Latest Version: 2.2.0 | Code licensed under MIT</p> |
|||
<p> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> |
|||
<iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe> |
|||
</p> |
|||
</div> |
|||
</footer> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script> |
|||
<script src="doc/script.js"></script> |
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
|||
<script src="js/bootstrap-toggle.js"></script> |
|||
<script> |
|||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
|||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
|||
ga('create', 'UA-55669452-1', 'auto'); |
|||
ga('send', 'pageview'); |
|||
</script> |
|||
</body> |
|||
</html> |
@ -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 = $('<label class="btn">').html(this.options.on) |
|||
.addClass(this._onstyle + ' ' + size) |
|||
var $toggleOff = $('<label class="btn">').html(this.options.off) |
|||
.addClass(this._offstyle + ' ' + size + ' active') |
|||
var $toggleHandle = $('<span class="toggle-handle btn btn-default">') |
|||
.addClass(size) |
|||
var $toggleGroup = $('<div class="toggle-group">') |
|||
.append($toggleOn, $toggleOff, $toggleHandle) |
|||
var $toggle = $('<div class="toggle btn" data-toggle="toggle">') |
|||
.addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) |
|||
.addClass(size).addClass(this.options.style) |
|||
|
|||
this.$element.wrap($toggle) |
|||
$.extend(this, { |
|||
$toggle: this.$element.parent(), |
|||
$toggleOn: $toggleOn, |
|||
$toggleOff: $toggleOff, |
|||
$toggleGroup: $toggleGroup |
|||
}) |
|||
this.$toggle.append($toggleGroup) |
|||
|
|||
var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2) |
|||
var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight()) |
|||
$toggleOn.addClass('toggle-on') |
|||
$toggleOff.addClass('toggle-off') |
|||
this.$toggle.css({ width: width, height: height }) |
|||
if (this.options.height) { |
|||
$toggleOn.css('line-height', $toggleOn.height() + 'px') |
|||
$toggleOff.css('line-height', $toggleOff.height() + 'px') |
|||
} |
|||
this.update(true) |
|||
this.trigger(true) |
|||
} |
|||
|
|||
Toggle.prototype.toggle = function () { |
|||
if (this.$element.prop('checked')) this.off() |
|||
else this.on() |
|||
} |
|||
|
|||
Toggle.prototype.on = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) |
|||
this.$element.prop('checked', true) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.off = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') |
|||
this.$element.prop('checked', false) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.enable = function () { |
|||
this.$toggle.removeAttr('disabled') |
|||
this.$element.prop('disabled', false) |
|||
} |
|||
|
|||
Toggle.prototype.disable = function () { |
|||
this.$toggle.attr('disabled', 'disabled') |
|||
this.$element.prop('disabled', true) |
|||
} |
|||
|
|||
Toggle.prototype.update = function (silent) { |
|||
if (this.$element.prop('disabled')) this.disable() |
|||
else this.enable() |
|||
if (this.$element.prop('checked')) this.on(silent) |
|||
else this.off(silent) |
|||
} |
|||
|
|||
Toggle.prototype.trigger = function (silent) { |
|||
this.$element.off('change.bs.toggle') |
|||
if (!silent) this.$element.change() |
|||
this.$element.on('change.bs.toggle', $.proxy(function() { |
|||
this.update() |
|||
}, this)) |
|||
} |
|||
|
|||
Toggle.prototype.destroy = function() { |
|||
this.$element.off('change.bs.toggle') |
|||
this.$toggleGroup.remove() |
|||
this.$element.removeData('bs.toggle') |
|||
this.$element.unwrap() |
|||
} |
|||
|
|||
// TOGGLE PLUGIN DEFINITION
|
|||
// ========================
|
|||
|
|||
function Plugin(option) { |
|||
return this.each(function () { |
|||
var $this = $(this) |
|||
var data = $this.data('bs.toggle') |
|||
var options = typeof option == 'object' && option |
|||
|
|||
if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) |
|||
if (typeof option == 'string' && data[option]) data[option]() |
|||
}) |
|||
} |
|||
|
|||
var old = $.fn.bootstrapToggle |
|||
|
|||
$.fn.bootstrapToggle = Plugin |
|||
$.fn.bootstrapToggle.Constructor = Toggle |
|||
|
|||
// TOGGLE NO CONFLICT
|
|||
// ==================
|
|||
|
|||
$.fn.toggle.noConflict = function () { |
|||
$.fn.bootstrapToggle = old |
|||
return this |
|||
} |
|||
|
|||
// TOGGLE DATA-API
|
|||
// ===============
|
|||
|
|||
$(function() { |
|||
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() |
|||
}) |
|||
|
|||
$(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { |
|||
var $checkbox = $(this).find('input[type=checkbox]') |
|||
$checkbox.bootstrapToggle('toggle') |
|||
e.preventDefault() |
|||
}) |
|||
|
|||
}(jQuery); |
@ -0,0 +1,9 @@ |
|||
/*! ======================================================================== |
|||
* 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(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery); |
|||
//# sourceMappingURL=bootstrap-toggle.min.js.map
|
@ -0,0 +1 @@ |
|||
{"version":3,"file":"bootstrap-toggle.min.js","sources":["bootstrap-toggle.js"],"names":["$","Plugin","option","this","each","$this","data","options","Toggle","element","$element","extend","defaults","render","VERSION","DEFAULTS","on","off","onstyle","offstyle","size","style","width","height","prototype","attr","_onstyle","_offstyle","$toggleOn","html","addClass","$toggleOff","$toggleHandle","$toggleGroup","append","$toggle","prop","wrap","parent","Math","max","outerWidth","outerHeight","css","update","trigger","toggle","silent","removeClass","enable","removeAttr","disable","change","proxy","destroy","remove","removeData","unwrap","old","fn","bootstrapToggle","Constructor","noConflict","document","e","$checkbox","find","preventDefault","jQuery"],"mappings":"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"} |
@ -0,0 +1,180 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap2-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-large' |
|||
: this.options.size === 'small' ? 'btn-small' |
|||
: this.options.size === 'mini' ? 'btn-mini' |
|||
: '' |
|||
var $toggleOn = $('<label class="btn">').html(this.options.on) |
|||
.addClass(this._onstyle + ' ' + size) |
|||
var $toggleOff = $('<label class="btn">').html(this.options.off) |
|||
.addClass(this._offstyle + ' ' + size + ' active') |
|||
var $toggleHandle = $('<span class="toggle-handle btn btn-default">') |
|||
.addClass(size) |
|||
var $toggleGroup = $('<div class="toggle-group">') |
|||
.append($toggleOn, $toggleOff, $toggleHandle) |
|||
var $toggle = $('<div class="toggle btn" data-toggle="toggle">') |
|||
.addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) |
|||
.addClass(size).addClass(this.options.style) |
|||
|
|||
this.$element.wrap($toggle) |
|||
$.extend(this, { |
|||
$toggle: this.$element.parent(), |
|||
$toggleOn: $toggleOn, |
|||
$toggleOff: $toggleOff, |
|||
$toggleGroup: $toggleGroup |
|||
}) |
|||
this.$toggle.append($toggleGroup) |
|||
|
|||
var width = this.options.width || Math.max($toggleOn.width(), $toggleOff.width())+($toggleHandle.outerWidth()/2) |
|||
var height = this.options.height || Math.max($toggleOn.height(), $toggleOff.height()) |
|||
$toggleOn.addClass('toggle-on') |
|||
$toggleOff.addClass('toggle-off') |
|||
this.$toggle.css({ width: width, height: height }) |
|||
if (this.options.height) { |
|||
$toggleOn.css('line-height', $toggleOn.height() + 'px') |
|||
$toggleOff.css('line-height', $toggleOff.height() + 'px') |
|||
} |
|||
this.update(true) |
|||
this.trigger(true) |
|||
} |
|||
|
|||
Toggle.prototype.toggle = function () { |
|||
if (this.$element.prop('checked')) this.off() |
|||
else this.on() |
|||
} |
|||
|
|||
Toggle.prototype.on = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) |
|||
this.$element.prop('checked', true) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.off = function (silent) { |
|||
if (this.$element.prop('disabled')) return false |
|||
this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') |
|||
this.$element.prop('checked', false) |
|||
if (!silent) this.trigger() |
|||
} |
|||
|
|||
Toggle.prototype.enable = function () { |
|||
this.$toggle.removeAttr('disabled') |
|||
this.$element.prop('disabled', false) |
|||
} |
|||
|
|||
Toggle.prototype.disable = function () { |
|||
this.$toggle.attr('disabled', 'disabled') |
|||
this.$element.prop('disabled', true) |
|||
} |
|||
|
|||
Toggle.prototype.update = function (silent) { |
|||
if (this.$element.prop('disabled')) this.disable() |
|||
else this.enable() |
|||
if (this.$element.prop('checked')) this.on(silent) |
|||
else this.off(silent) |
|||
} |
|||
|
|||
Toggle.prototype.trigger = function (silent) { |
|||
this.$element.off('change.bs.toggle') |
|||
if (!silent) this.$element.change() |
|||
this.$element.on('change.bs.toggle', $.proxy(function() { |
|||
this.update() |
|||
}, this)) |
|||
} |
|||
|
|||
Toggle.prototype.destroy = function() { |
|||
this.$element.off('change.bs.toggle') |
|||
this.$toggleGroup.remove() |
|||
this.$element.removeData('bs.toggle') |
|||
this.$element.unwrap() |
|||
} |
|||
|
|||
// TOGGLE PLUGIN DEFINITION
|
|||
// ========================
|
|||
|
|||
function Plugin(option) { |
|||
return this.each(function () { |
|||
var $this = $(this) |
|||
var data = $this.data('bs.toggle') |
|||
var options = typeof option == 'object' && option |
|||
|
|||
if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) |
|||
if (typeof option == 'string' && data[option]) data[option]() |
|||
}) |
|||
} |
|||
|
|||
var old = $.fn.bootstrapToggle |
|||
|
|||
$.fn.bootstrapToggle = Plugin |
|||
$.fn.bootstrapToggle.Constructor = Toggle |
|||
|
|||
// TOGGLE NO CONFLICT
|
|||
// ==================
|
|||
|
|||
$.fn.toggle.noConflict = function () { |
|||
$.fn.bootstrapToggle = old |
|||
return this |
|||
} |
|||
|
|||
// TOGGLE DATA-API
|
|||
// ===============
|
|||
|
|||
$(function() { |
|||
$('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() |
|||
}) |
|||
|
|||
$(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { |
|||
var $checkbox = $(this).find('input[type=checkbox]') |
|||
$checkbox.bootstrapToggle('toggle') |
|||
e.preventDefault() |
|||
}) |
|||
|
|||
}(jQuery); |
@ -0,0 +1,9 @@ |
|||
/*! ======================================================================== |
|||
* Bootstrap Toggle: bootstrap2-toggle.js v2.2.0 |
|||
* http://www.bootstraptoggle.com
|
|||
* ======================================================================== |
|||
* Copyright 2014 Min Hur, The New York Times Company |
|||
* Licensed under MIT |
|||
* ======================================================================== */ |
|||
+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-large":"small"===this.options.size?"btn-small":"mini"===this.options.size?"btn-mini":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.width(),d.width())+e.outerWidth()/2,i=this.options.height||Math.max(c.height(),d.height());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery); |
|||
//# sourceMappingURL=bootstrap2-toggle.min.js.map
|
@ -0,0 +1 @@ |
|||
{"version":3,"file":"bootstrap2-toggle.min.js","sources":["bootstrap2-toggle.js"],"names":["$","Plugin","option","this","each","$this","data","options","Toggle","element","$element","extend","defaults","render","VERSION","DEFAULTS","on","off","onstyle","offstyle","size","style","width","height","prototype","attr","_onstyle","_offstyle","$toggleOn","html","addClass","$toggleOff","$toggleHandle","$toggleGroup","append","$toggle","prop","wrap","parent","Math","max","outerWidth","css","update","trigger","toggle","silent","removeClass","enable","removeAttr","disable","change","proxy","destroy","remove","removeData","unwrap","old","fn","bootstrapToggle","Constructor","noConflict","document","e","$checkbox","find","preventDefault","jQuery"],"mappings":"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"} |
@ -0,0 +1,28 @@ |
|||
{ |
|||
"name": "bootstrap-toggle", |
|||
"description": "Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles", |
|||
"version": "2.2.2", |
|||
"main": "js/bootstrap-toggle.js", |
|||
"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", |
|||
"author": "Min Hur <min.hur@gmail.com>", |
|||
"bugs": { |
|||
"url": "https://github.com/minhur/bootstrap-toggle/issues" |
|||
}, |
|||
"devDependencies": { |
|||
"grunt-contrib-clean": "^0.6.0", |
|||
"grunt-contrib-cssmin": "^0.10.0", |
|||
"grunt-contrib-uglify": "^0.6.0" |
|||
} |
|||
} |
@ -0,0 +1,324 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<templates id="template" xml:space="preserve"> |
|||
<t t-name="Invoicedashboard"> |
|||
<div class="accounts-dashboard-wrap"> |
|||
<div class="o_dashboards col-xs-12 col-sm-12 col-lg-12 col-md-12" style="background-color: #e1e1e1;overflow: scroll; !important; "> |
|||
<div class="content-header"> |
|||
<div class="container-fluid"> |
|||
<div class="row mb-2"> |
|||
<div class="col-sm-12"> |
|||
<div class="dash-header"> |
|||
<h1 class="custom-h1 dashboard-h1">Dashboard </h1> |
|||
<input type="checkbox" style="display:none" data-toggle="toggle" data-on="" data-off=""> |
|||
<input type="checkbox" id="toggle-two"></input> |
|||
</input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" style="margin:0px"> |
|||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12"> |
|||
<div class=""> |
|||
<div class="row account-details" style="margin:0px"> |
|||
<div class="col-md-3"> |
|||
<!-- Net Profit or Loss --> |
|||
<div class="tile wide invoice box-1"> |
|||
<div class="headers"> |
|||
<div class="main-title">Net Profit or Loss</div> |
|||
<div id="monthly_invoice"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="net_profit_current_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="net_profit_current_months" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Total Income --> |
|||
<div class="col-md-3"> |
|||
<div class="tile wide invoice box-2"> |
|||
<div class="header"> |
|||
<div class="main-title">Total Income</div> |
|||
<div id="monthly_income"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="total_incomes_this_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="total_incomes_" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Total Expense --> |
|||
<div class="col-md-3"> |
|||
<div class="tile wide invoice box-3"> |
|||
<div class="header"> |
|||
<div class="main-title">Total Expenses</div> |
|||
<div id="monthly_expense"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="total_expense_this_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="total_expenses_" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Unreconciled items --> |
|||
<div class="col-md-3"> |
|||
<div class="tile wide invoice box-4"> |
|||
<div class="header"> |
|||
<div class="main-title">Unreconciled items</div> |
|||
<div id="monthly_unreconciled"> |
|||
<div class="left"> |
|||
<div class="count"> |
|||
<span id="unreconciled_counts_this_year" /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="count"> |
|||
<span id="unreconciled_items_" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="row" style="margin:0px">--> |
|||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12"> |
|||
<div class="row" style="margin:0px"> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">Income/Expense</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="income_this_year">This Year</option> |
|||
<option id="income_this_month">This Month</option> |
|||
<div role="separator" class="dropdown-divider" /> |
|||
<option id="income_last_month">Last Month</option> |
|||
<option id="income_last_year">Last Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="card-body mt-3" id="in_ex_body_hide"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<p id="myelement1"></p> |
|||
<div class="chart"> |
|||
<canvas id="canvas" width="300" height="200"></canvas> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">INVOICES</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="invoice_this_month">This Month</option> |
|||
<option id="invoice_this_year">This Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<!-- /.card-header --> |
|||
<div class="card-body" id=""> |
|||
<div class="row"> |
|||
<div class="col-md-12 mt-3"> |
|||
<h1 class="custom-h1" style="margin-bottom: 0;">Customer Invoice</h1> |
|||
<ul class="skill-list"> |
|||
<li class="skill" style="display: flex;justify-content: space-between;color: #000;"> |
|||
<p id="total_customer_invoice_paid" /> |
|||
<p id="total_customer_invoice" /> |
|||
<p id="total_customer_invoice_paid_current_year" /> |
|||
<p id="total_customer_invoice_current_year" /> |
|||
<p id="total_customer_invoice_paid_current_month" /> |
|||
<p id="total_customer_invoice_current_month" /> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_invoice" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_invoice_current_year" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_invoice_current_month" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
</ul> |
|||
<div role="separator" class="dropdown-divider" /> |
|||
<h1 class="custom-h1" style="margin-bottom: 0;">Supplier Invoice</h1> |
|||
<ul class="skill-list"> |
|||
<li class="skill" style="display: flex;justify-content: space-between;color: #000;"> |
|||
<p id="total_supplier_invoice_paid" /> |
|||
<p id="total_supplier_invoice" /> |
|||
<p id="total_supplier_invoice_paid_current_year" /> |
|||
<p id="total_supplier_invoice_current_year" /> |
|||
<p id="total_supplier_invoice_paid_current_month" /> |
|||
<p id="total_supplier_invoice_current_month" /> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_supplier_inv" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_supplier_inv_current_year" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
<li> |
|||
<progress id="tot_supplier_inv_current_month" class="skill-1" max="" value=""> |
|||
<strong>Skill Level: 50%</strong> |
|||
</progress> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-body p-0" style=" height: 287px; overflow-y: auto; "> |
|||
<div class="card-header" style=" padding: 17px 1.5rem !important; display: flex !IMPORTANT; justify-content: space-between; align-items: center; "> |
|||
<h3 class="custom-h3 card-title"> |
|||
<b>BANK AND CASH BALANCE</b> |
|||
</h3> |
|||
</div> |
|||
<div class="card-body p-0" style=" height: 100px; " id="bank_balance_body_hide"> |
|||
<ul id="current_bank_balance"></ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">Aged Receivable</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="aged_payable_this_month">This Month</option> |
|||
<option id="aged_payable_this_year">This Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<!-- /.card-header --> |
|||
<div class="card-body" id="ex_body"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div> |
|||
<canvas id="canvas1" height="250px" width="400px"></canvas> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4" id="col-graph"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<div class="card-title"> |
|||
<b> |
|||
<h3 class="custom-h3">Aged Payable</h3> |
|||
</b> |
|||
</div> |
|||
<div class="card-tools"> |
|||
<select> |
|||
<option id="aged_receivable_this_month">This Month</option> |
|||
<option id="aged_receivable_this_year">This Year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<!-- /.card-header --> |
|||
<div class="card-body" id="aged_payable_body_hide"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div id="chart"> |
|||
<canvas id="horizontalbarChart" width="400" height="250"></canvas> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4"> |
|||
<div class="card" style="height:366px;"> |
|||
<div class="card-header" style=" padding: 17px 1.5rem !important; display: flex !IMPORTANT; justify-content: space-between; align-items: center; "> |
|||
<h3 class="custom-h3 card-title"> |
|||
<b>TOP 10 CUSTOMERS</b> |
|||
</h3> |
|||
|
|||
<div class="card-tools"> |
|||
<select> |
|||
|
|||
<option id="top_10_customer_this_month">This Month</option> |
|||
<div role="separator" class="dropdown-divider" /> |
|||
<option id="top_10_customer_last_month">Last Month</option> |
|||
|
|||
</select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card-body p-0" style=" height: 287px; overflow-y: auto; " id="top_10_body"> |
|||
<ul class="users-list clearfix" id="top_10_customers"></ul> |
|||
<ul class="users-list clearfix" id="top_10_customers_this_month"></ul> |
|||
<ul class="users-list clearfix" id="top_10_customers_last_month"></ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </div>--> |
|||
<div class="container-fluid o_hr_dashboard"> |
|||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" id="invoice_grapg" /> |
|||
<div class="dashboard-header-filter"> |
|||
<div class="manager_filter_class" /> |
|||
</div> |
|||
</div> |
|||
<div id="chart-container"></div> |
|||
</div> |
|||
</t> |
|||
</templates> |
@ -0,0 +1,15 @@ |
|||
<odoo> |
|||
<template id="assets_invoice_dashboard" name="Invoice Dashboard" inherit_id="web.assets_backend"> |
|||
<xpath expr="." position="inside"> |
|||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"/> |
|||
<link rel="stylesheet" type="text/scss" href="/base_accounting_kit/static/src/scss/style.scss"/> |
|||
<link rel="stylesheet" type="text/scss" href="/base_accounting_kit/static/lib/bootstrap-toggle-master/css/bootstrap-toggle.min.css"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/src/js/account_dashboard.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.bundle.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.bundle.min.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.min.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/Chart.js"/> |
|||
<script type="text/javascript" src="/base_accounting_kit/static/lib/bootstrap-toggle-master/js/bootstrap-toggle.min.js"/> |
|||
</xpath> |
|||
</template> |
|||
</odoo> |
@ -0,0 +1,14 @@ |
|||
<odoo> |
|||
<data> |
|||
<record id="action_account_invoice_report_all" model="ir.actions.client"> |
|||
<field name="name">Account Report</field> |
|||
<field name="tag">invoice_dashboard</field> |
|||
</record> |
|||
|
|||
<menuitem name="Dashboard" id="menu_accounting_dashboard" parent="account.menu_finance" |
|||
sequence="0" |
|||
groups="account.group_account_manager" |
|||
action="action_account_invoice_report_all"/> |
|||
|
|||
</data> |
|||
</odoo> |