Skip to content

Instantly share code, notes, and snippets.

@akira1908jp

akira1908jp/knob.html

Last active March 22, 2019 08:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save akira1908jp/5001459 to your computer and use it in GitHub Desktop.
Save akira1908jp/5001459 to your computer and use it in GitHub Desktop.
Download ZIP
knob サンプル
Raw
knob.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.knob.js"></script>
<style type="text/css">
div.demo {
text-align: center;
width: 114px;
float: left;
}
</style>
</head>
<body>
<div class="demo">
<p>VOLUME</p>
<input data-linecap="round" data-cursor="true" data-width="100" type="text" data-min="0" data-max="10" value="0" data-angleOffset="-135" data-angleArc="270" class="volume">
</div>
<div class="demo">
<p>GAIN</p>
<input data-linecap="round" data-cursor="true" data-width="100" type="text" data-min="0" data-max="10" value="0" data-angleOffset="-135" data-angleArc="270" class="gain">
</div>
<div class="demo">
<p>BASS</p>
<input data-linecap="round" data-cursor="true" data-width="100" type="text" data-min="0" data-max="10" value="0" data-angleOffset="-135" data-angleArc="270" class="bass">
</div>
<div class="demo">
<p>MIDDLE</p>
<input data-linecap="round" data-cursor="true" data-width="100" type="text" data-min="0" data-max="10" value="0" data-angleOffset="-135" data-angleArc="270" class="middle">
</div>
<div class="demo">
<p>TREBLE</p>
<input data-linecap="round" data-cursor="true" data-width="100" type="text" data-min="0" data-max="10" value="0" data-angleOffset="-135" data-angleArc="270" class="treble">
</div>
<div class="demo">
<p>PRESENSE</p>
<input data-linecap="round" data-cursor="true" data-width="100" type="text" data-min="0" data-max="10" value="0" data-angleOffset="-135" data-angleArc="270" class="presense">
</div>
<script>
$(function() {
$(".volume, .gain , .bass, .middle, .treble, .presense").knob({});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment