ホーム > suin

suin

記事一覧 > スイナシア > jQueryの世界で最も単純なプラグインの作り方サンプル

jQueryの世界で最も単純なプラグインの作り方サンプル

jQueryは要素セレクターやクロスブラウザ対応が優れたjavascriptのライブラリで、prototype.jsと並んで広く使われています。そのjQueryでは、独自に自前の関数をプラグインという形で作ることができます。jQueryプラグインの作り方は検索すれば山ほど出てきますが、その第一歩となるプラグインの基本的な書き方が見つからなかったので記事にしておこうと思います。

次のプラグインは、単に文字色を赤くするだけのものです。mypluginがプラグイン名です。$(this).css('color', 'red');の部分以外がプラグインの骨組みとなり、この部分だけ差し替えれば、全く別のプラグインを作ることができます。

(function($){
	$.fn.myplugin = function() {
		return this.each(function() {
			$(this).css('color', 'red');
		});
	};
})(jQuery);

このプラグインの動作デモ

To Top