Methodology to understanding JQuery plugin & API's developed by third parties

Posted by Taoist on Stack Overflow See other posts from Stack Overflow or by Taoist
Published on 2012-10-02T22:59:53Z Indexed on 2012/12/08 5:04 UTC
Read the original article Hit count: 200

Filed under:

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>

Developer IT