首頁 > Javascript, jQuery, 未分類 > jQuery Plugin Template

jQuery Plugin Template

2009年12月27日 Austin 發表評論 閱讀評論

基本架構:

jQuery.fn.my_plugin = function() {
   return this.each(function() {
       // TODO
   }
}

增強(方便)版 & 範例:

jQuery.fn.my_plugin = function(param) {
   // 這個this本身就是jQuery的物件了
   // 先放到$all這樣到了each裡面才能直接使用(裡面的this會指到別的物件)
   var $all = this;

   // 自訂function給each裡的程式用(用this.避免與外部函式衝突)
   this.func = function(str) {
      // TODO
   }

   return this.each(function() {
      // 把他轉成jQuery方便操做(這邊的this是HTML的Element)
      var $this = jQuery(this);

      // 取得目前處理的Element在$all的index
      alert($all.index(this));

      // 用$all.呼叫my_plugin內定義的func
      $all.func('');

      // 這邊可以直接存取到plugin帶進來的參數(param)
      alert(param);
   });
};
  1. 目前尚無任何的評論。
  1. 目前尚無任何 trackbacks 和 pingbacks。