Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fix animation... maybe...

  • Loading branch information...
commit 0069f188787d10cc8b4f90ee3a45a74d5d2fa397 1 parent bfcf3e0
@nostalgiaz authored
View
2  examples/index.html
@@ -55,7 +55,7 @@
<div class="span4">
<div style="display: inline-block; width: 100px; overflow: hidden; height: 20px; position: relative;">
<div style="display: inline-block; width: 150px; position: absolute; top: 0; left: 0;">
- <span style="display: inline-block; width: 50px; background: #8a2be2; float: left;">ON</span>
+ <span style="">ON</span>
<label style="display: inline-block; width: 50px; height: 20px; margin:0; background: red; float: left;"></label>
<span style="display: inline-block; width: 50px; background: green; float: left;">OFF</span>
<input type="checkbox" value="value1" checked="checked" style="display: none">
View
82 static/js/jquery.toggle.buttons.js
@@ -5,7 +5,7 @@
$.fn.toggleButtons = function (method) {
var $element
- , $labelEnabled
+ , $div
, options
, active
, styleActive
@@ -16,21 +16,26 @@
, methods = {
init: function (opt) {
this.each(function () {
+ var $spanLeft
+ , $spanRight;
+
$element = $(this);
options = $.extend({}, $.fn.toggleButtons.defaults, opt);
- $element.attr("data-enabled", options.label.enabled === undefined ? "ON" : options.label.enabled);
- $element.attr("data-disabled", options.label.disabled === undefined ? "OFF " : options.label.disabled);
-
$element.addClass('toggle-button');
- $labelEnabled = $('<label></label>').attr('for', $element.find('input').attr('id'));
- $element.append($labelEnabled);
+ $spanLeft = $('<span></span>').text(options.label.enabled === undefined ? "ON" : options.label.enabled);
+ $spanRight = $('<span></span>').text(options.label.disabled === undefined ? "OFF " : options.label.disabled);
+ // html layout
+ $div = $element.find('input').wrap($('<div></div>')).parent();
+ $div.append($spanLeft);
+ $div.append($('<label></label>').attr('for', $element.find('input').attr('id')));
+ $div.append($spanRight);
if (options.animated) {
- $element.addClass('toggle-button-animated');
-
+// $element.addClass('toggle-button-animated');
+//
if (options.transitionSpeed !== undefined)
if (/^(\d*%$)/.test(options.transitionSpeed)) // is a percent value?
transitionSpeed = defaultSpeed * parseInt(options.transitionSpeed) / 100;
@@ -39,11 +44,15 @@
animationCss = ["-webkit-", "-moz-", "-o-", ""];
$(animationCss).each(function () {
- $element.find('label').css(this + 'transition', 'all ' + transitionSpeed + 's');
+ $element.find('>div').css(this + 'transition', 'all ' + transitionSpeed + 's');
});
}
- $element.css('width', options.width);
+ // size of the bootstrap-toggle-button
+ $element
+ .css('width', options.width * 2)
+ .find('>div').css('width', options.width * 3)
+ .find('>span, >label').css('width', options.width);
active = $element.find('input').is(':checked');
@@ -53,13 +62,8 @@
if ($element.find('input').is(':disabled'))
$element.addClass('deactivate');
- styleActive = options.style.enabled === undefined ? "" : options.style.enabled;
- styleDisabled = options.style.disabled === undefined ? "" : options.style.disabled;
-
- if (active && styleActive !== undefined)
- $element.addClass(styleActive);
- if (!active && styleDisabled !== undefined)
- $element.addClass(styleDisabled);
+ $spanLeft.addClass(options.style.enabled === undefined ? "" : options.style.enabled)
+ $spanRight.addClass(options.style.disabled === undefined ? "" : options.style.disabled)
$element.on('click', function (e) {
if ($(e.target).is('input'))
@@ -75,18 +79,20 @@
e.preventDefault();
console.log('click2')
- $element = $(this).parent();
+ $element = $(this).closest('.toggle-button');
if ($element.is('.deactivate'))
return true;
- $element
- .delay(transitionSpeed * 500).queue(function () {
- $(this).toggleClass('disabled')
- .toggleClass(styleActive)
- .toggleClass(styleDisabled)
- .dequeue();
- });
+
+ $element.find('>div').toggleClass('disabled')
+
+// $element
+// .queue(function () {
+// .toggleClass(styleActive)
+// .toggleClass(styleDisabled)
+// .dequeue();
+// });
active = !($element.find('input').is(':checked'));
@@ -104,8 +110,32 @@
$element.find('label').on('mousedown', function (e) {
e.stopPropagation();
e.preventDefault();
- console.log('mouse down');
$(this).unbind('click');
+//
+ $(this).on('mousemove', function (e) {
+ var relativeX = e.pageX - $(this).closest('.toggle-button').offset().left;
+// console.log(relativeX)
+ var percent = (relativeX / (options.width * 2)) * 100;
+// console.log(percent)
+ if (percent < 16)
+ percent = 16;
+ else if (percent > 67)
+ percent = 67;
+//
+// console.log(percent)
+ $element.find('>div').css('left', percent-(200/3) + "%")
+ });
+
+ $(this).on('mouseleave', function() {
+ var $div = $element.find('>div');
+ $(this).unbind('mousemove');
+
+ if (parseInt($div.css('left')) < -25)
+ $div.css('left', "-50%");
+ else $div.css('left', "0");
+
+ });
+//
$(this).bind('click', function () {
console.log('click');
$(this).unbind('click');
View
231 static/sass/bootstrap-toggle-buttons.scss
@@ -3,120 +3,145 @@
$border: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
$white: #FEFEFE;
$blue: #0088CC;
+$height: 25px;
.toggle-button {
- display: inline-block;
- cursor: pointer;
- background: #0088CC;
- @include background-image(linear-gradient(top, $blue, #0055CC));
- @include border-radius(4px);
- border: 1px solid;
- border-color: $border;
- position: relative;
- bottom: -2px;
- text-align: left;
- min-height: 25px;
- max-height: 25px;
+ display: inline-block;
+ cursor: pointer;
+ //background: #0088CC;
+ //@include background-image(linear-gradient(top, $blue, #0055CC));
+ @include border-radius(4px);
+ border: 1px solid;
+ border-color: $border;
+ position: relative;
+ //bottom: -2px;
+ text-align: left;
+ min-height: $height;
+ max-height: $height;
+ overflow: hidden;
- // disable text selection highlighting
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ // disable text selection highlighting
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
- &:before, &:after {
- line-height: 25px;
- font-weight: bold;
- letter-spacing: .4px;
- }
+ //&:before, &:after {
+ // line-height: 25px;
+ // font-weight: bold;
+ // letter-spacing: .4px;
+ //}
- &:before {
- color: $white;
- padding-left: 0%;
- margin-left: 10px;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
- content: attr(data-enabled);
- }
+ //&:before {
+ // color: $white;
+ // padding-left: 0%;
+ // margin-left: 10px;
+ // text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ // content: attr(data-enabled);
+ //}
- &.disabled {
- background: $white;
- @include background-image(linear-gradient(top, $white, #E6E6E6));
- border-color: $border;
- &:before {
- color: #555555;
- padding-left: 50%;
- margin-left: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
- content: attr(data-disabled);
+ // @include background-image(linear-gradient(top, $white, #E6E6E6));
+ // border-color: $border;
+ // &:before {
+ // color: #555555;
+ // padding-left: 50%;
+ // margin-left: 10px;
+ // text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+ // content: attr(data-disabled);
+ // }
+ // label {
+ // margin-left: -1px;
+ // left: 0%;
+ // }
+ //}
+
+ &.deactivate {
+ @include opacity(0.5);
+ cursor: default !important;
+ label {
+ cursor: default !important;
+ }
}
- label {
- margin-left: -1px;
- left: 0%;
+ > div {
+ display: inline-block;
+ width: 150px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ &.disabled {
+ left: -50%;
+ }
}
- }
+ input[type=checkbox] {
+ display: none;
- &.deactivate {
- @include opacity(0.5);
- cursor: default !important;
- label {
- cursor: default !important;
- }
- }
-
- label {
- cursor: pointer;
- position: absolute;
- width: 50%;
- height: 25px;
- background: $white;
- @include background-image(linear-gradient(top, $white, #E6E6E6));
- @include border-radius(4px);
- border: 1px solid;
- border-color: $border;
- top: -1px;
- margin-left: 0;
- left: 50%;
- }
+ //debug
+ //position:absolute;
+ //top: 0;
+ //right: -20px;
+ }
- input[type=checkbox] {
- display: none;
- //debug
- //position:absolute;
- //top: 0;
- //right: -20px;
- }
+ span, label {
+ display: inline-block;
+ background: #8a2be2;
+ float: left;
+ height: $height;
+ }
- &.primary, &.info, &.success, &.warning, &.danger {
- &:before {
- color: white;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ label {
+ cursor: pointer;
+ background: $white;
+ @include background-image(linear-gradient(top, $white, #E6E6E6));
+ //position: absolute;
+ //width: 50%;
+ //height: 25px;
+ //background: $white;
+ //@include background-image(linear-gradient(top, $white, #E6E6E6));
+ //@include border-radius(4px);
+ //border: 1px solid;
+ //border-color: $border;
+ //top: -1px;
+ //margin-left: 0;
+ //left: 50%;
}
- }
- &.primary {
- background: $blue;
- @include background-image(linear-gradient(top, $blue, #0055CC));
- }
- &.info {
- $startColor: #5BC0DE;
- background: $startColor;
- @include background-image(linear-gradient(top, $startColor, #2F96B4));
- }
- &.success {
- $startColor: #62C462;
- background: $startColor;
- @include background-image(linear-gradient(top, $startColor, #51A351));
- }
- &.warning {
- $startColor: #DBB450;
- background: $startColor;
- @include background-image(linear-gradient(top, $startColor, #F89406));
- }
- &.danger {
- $startColor: #EE5f5B;
- background: $startColor;
- @include background-image(linear-gradient(top, $startColor, #BD362F));
- }
+ //&.primary, &.info, &.success, &.warning, &.danger {
+ // &:before {
+ // color: white;
+ // text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ // }
+ //}
+ span {
+ color: $white;
+ text-align: center;
+ font-weight: bold;
+ line-height: $height;
+
+ &.primary {
+ background: $blue;
+ @include background-image(linear-gradient(top, $blue, #0055CC));
+ }
+ &.info {
+ $startColor: #5BC0DE;
+ background: $startColor;
+ @include background-image(linear-gradient(top, $startColor, #2F96B4));
+ }
+ &.success {
+ $startColor: #62C462;
+ background: $startColor;
+ @include background-image(linear-gradient(top, $startColor, #51A351));
+ }
+ &.warning {
+ $startColor: #DBB450;
+ background: $startColor;
+ @include background-image(linear-gradient(top, $startColor, #F89406));
+ }
+ &.danger {
+ $startColor: #EE5f5B;
+ background: $startColor;
+ @include background-image(linear-gradient(top, $startColor, #BD362F));
+ }
+ }
}
View
121 static/stylesheets/bootstrap-toggle-buttons.css
@@ -1,14 +1,7 @@
-/* line 7, ../sass/bootstrap-toggle-buttons.scss */
+/* line 8, ../sass/bootstrap-toggle-buttons.scss */
.toggle-button {
display: inline-block;
cursor: pointer;
- background: #0088CC;
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
- background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
- background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
- background-image: -o-linear-gradient(top, #0088cc, #0055cc);
- background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
- background-image: linear-gradient(top, #0088cc, #0055cc);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
@@ -17,10 +10,10 @@
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
position: relative;
- bottom: -2px;
text-align: left;
min-height: 25px;
max-height: 25px;
+ overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@@ -28,44 +21,6 @@
-ms-user-select: none;
user-select: none;
}
-/* line 29, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button:before, .toggle-button:after {
- line-height: 25px;
- font-weight: bold;
- letter-spacing: .4px;
-}
-/* line 35, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button:before {
- color: #fefefe;
- padding-left: 0%;
- margin-left: 10px;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
- content: attr(data-enabled);
-}
-/* line 43, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.disabled {
- background: #fefefe;
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6));
- background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6);
- background-image: -moz-linear-gradient(top, #fefefe, #e6e6e6);
- background-image: -o-linear-gradient(top, #fefefe, #e6e6e6);
- background-image: -ms-linear-gradient(top, #fefefe, #e6e6e6);
- background-image: linear-gradient(top, #fefefe, #e6e6e6);
- border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-}
-/* line 47, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.disabled:before {
- color: #555555;
- padding-left: 50%;
- margin-left: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
- content: attr(data-disabled);
-}
-/* line 54, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.disabled label {
- margin-left: -1px;
- left: 0%;
-}
/* line 60, ../sass/bootstrap-toggle-buttons.scss */
.toggle-button.deactivate {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
@@ -76,12 +31,32 @@
.toggle-button.deactivate label {
cursor: default !important;
}
-/* line 68, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button label {
- cursor: pointer;
+/* line 67, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button > div {
+ display: inline-block;
+ width: 150px;
position: absolute;
- width: 50%;
+ top: 0;
+ left: 0;
+}
+/* line 73, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button > div.disabled {
+ left: -50%;
+}
+/* line 77, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button input[type=checkbox] {
+ display: none;
+}
+/* line 86, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span, .toggle-button label {
+ display: inline-block;
+ background: #8a2be2;
+ float: left;
height: 25px;
+}
+/* line 93, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button label {
+ cursor: pointer;
background: #fefefe;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6));
background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6);
@@ -89,28 +64,16 @@
background-image: -o-linear-gradient(top, #fefefe, #e6e6e6);
background-image: -ms-linear-gradient(top, #fefefe, #e6e6e6);
background-image: linear-gradient(top, #fefefe, #e6e6e6);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- -ms-border-radius: 4px;
- -o-border-radius: 4px;
- border-radius: 4px;
- border: 1px solid;
- border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
- top: -1px;
- margin-left: 0;
- left: 50%;
}
-/* line 83, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button input[type=checkbox] {
- display: none;
-}
-/* line 92, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.primary:before, .toggle-button.info:before, .toggle-button.success:before, .toggle-button.warning:before, .toggle-button.danger:before {
- color: white;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+/* line 116, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span {
+ color: #fefefe;
+ text-align: center;
+ font-weight: bold;
+ line-height: 25px;
}
-/* line 98, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.primary {
+/* line 122, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span.primary {
background: #0088cc;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
@@ -119,8 +82,8 @@
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
}
-/* line 102, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.info {
+/* line 126, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span.info {
background: #5bc0de;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
@@ -129,8 +92,8 @@
background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
}
-/* line 107, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.success {
+/* line 131, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span.success {
background: #62c462;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
@@ -139,8 +102,8 @@
background-image: -ms-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #51a351);
}
-/* line 112, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.warning {
+/* line 136, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span.warning {
background: #dbb450;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbb450), color-stop(100%, #f89406));
background-image: -webkit-linear-gradient(top, #dbb450, #f89406);
@@ -149,8 +112,8 @@
background-image: -ms-linear-gradient(top, #dbb450, #f89406);
background-image: linear-gradient(top, #dbb450, #f89406);
}
-/* line 117, ../sass/bootstrap-toggle-buttons.scss */
-.toggle-button.danger {
+/* line 141, ../sass/bootstrap-toggle-buttons.scss */
+.toggle-button span.danger {
background: #ee5f5b;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
Please sign in to comment.
Something went wrong with that request. Please try again.