2

私は次のJavaScriptコードを持っています

$(function(){
    // loading source image
   $('#panel').mousemove(function(e) { // binding mouse move event
       // some code
   });
   $('#panel').mousedown(function(e) { // binding mousedown event
       // some code
   });
   $('#panel').mouseup(function(e) { // binding mouseup event
       // some code
   });
});

function getResults() {
    // some code
}

このように機能します

<button onclick="getResults()">Crop</button>
<canvas id="panel" width="100" height="200"></canvas>

このjs-pluginを書き直して、より一般的にしたいと思います。
私はそれを使用する良い方法は次の方法だと思います：

$('#panel').myLib({
    onSelect: getResults,
    onClick: getResults
});

この結果を得るには、jsコードをどのように書き直す必要がありますか？ありがとう

4

1 に答える 1

5

fnプロパティ (実際には のエイリアス) を使用prototypeして、プラグインを追加します。

$.fn.myLib = function(options){

  // bind events
  this.mousemove(function(e) { // binding mouse move event
    // some code
  });
  this.mousedown(function(e) { // binding mousedown event
    // some code
  });
  this.mouseup(function(e) { // binding mouseup event
    // some code
  });

  // add a button
  this.before($('<button>').text('Crop').click(options.onSelect));

  // return the object to make the function chainable
  return this;
};
于 2012-10-05T10:53:05.087 に答える