Permalink
Browse files

fix animation... maybe...

  • Loading branch information...
1 parent bfcf3e0 commit 0069f188787d10cc8b4f90ee3a45a74d5d2fa397 @nostalgiaz committed Sep 13, 2012
View
@@ -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">
@@ -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');
@@ -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));
+ }
+ }
}
Oops, something went wrong.

0 comments on commit 0069f18

Please sign in to comment.