2

我有一个关于第三方创建的 JQuery 插件和 API 以及理解它们的方法的问题。最近我下载了 JQuery Masonry/Infinite 滚动插件，根据说明我无法弄清楚如何配置它。所以我下载了一个完全开发的演示，然后手动删除了所有不会破坏功能的东西。留下的代码让我能够比文档更详细地理解插件。

我现在在一个名为 JQuery 旋钮的插件上遇到了类似的问题。 http://anthonyterrien.com/knob/

如果您查看 JQuery Knob 自述文件，它会说这是工作代码：

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

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

但据我所知，根本不是。自述文件还说插件使用 Canvas。我想知道我是否应该将此代码包装在画布上下文中，或者此功能是否已经是插件的一部分。

我知道这种“问题”可能不适合这里，但我对阅读这类文档的假设有点困惑，并认为无论如何我都会发布查询。很想知道这是否是由于我的“newbi”编程经验，或者这是否是经验丰富的编码人员也与之抗争的原因。

谢谢你。

编辑

回应泰安娜的回复。

我修改了代码，还是不行。我把它贴在下面。我确保我检查了 Google 控制台以确保基础知识得到处理，例如在库上没有出现读取错误。

<!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>
4

2 回答 2

1

为此，您需要意识到 trigger 不是来自 Knob 库的命令，而是一个 jQuery 命令。您可以在此处找到有关该命令的更多信息：http: //api.jquery.com/trigger/

所以，这将做的是，如果您将该脚本应用于按钮单击，它将将旋钮脚本应用于表盘样式，并将配置 div 看起来像代码中的内容。

像这样：

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

如果您只想显示一个旋钮 onload，那么您只需执行以下操作：

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

至于你怎么知道的问题。一开始，查一下。转到 jQuery 并输入您不知道的方法名称。判断它是否是来自 jQuery 的命令的一个好方法是开发者/作者是否在文档中没有解释它或如何使用它。这意味着他们认为这是常识。如果你不知道它....查一下。

一开始，它是一触即发。你只需要不断尝试和学习，直到你掌握了窍门。不要用头撞到试图弄清楚的方式。如果您无法通过 Google 搜索快速找到答案，或者您正在使用的插件没有社区，请尝试通过电子邮件发送插件的作者。你会惊讶有多少人会回答问题。

希望有帮助。

于 2012-10-03T03:38:04.950 回答
0

下面是 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>
于 2012-10-03T08:37:04.580 回答