Skip to content

Instantly share code, notes, and snippets.

@takamin
Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save takamin/2a19273261de95500a6c to your computer and use it in GitHub Desktop.
Save takamin/2a19273261de95500a6c to your computer and use it in GitHub Desktop.
ちゃんとしたjQueryプラグインを簡単に作るための関数です。プラグイン個別の機能はクラスに実装してくださいね。
// 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);
});
};
}
// 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