Last active
August 29, 2015 14:26
-
-
Save takamin/2a19273261de95500a6c to your computer and use it in GitHub Desktop.
ちゃんとしたjQueryプラグインを簡単に作るための関数です。プラグイン個別の機能はクラスに実装してくださいね。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// NAME | |
// | |
// jquery_plugin_class - javascriptのクラスをjQueryプラグインとして登録する | |
// | |
// DESCRIPTION | |
// | |
// クラス名を指定して呼び出せば、そのクラスをjQueryプラグインとして登録します。 | |
// クラスのコンストラクタは、グローバルスコープの関数でないといけません。 | |
// コンストラクタの第1引数には関連するDOM要素が渡されます。 | |
// | |
// PARAMETER | |
// | |
// class_name クラスのコンストラクタ(function)の名称(文字列) | |
// | |
function jquery_plugin_class(class_name) { | |
jQuery.fn[class_name] = function(method_name) { | |
//メソッド呼び出し用の引数リスト | |
var args = Array.prototype.slice.call(arguments, 1); | |
//インスタンスメソッドのインタフェース | |
//生成も行う。 | |
var invoke = function(element) { | |
//コンストラクタを得る | |
var ctor = window[class_name]; | |
//要素に紐づいたインスタンスがないなら生成 | |
if(element[class_name] == null) { | |
element[class_name] = new ctor(element); | |
} | |
//メソッドを呼び出す | |
return ctor.prototype[method_name].apply( | |
element[class_name], args); | |
}; | |
if(this.length == 1) { | |
//単一要素の選択時はメソッドの戻り値を返す。 | |
//メソッドが戻り値を返さなかった(==undefined)場合は、 | |
//メソッドチェイン用にプラグイン自身を返す | |
var ret = invoke(this[0], class_name, method_name, args); | |
if(ret == undefined) { | |
ret = this; | |
} | |
return ret; | |
} | |
//複数要素選択時は必ずメソッドチェインできる | |
return $(this).each(function() { | |
invoke(this, class_name, method_name, args); | |
}); | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// sample.js | |
// jquery_plugin_classを使用してプラグインを登録するサンプル | |
// | |
// クラスのプラグイン化宣言(関数呼び出し) | |
// クラス本体は以降に定義 | |
jquery_plugin_class("PluginSample"); | |
//コンストラクタ | |
//(1)第一引数で渡されるDOM要素を保存。 | |
function PluginSample(element) { | |
this.element = element; | |
} | |
//(2)プラグインの生成メソッド | |
//マウスオーバーで文字色と背景色を変化させる。 | |
//マウスが外れたらもとに戻す。 | |
PluginSample.prototype.create = function(option) { | |
this.opt = option || { bgc:'yeallow', fgc: 'black' }; | |
var $obj = $(this.element); | |
this.bgc = $obj.css('background-color'); | |
this.fgc = $obj.css('color'); | |
var THIS = this; | |
$obj.hover( | |
function() { | |
$obj.css('background-color', THIS.opt.bgc); | |
$obj.css('color', THIS.opt.fgc); | |
}, | |
function() { | |
$obj.css('background-color', THIS.bgc); | |
$obj.css('color', THIS.fgc); | |
} | |
); | |
}; | |
//プラグインオブジェクトの生成 | |
$(function() { | |
$("li").PluginSample("create", {bgc:'cyan', fgc:'#880000'}); | |
$("p").PluginSample("create", {bgc:'#ffcc66', fgc:'black'}); | |
$("a").PluginSample("create", {bgc:'yellow', fgc:'red'}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment