Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
202 lines (197 sloc) 8.42 KB
<!DOCTYPE html>
<html>
<head>
<title>jQuery Knob demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script>
$(function() {
$(".knob").knob();
// Example of infinite knob, iPod click wheel
var val,up=0,down=0,i=0
,$idir = $("div.idir")
,$ival = $("div.ival")
,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
$("input.infinite").knob(
{
'min':0
,'max':20
,'stopper':false
,'change':function(v){
if(val>v){
if(up){
decr();
up=0;
}else{up=1;down=0;}
}else{
if(down){
incr();
down=0;
}else{down=1;up=0;}
}
val=v;
}
}
);
// Automatic mode
/*var autoVal = 0
,timer = setInterval(function() {
$(".knob").each(
function(){
$(this)
.val(Math.round(Math.sin(autoVal)*100))
.trigger('change');
}
);
autoVal++;
}, 100);*/
// Configure
/*$(".knob").val(25).trigger(
"configure",
{"min":10, "max":40, "fgColor":"#FF0000", "skin":"tron", "cursor":true}
);*/
// Change example
/*$(".knob").knob(
{
'change':function(e){
console.log(e);
}
}
)
.val(79)
;*/
});
</script>
<style>
h2{color:#87CEEB;font-family:'Georgia';}
</style>
</head>
<body>
<div style="float:left;width:100%;font-family:'Georgia';font-size:70px;font-weight:bold;color:#87CEEB;letter-spacing:-5px">
Knob demo <a href="http://flattr.com/thing/674900/jQuery-Knob" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a>
</div>
<div style="float:left;width:300px;height:300px;background-color:#222;color:#FFF;padding:20px">
<pre>
data-width="75"
data-fgColor="#fff"
data-skin="tron"
data-displayPrevious=true
</pre>
<input class="knob" data-width="75" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-cursor=true value="75">
</div>
<div style="float:left;width:300px;height:300px;background-color:#222;color:#FFF;padding:20px">
<pre>
data-width="150"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".2"
data-displayPrevious=true
</pre>
<input class="knob" data-width="150" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">
</div>
<div style="float:left;width:300px;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="clear:both"></div>
<div style="float:left;width:300px;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:300px;height:300px;padding:20px">
<pre>
data-width="200"
data-cursor=true
</pre>
<input class="knob" data-width="200" data-cursor=true value="29">
</div>
<div style="float:left;width:300px;height:300px;padding:20px">
<pre>
data-width="200"
data-min="-100"
data-cgColor="#A9EFFD"
data-displayPrevious=true
data-angleOffset="90"
</pre>
<input class="knob"data-width="200" data-min="-100" data-angleOffset="90" data-displayPrevious=true value="44">
</div>
<div style="clear:both"></div>
<div style="float:left;width:300px;height:320px;padding:20px">
<h2>Ticks</h2>
<pre>
data-cursor=true
data-skin="tron"
data-ticks="8"
</pre>
<input class="knob" data-cursor=true data-skin="tron" data-ticks="8" value="35">
</div>
<div style="float:left;width:300px;height:320px;padding:20px">
<h2>Readonly</h2>
<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:300px;height:320px;padding:20px">
<h2>Knobify!</h2>
<pre>
data-width="200"
</pre>
<input type="button" onclick="$('.knob-dyn').knob();" value="knobify!">
<input type="text" class="knob-dyn" data-width="200" data-cursor=true value="56">
<pre>
data-width="50"
data-cursor=true
</pre>
<input type="button" onclick="$('.knob-dyn2').knob();" value="knobify!">
<input type="text" class="knob-dyn2" data-width="50" data-thickness=".4" value="56">
</div>
<div style="clear:both"></div>
<div style="float:left;height:440px;width:420px;padding:20px">
<h2>Infinite / iPod click wheel</h2>
<div style="float:left;width:200px;height:300px;padding:20px;background-color:#EEEEEE;text-align:center;">
<pre>
data-width="150"
data-cursor=true
data-thickness=".5"
data-fgColor="#AAAAAA"
data-bgColor="#FFFFFF"
data-displayInput="false"
+ some code
</pre>
<input class="infinite" data-width="150" data-thickness=".5" data-fgColor="#AAAAAA" data-bgColor="#FFFFFF" data-displayInput="false" data-cursor=true>
</div>
<div style="float:left;margin-top:200px;">
<div class="ival" style="width:100px;text-align:center;font-size:50px;color:#AAA">0</div>
<div class="idir" style="width:100px;text-align:center;font-size:50px;"></div>
</div>
</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>
<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>