Permalink
Browse files

tron like skin :)

  • Loading branch information...
1 parent 7a4f59c commit fb42a26f600ec7c7edfea29781f15e774f68846c @aterrien committed Feb 26, 2012
Showing with 96 additions and 25 deletions.
  1. +58 −12 index.html
  2. +38 −13 js/jquery.knob-1.0.1.js
View
@@ -6,67 +6,113 @@
<script src="js/jquery.knob-1.0.1.js"></script>
<script>
$(function() {
- $(".knob").knob(
+ $(".knob").knob();
+ /*$(".knob").knob(
{
- 'change':function(e){console.log(e);}
+ 'change':function(e){
+ console.log(e);
+ }
}
- );
+ )
+ .val(79)
+ ;*/
});
</script>
</head>
<body>
<div style="float:left;width:100%;font-family:Georgia;font-size:70px;font-weight:bold;color:#87CEEB;letter-spacing:-5px">
Knob demo
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;background-color:#222;color:#FFF;padding:20px">
+ <pre>
+data-width="75"
+data-fgColor="#fff"
+data-skin="tron"
+ </pre>
+ <input class="knob" data-width="75" data-fgColor="#ffec03" data-skin="tron" data-cursor=true value="75">
+ </div>
+ <div style="float:left;width:320px;height:300px;background-color:#222;color:#FFF;padding:20px">
+ <pre>
+data-width="150"
+data-fgColor="#fff"
+data-skin="tron"
+data-thickness=".2"
+ </pre>
+ <input class="knob" data-width="150" data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">
+ </div>
+ <div style="float:left;width:320px;height:300px;background-color:#222;color:#FFF;padding:20px">
+ <pre>
+data-width="150"
+data-fgColor="#fff"
+data-skin="tron"
+data-thickness=".1"
+ </pre>
+ <input class="knob" data-width="150" data-fgColor="#C0ffff" data-skin="tron" data-thickness=".1" value="35">
+ </div>
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="100"
data-displayInput=false
</pre>
<input class="knob" data-width="100" data-displayInput=false value="35">
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-cursor=true
+data-skin="tron"
</pre>
- <input class="knob" data-cursor=true value="35">
+ <input class="knob" data-cursor=true data-skin="tron" value="35">
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="250"
data-min="-100"
</pre>
<input class="knob"data-width="250" data-min="-100" value="44">
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-thickness=".4"
data-fgColor="chartreuse"
data-readOnly=true
</pre>
<input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-readOnly=true value="22">
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="300"
data-cursor=true
</pre>
<input class="knob" data-width="300" data-cursor=true value="29">
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="200"
</pre>
<input type="button" onclick="$('.knob-dyn').knob();" value="knobify!">
<input type="text" class="knob-dyn" data-width="200" value="56">
</div>
- <div style="float:left;width:320px">
+ <div style="float:left;width:320px;height:300px;padding:20px">
<pre>
data-width="50"
</pre>
<input type="button" onclick="$('.knob-dyn2').knob();" value="knobify!">
<input type="text" class="knob-dyn2" data-width="50" value="56">
</div>
- <div style="border: 0 none; position: absolute; right: 0; top: 0;"><a href="https://github.com/aterrien" target="_blank"><img src="../i/github-ribbon.png" style="border: 0 none;"></a></div>
+ <div style="border: 0 none; position: absolute; right: 0; top: 0;"><a href="https://github.com/aterrien" target="_blank"><img src="http://anthonyterrien.com/i/github-ribbon.png" style="border: 0 none;"></a></div>
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-3008949-6']);
+ _gaq.push(['_trackPageview']);
+ </script>
+ <script type="text/javascript">
+ (function() {
+ var ga = document.createElement('script');
+ ga.type = 'text/javascript';
+ ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
+ })();
+ </script>
</body>
</html>
View
@@ -35,6 +35,7 @@ $(function() {
,'fgColor' : $this.data('fgcolor') || '#87CEEB' //#222222'
,'bgColor' : $this.data('bgcolor') || '#EEEEEE'
,'readOnly' : $this.data('readonly')
+ ,'skin' : $this.data('skin') || 'default'
,'draw' :
/**
* @param int a angle
@@ -60,16 +61,29 @@ $(function() {
ctx.arc( r, r, r-lw, sa, ea, false);
ctx.stroke();
- ctx.beginPath();
- ctx.strokeStyle = opt.bgColor;
- ctx.arc(
- r, r, r-lw ,sa
- ,(v==opt.min && !opt.cursor)
- ? sa+0.0001
- : ea
- , true
- );
- ctx.stroke();
+ switch(opt.skin){
+
+ case 'default' :
+ ctx.beginPath();
+ ctx.strokeStyle = opt.bgColor;
+ ctx.arc(
+ r, r, r-lw ,sa
+ ,(v==opt.min && !opt.cursor)
+ ? sa+0.0001
+ : ea
+ , true
+ );
+ ctx.stroke();
+ break;
+
+ case 'tron' :
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.strokeStyle = opt.fgColor;
+ ctx.arc( r, r, r-lw+1+lw*2/3, 0, 2*Math.PI, false);
+ ctx.stroke();
+ break;
+ }
}
,'change' :
/**
@@ -79,8 +93,9 @@ $(function() {
,'release' :
/**
* @param int v Current value
+ * @param jQuery ipt Input
*/
- function(v) {}
+ function(v,ipt) {}
}
,gopt
);
@@ -104,7 +119,7 @@ $(function() {
,'font-family' : 'Arial'
,'font-weight' : 'bold'
,'text-align' : 'center'
- ,'color' : 'lightgrey'
+ ,'color' : opt.fgColor
,'padding' : '0px'
,'-webkit-appearance': 'none'
}
@@ -117,13 +132,23 @@ $(function() {
);
k = new Knob( c, opt );
- k.onRelease = opt.release;
+ k.onRelease = function(v) {
+ opt.release(v,$this);
+ };
k.val( parseInt($this.val()) || 0 );
k.onChange = function(v) {
$this.val(v);
opt.change(v);
};
+ // bind change on input
+ $this.bind(
+ 'change'
+ ,function( e ) {
+ k.val( $this.val() );
+ }
+ );
+
if( !opt.readOnly ){
c.bind(
"mousedown touchstart"

0 comments on commit fb42a26

Please sign in to comment.