diff --git a/README.md b/README.md index d1491f3..5908341 100755 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ UI : * font : font family. * fontWeight : font weight. * bgColor : background color. +* unit: unit option for value inside knob e.g. '%', 'px', 'pt' etc. Hooks ------- diff --git a/index.html b/index.html index 806d64e..31e3d8f 100755 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ jQuery Knob demo - + $(function($) { $(".knob").knob({ @@ -19,7 +19,7 @@ console.log("cancel : ", this); }, draw : function () { - + //append unit if it exists // "tron" case if(this.$.data('skin') == 'tron') { @@ -122,6 +122,14 @@

jQuery Knob

+
+

× display input with unit

+ 
+data-width="100"
+data-unit="%"
+
+ +

× 'cursor' mode

diff --git a/js/jquery.knob.js b/js/jquery.knob.js
index 96f90d4..b2df8d1 100755
--- a/js/jquery.knob.js
+++ b/js/jquery.knob.js
@@ -110,6 +110,7 @@
                     fontWeight: this.$.data('font-weight') || 'bold',
                     inline : false,
                     step : this.$.data('step') || 1,
+                    unit: this.$.data('unit'),
 
                     // Hooks
                     draw : null, // function () {}
@@ -294,6 +295,11 @@
             && (d = s.dH());
 
             (d !== false) && s.draw();
+                           
+            if(this.unit != undefined)
+            {
+              this.i.val(parseFloat(this.i.val())+this.unit);
+            }
 
         };
 
@@ -548,7 +554,7 @@
                     var ori = e.originalEvent
                         ,deltaX = ori.detail || ori.wheelDeltaX
                         ,deltaY = ori.detail || ori.wheelDeltaY
-                        ,v = s._validate(s.$.val())
+                        ,v = s._validate(parseFloat(s.$.val()))
                             + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
 
                     v = max(min(v, s.o.max), s.o.min);
@@ -651,6 +657,7 @@
             this.lineWidth = this.xy * this.o.thickness;
             this.lineCap = this.o.lineCap;
             this.radius = this.xy - this.lineWidth / 2;
+            this.unit = this.o.unit;
 
             this.o.angleOffset
             && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);