自作したプラグイン内で関数を実行する

jQueryのプラグインを作成した際に、オプションで関数を実行できるように実装しようとして少し迷ったので、実装した方法をメモしておきます。

プラグインの作成

ボタンをクリックすると、ボタンのテキストをconsoleに表示するプラグインを作ってみます。
オプションでテキスト色を変更できるようにします。

JavaScript

(function($) {
	$.fn.test = function(options) {
		var elements = this;
		var defaults = {
			color: 'black'
		};
		var setting = $.extend(defaults, options);

		elements.on('click', function() {
			console.log('%c' + elements.text(), 'color: ' + setting.color + ';');
		});
	}
})(jQuery);

動作確認用のボタンを追加します。

HTML

<button id="sample">サンプル</button>
<button id="sample2">サンプル(赤色で表示)</button>

各ボタンにプラグインの指定を行います。

JavaScript

$(function() {
	$('#sample').test();
	$('#sample2').test({
		color: 'red'
	});
});

これで簡単なプラグインが実装できました。
このプラグインのオプションに関数を指定できるようにしてみます。
プラグインのデモページ
　

オプションに関数を追加する

オプションの指定に関数を追加してみます。
色々試行錯誤して、最終的に以下のように追加しました。

JavaScript

(function($) {
	$.fn.test = function(options) {
		var elements = this;
		var defaults = {
			color: 'black',
			func: ''
		};
		var setting = $.extend(defaults, options);

		elements.on('click', function() {
			console.log('%c' + elements.text(), 'color: ' + setting.color + ';');

			if(setting.func !== '') {
				setting.func(elements.text());
			}
		});
	}
})(jQuery);

関数確認用のボタンを追加します。

HTML

<button id="sample">サンプル</button>
<button id="sample2">サンプル(赤色で表示)</button>
<button id="sample3">alertを表示</button>

追加したボタンにプラグインの指定を行います。
今回はconsoleに表示するテキストをアラートでも表示してみます。

JavaScript

$(function() {
	$('#sample').test();
	$('#sample2').test({
		color: 'red'
	});
	$('#sample3').test({
		func: function(text) {
			alert(text);
		}
	});
});

実際に試してみると、アラートの表示が確認できました。
プラグイン内で関数を実行するデモページ
もっといい実装方法がある気はしますが、一応想定通りの動作ができたのでOKとします。