ユーザ用ツール

サイト用ツール


jquery:plugin

jQuery Plugin

プラグインを探す

自作

jQueryオブジェクトにメソッドを追加する。

extendを使う方法と、jQueryオブジェクトに直接関数をセットする方法がある。

//直接拡張
jQuery.fn.hoge = function(config){ 
    this.each(function(){ $(this).prepend("ほげ") }); 
    return this;
};
 
// extendで拡張
jQuery.fn.extend({ 
    fuga: function(config){ 
        this.each(function(){ $(this).append("ふが") }); 
        return this; 
    }
});
 
$("p").hoge().fuga();

thisは、処理中のjQueryオブジェクト自身を指す。何らかの値を取得するようなメソッドでなければ、メソッドチェインを続けられるように'return this'する。

設定は引数にjavascriptオブジェクト形式で渡すのが一般的

jQuery.fn.extend({ 
    alert: function(config){
        config = jQuery.extend({message: "?"}, config);  // 設定が無かった時のデフォルト値
        window.alert(config.message); 
        return this; 
    }
});
 
$("p").alert({message: "!"}).alert();
jquery/plugin.txt · 最終更新: 2008/04/08 09:04 by 127.0.0.1