2

I have a question about third party created JQuery plug ins and API's and the methodology for understanding them. Recently I downloaded the JQuery Masonry/Infinite scroll plug in and I couldn't figure out how to configure it based on the instructions. So I downloaded a fully developed demo, then manually deleted everything that wouldn't break the functionality. The code that was left allowed me to understand the plug in much greater detail than the documentation.

I'm now having a similar issue with a plug in called JQuery knob. http://anthonyterrien.com/knob/

If you look at the JQuery Knob readme file it says this is working code:

<input type="text" value="75" class="dial">    

$(function() {
  $('.dial')
      .trigger(
          'configure',
          {
          "min":10,
          "max":40,
          "fgColor":"#FF0000",
          "skin":"tron",
          "cursor":true
          }
      );
  });

But as far as I can tell it isn't at all. The read me also says the Plug in uses Canvas. I am wondering if I am suppose to wrap this code in a canvas context or if this functionality is already part of the plug in.

I know this kind of "question" might not fit in here but I'm a bit confused on the assumptions around reading these kinds of documentation and thought I would post the query regardless. Curious to see if this is due to my "newbi" programming experience or if this is something seasoned coders also fight with.

Thank you.

Edit

In response to Tyanna's reply.

I modified the code and it still doesn't work. I posted it below. I made sure that I checked the Google Console to insure the basics were taken care of, such as not getting a read-error on the library.

<!DOCTYPE html>
<meta charset="UTF-8">
<title>knob</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

<script src="js/jquery.knob.js"></script>

<div id="button1">test </div>
<script>

  $(function() {

    $("#button1").click(function () {
        $('.dial').trigger(
                'configure',
                  { 
                    "min":10,
                    "max":40,
                    "fgColor":"#FF0000",
                    "skin":"tron",
                    "cursor":true
                  }
            );
    });
  });

</script>
Juan Cortés
  • 20,634
  • 8
  • 68
  • 91
William
  • 4,422
  • 17
  • 55
  • 108

2 Answers2

1

For this, you need to realize that trigger isn't a command from the Knob library, it's a jQuery command. You can find more about that command here: http://api.jquery.com/trigger/

So, what this will do is, if you apply that script to a button click, it will apply the Knob script to the dial style, and will configure the div to look like what is in the code.

Like this:

$("#button1").click(function () {
    $('.dial').trigger(
            'configure',
              { 
                "min":10,
                "max":40,
                "fgColor":"#FF0000",
                "skin":"tron",
                "cursor":true
              }
        );
});

If you just want to display a knob onload then you just have to do:

$(function() {
    $(".dial").knob();
}

As for your question on how you'd know that. In the beginning, look it up. Go to jQuery and type in a method name you don't know. A good way to tell if it's a command from jQuery is if in the documentation the dev/author doesn't explain it or how to use it. That means they feel it is common knowledge. If you don't know it....look it up.

In the beginning, it's touch and go. You just have to keep trying and learning until you get the hang of it. Don't bang your head against the way trying to figure it out. If you can't find your answer quickly with a Google search, or if there isn't a community for the plugin that you're using, try emailing the author of the plugin. You'd be surprised how many will reply to questions.

Hope that helps.

Tyanna
  • 719
  • 6
  • 11
  • Yes it helped. I appreciate it! I didn't actually know how to look something like that up because the assumptions the developers are operating by are still confusing to me. I've been doing Javascript for a year and the few JQuery plug ins I've dealt with have been a challenge to figure out.JQuery itself has good documentation that I can get my head around but I am still getting acquainted with reading third party library API's – William Oct 03 '12 at 04:26
  • Edit* I edited the original code and still am not getting the result. – William Oct 03 '12 at 04:52
  • Edit again* I found this blog post that has excruciating simple C&P examples http://bjonkdesign.blogspot.com/2012/06/jquery-knob-canvas-based-plugin.html – William Oct 03 '12 at 04:55
  • @Taoist, there is no div in your code with the .dial class applied. – Tyanna Oct 03 '12 at 05:13
  • If my answer was helpful, upvote it and/or mark it as your answer. – Tyanna Oct 04 '12 at 03:22
0

Below is complete working code for the JQuery Knob API.

<!DOCTYPE html>
<meta charset="UTF-8">
<title>knob</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

<body>
<script src="js/jquery.knob.js"></script>


<input type="text"  class="dial">




<script>



$(".dial").knob(  


        {
        "displayPrevious":true,
        "width": 100,
        "min":0,
        "max":4,
        "data-angleOffset":+0,
         "data-angleArc": +300, 
        "fgColor":"#ffec03",
        "bgColor":"#ddd",
        //"data-skin":"tron",
        "thickness":.3,
        "data-cursor":true,


        }
    );




</script>

<body>

<style>

body{
    background-color:#000;
}


</style>
William
  • 4,422
  • 17
  • 55
  • 108