How to use jQuery knob in your website

  10 months ago     Views:  1238  


jQuery Knob is the simple jQuery plugin which provides simple, touchable and canvas based jQuery dial which can enhance your admin dashboard.

jQuery Knob supports touch, mouse and mousewheel. It is keyboard events implemented and overloads an input element.

jQuery Knob uses jQuery to run its script. To use jQuery Knob in your web application, first include jQuery CDN before you include jQuery Knob script. Download jQuery Knob from the GitHub. or Alternatively you can also directly load script file from CDNJS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>

And then include this tags

<input type="text" value="75" class="dial">
<script type="text/javascript">
    $(function() {
        $(".dial").knob();
    });
</script>

You can pass additional options as attributes data-option like this:

<input type="text" value="75" class="dial" data-min="-50" data-max="50">

Or you can also pass options in knob() functio.

$(".dial").knob({
    'min':-50,
    'max':50
});

Here is the available options that you can pass.

Behaviour based options:

min : min value, default=0.
max : max value, default=100.
step : step size, default=1.
angleOffset : starting angle in degrees, default=0.
angleArc : arc size in degrees, default=360.
stopper : stop at min & max on keydown/mousewheel, default=true.
readOnly : disable input and events, default=false.
rotation : direction of progression, default=clockwise.

 

UI based options:

cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true", default=gauge.
thickness : gauge thickness.
lineCap : gauge stroke endings. default=butt, round=rounded line endings
width : dial width.
height : dial height.
displayInput : default=true, false=hide input.
displayPrevious : default=false, true=displays the previous value with transparency.
fgColor : foreground color.
inputColor : input value (number) color.
font : font family.
fontWeight : font weight.
bgColor : background color.

Here is the complete code to use jQuery Knob.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery Knob</title>
    <!-- jquery cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- jquery knob cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
</head>
<body style="margin: 100px 200px;">
    <input type="text" value="75" class="dial">
    <script type="text/javascript">
        $(function() {
            $(".dial").knob();
        });
    </script>
</body>
</html>

jQuery Knob is not the big tool but still it can enhance user experience and make dashboard beautiful. Here is the official documentation. I hope this will help you. If you have any inquiry, please write in the bellow comment section.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

1 Comments

  • Image
    Ellen
    December 07, 2019 Reply

    I’ve been surfing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the web will be a lot more useful than ever before. It’s appropriate time to make a few plans for the long run and it’s time to be happy. I have read this post and if I could I want to recommend you few attention-grabbing things or tips. Maybe you could write subsequent articles referring to this article. I desire to read even more things about it! Ahaa, its good discussion on the topic of this paragraph at this place at this web site, I have read all that, so at this time me also commenting at this place. http://apple.com

    Image
    Site Admin
    Sat December, 2019

    Hi Ellen Thank you very much. Your support make us strong to write articles and help the community to grow. You can also recommend us more tips directly from the comment or mail. For any help or inquiry, mail us on hackthestuffinfo@gmail.com Thank you