轉換功能分爲插件

我有多次調用在我的項目的函數：轉換功能分爲插件

function fillSelect(select) { 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "Data.asmx/Status", 
     dataType: "json", 
     async: true, 
     success: function(data) { 
      $.each(data.d, function(i) { 
       select.append('<option value=' + data.d[i].value + '>' + data.d[i].name + '</option>'); 
      }); 
     }, 
     error: function(result) { 
      alert("Error occured. Contact admin"); 
     } 
    }); 
}

然後在我的代碼我使用這個，像這樣：

fillSelect($('select#status1')); 
fillSelect($('select#status2')); 
fillSelect($('select#status3'));

我想做的是我的功能轉換成插件，這樣我就可以把它像這樣：

$('select#status1, select#status2, select#status3').fillSelect();

使用http://starter.pixelgraphics.us/我產生了空的模式：

(function($) { 
    $.ajaxSelect = function(el, select, options) { 
     // To avoid scope issues, use 'base' instead of 'this' 
     // to reference this class from internal events and functions. 
     var base = this; 

     // Access to jQuery and DOM versions of element 
     base.$el = $(el); 
     base.el = el; 

     // Add a reverse reference to the DOM object 
     base.$el.data("ajaxSelect", base); 

     base.init = function() { 
      base.select = select; 

      base.options = $.extend({}, $.ajaxSelect.defaultOptions, options); 

      // Put your initialization code here 
     }; 

     // Sample Function, Uncomment to use 
     // base.functionName = function(paramaters){ 
     // 
     // }; 

     // Run initializer 
     base.init(); 
    }; 

    $.ajaxSelect.defaultOptions = { 
     clear: false //append to select or replace current items 
    }; 

    $.fn.ajaxSelect = function(select, options) { 
     return this.each(function() { 
      (new $.ajaxSelect(this, select, options)); 
     }); 
    }; 

})(jQuery);

但我不知道如何填寫它。
我想要做的就是打電話給服務器，然後填寫許多選擇的項目，就像我放入參數一樣。
所有這些代碼對於這樣一個小插件來說真的需要嗎？

我知道，有可能是一些插件，這個功能，但我想創建自己的插件，只是爲了學習多一點:)

來源

2012-11-05 Misiu

您希望使用相同的數據填充所有選擇？或者在向服務器發送一個請求時如何過濾每個數據？ –

是的，這是正確的，我想填充所有選擇相同的數據。所以我認爲只有一個請求會很好。 – Misiu

對於「選擇」，我會爲選項創建一個字符串，然後只使用一個附加（.html？） - 這種方式只能擊中DOM一次。 –

你並不需要所有的鍋爐板，你可以做如下

$.fn.fill = function fillSelect(options) { 
    var self = this; 
    options = $.extend({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "Data.asmx/Status", 
      dataType: "json", 
      async: true, 
      success: function(data) { 
       var list = ""; 
       $.each(data.d, function(i) { 
        list += '<option value=' 
           + data.d[i].value + '>' 
           + data.d[i].name 
           + '</option>'; 
        }); 
       self.filter("select").each(function(){ 
        $(this).append(list); 
       }); 
      }, 
      error: function(result) { 
       alert("Error occured. Contact admin"); 
      } 
      },options); 
    $.ajax(options); 
    return this; 
}

的第一件事就是發現功能被添加到jQuery的原型/ $。FN。然後，成功處理程序已更改，以便處理所有選定的元素，並最終返回選擇以進行鏈接，因爲這通常是使用jQuery時所期望的。

上面的代碼將只爲所有選定的「選擇」元素附加相同的選項。如果您選擇其他選項，這些選項將不會被追加到這些元素。

我已經將簽名更改爲接受選項元素。在上面的版本中有默認的vesrion等於你的ajax選項。如果提供了其他值，如果缺省值存在，它們將覆蓋默認值。如果缺省值不存在，則這些值將被添加到選項對象

來源

2012-11-05 12:52:49

但是，這隻會做多個選擇的請求嗎？或者爲每個選擇一個請求？ 5選擇= 5請求到服務器？ – Misiu

@Misiu它只會做一個請求 –

我會給這個試試:) – Misiu

你只需要你的方法添加到$.fn對象，如下所述：http://docs.jquery.com/Plugins/Authoring

的this關鍵字將評估該用於調用你的函數的代碼jQuery選擇，所以不是使用在代碼中select參數，只需要使用this

來源

2012-11-05 12:49:55 LukeGT

轉換功能分爲插件

回答

相關問題