星期二, 4月 19, 2011

[JQuery Plugin] 自訂jQuery plugin 教學

記錄jQuery外掛的常見的寫作方法。

第一步:將下面的範例程式複製起來,
這是一個簡單將jQuery物件別名為$號的方法,
可以避免其他Javascript Framework別名衝突的問題!!

(function($) {

})(jQuery);


第一種:我偏好的方式 $.fn與$來擴充jQuery物件的方法
(function($) {
 
//呼叫此方法需要帶入指定的元素,可一定綁定多個元素
   $.fn.helloworld= function() {
        this.each(function(){
             alert('helloworld');
        });
        
    };
    
//不需元素即可呼叫(靜態函式)
    $.helloworld2 = function() {
       alert('helloworld 2');
    };
    
})(jQuery);



第二種:改用extend方法來擴充!!
什麼是extend方法請參考黑大的文章:jQuery extend 的用法

(function($) {
 $.extend({
   helloworld: function(){
    alert('helloworld');
   },
   goodbyeworld: function(){
    alert('goodbyeworld');
   }
 });
})(jQuery);


Reference:
網站製作學習誌 » [jQuery] 自製 jQuery Plugin – Part 1
網站製作學習誌 » [jQuery] 自製 jQuery Plugin – Part 2

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails