2

サードパーティが作成したJQueryプラグインとAPI、およびそれらを理解するための方法論について質問があります。最近、JQuery Masonry / Infiniteスクロールプラグインをダウンロードしましたが、指示に基づいて構成する方法がわかりませんでした。そこで、完全に開発されたデモをダウンロードしてから、機能を損なわないものをすべて手動で削除しました。残されたコードにより、ドキュメントよりもはるかに詳細にプラグインを理解することができました。

JQueryノブと呼ばれるプラグインで同様の問題が発生しています。 http://anthonyterrien.com/knob/

JQuery Knobのreadmeファイルを見ると、これは機能しているコードであることがわかります。

<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

このためには、トリガーがKnobライブラリのコマンドではなく、jQueryコマンドであることを理解する必要があります。このコマンドの詳細については、http： //api.jquery.com/trigger/をご覧ください。

したがって、これが行うことは、そのスクリプトをボタンクリックに適用すると、Knobスクリプトがダイヤルスタイルに適用され、コード内にあるもののようにdivが構成されるように構成されます。

このような：

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

ノブのオンロードを表示したいだけの場合は、次のことを行う必要があります。

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

あなたがそれをどのように知っているかについてのあなたの質問に関しては。最初に、それを調べてください。jQueryに移動し、不明なメソッド名を入力します。それがjQueryからのコマンドであるかどうかを判断する良い方法は、ドキュメントで開発者/作成者がそれを説明していないか、またはその使用方法を説明していないかどうかです。それは彼らがそれが常識であると感じることを意味します。あなたがそれを知らないならば....それを調べてください。

最初は、タッチアンドゴーです。あなたはそれのコツをつかむまであなたはただ試みそして学び続ける必要があります。それを理解しようとする方法に頭をぶつけないでください。Google検索で答えがすぐに見つからない場合、または使用しているプラ​​グインのコミュニティがない場合は、プラグインの作成者にメールを送信してみてください。質問に答える人の数に驚かれることでしょう。

お役に立てば幸いです。

于 2012-10-03T03:38:04.950 に答える
0

以下は、JQueryKnobAPIの完全な動作コードです。

<!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 に答える