[jQuery] ウィジェットを作る (2)

前回の記事「[jQuery] ウィジェットを作る (1)」の続き。

その他のパブリックメソッド

destroy

ウィジェットによる諸々を削除するdestroyメソッドが備わっています。

// ウィジェット呼び出し
var widget = $('#myWidget').myWidget({content: 'fuga'});
console.log(widget.myWidget('option', 'content')); // 'fuga'

// ﾃﾞｽﾄﾛｰｲ
widget.myWidget('destroy');
console.log($(widget.myWidget('option', 'content')); // [div#myWidget]

// 新しく呼び出し
widget.myWidget();
console.log($(widget.myWidget('option', 'content')); // 'hoge'(初期値)

デフォルトのdestroyメソッドが削除するのは、ウィジェットの生成で暗黙的に追加･設定されたものだけです。任意で追加･設定したクラスや属性、イベントなどの削除は、メソッドの上書きで対応することができます。

$.widget('test.myWidget', {

	// デフォルト設定
	options: {content: 'hoge'},

	// 初期化
	_init: function() {},

	// destroyメソッドを上書き
	destroy: function() {
		// 自分が設定した色々を消す記述
		～
		// 暗黙的に設定されたものは継承元のdestroyで
		$.Widget.prototype.destroy.call(this);
	}
});

enable / disable

ウィジェットの状態を有効(enable) / 無効(disable)で切り替えるメソッド。

disable時、ウィジェットを呼び出した要素に’名前空間名-ウィジェット名-disabled’と’ui-state-disabled’の二つのクラス名が付与され、enable時に削除されます。

// ウィジェット呼び出し
var widget = $('#myWidget').myWidget({content: 'fuga'});

// 無効化
widget.myWidget('disable');
console.log(widget.attr('class')); // 'test-myWidget-disabled ui-state-disabled'

// 有効化
widget.myWidget('enable');
console.log(widget.attr('class')); // undefined

destroyと同じく、上書きできます。

$.widget('test.myWidget', {

	// デフォルト設定
	options: {content: 'hoge'},

	// 初期化
	_init: function() {},

	// disableメソッドを上書き
	disable: function() {
		// 何らかの処理
		～
		// 継承元のdisableを呼び出し
		$.Widget.prototype.disable.call(this);
	},

	// enableメソッドを上書き
	enable: function() {
		// 何らかの処理
		～
		// 継承元のenableを呼び出し
		$.Widget.prototype.enable.call(this);
	}
});

disable時に付与されるクラス名(‘名前空間名-ウィジェット名-disabled’)の接頭辞は、ウィジェット定義中、this.widgetBaseClassで参照可能。任意の文字列に書き換えることもできます。

$.widget('test.myWidget', {

	// デフォルト設定
	options: {content: 'hoge'},

	// 初期化
	_init: function() {
		this.widgetBaseClass = 'fuga';
	}
});

// ウィジェット呼び出し
var widget = $('#myWidget').myWidget({content: 'fuga'});

// 無効化
widget.myWidget('disable');
console.log(widget.attr('class')); // 'fuga-disabled ui-state-disabled'

また、optionsのdisabledプロパティで、ウィジェットの現在の状態を知ることができます。

$.widget('test.myWidget', {

	// デフォルト設定
	options: {content: 'hoge'},

	// 初期化
	_init: function() {
		console.log(this.options.disabled); // false;
	}
});

// ウィジェット呼び出し
var widget = $('#myWidget').myWidget({content: 'fuga'});

// 無効化
widget.myWidget('disable');
console.log(widget.myWidget('option', 'disabled')); // true

$.Widget.prototypeのそれぞれのメソッドでは、上記(クラス名とoptions.disabledの値)の切り替えしかしていません。状態の変化によって具体的にどのようにするかは、当然のことながら任意で実装する必要があります。

ウィジェットの継承

$.widget()で第二引数に継承したいウィジェットのコンストラクタを渡すことで実現できます。

// 親ウィジェット
$.widget('test.myWidget', {

	// デフォルト設定
	options: {content: 'hoge'},

	// 初期化
	_init: function() {
		this.options.content = 'fuga';
	},

	_parentFunc: function() {
		console.log('piyo');
	}
});

// 子ウィジェット
$.widget('test.myWidgetJr', $.test.myWidget, {

	// デフォルト設定
	options: {},

	// 初期化
	_init: function() {
		// 継承したoptionsにアクセス
		console.log(this.options.content); // 'hoge'

		// 継承したメソッドを呼び出し
		this._parentFunc(); // 'piyo'

		// 継承元のメソッドを呼び出し
		$.test.myWidget.prototype._init.call(this);
		console.log(this.options.content); // 'fuga'
	}
});

余談

メソッドを上書きする時、prototypeのメソッドをインスタンスを引数にしたcall()で呼び出す記述は、バージョン1.9で追加される予定の_super()によって

this._super('_init');

みたいに簡潔に書けるようになるみたいです。
前述のdestroyやenable / disableを上書きする部分も同様ですね。

(参考： jQuery UI Widget Factory #19)

とりあえず

ウィジェットの作り方に関してはこんなところでしょうか。…多分。
次回は実際に何かテキトーなウィジェットを作ってみたいと思います。

参考にさせて頂いたサイト(順不同)

・ jQuery UI (英語サイト)
・ jQuery UI の プラグイン定義関数 $.widget を使ってみる – Cyokodog :: Diary
・ jQuery UIの$.widgetがOOPしてた – zudolog
・ Understanding jQuery UI widgets: A tutorial – Hacking at 0300 (英語サイト)
・ jQuery UI Widget Factory (英語サイト)

関連記事