では、ウィジェット定義の基本的な流れが頭に入ったところで、実際に簡単なウィジェットを作ってみることにしましょう。

ここでは「mywidget」というウィジェットを定義してみます。下のリスト欄にスクリプトを掲載しておきました。これを記述し、「mywidget.js」というファイル名で保存してください。

ここでは、"mobile.mywidget"という名前でウィジェットを定義しています。これにより、$.mobile.mywidgetとしてウィジェットが組み込まれるようになります。

optionsには、background、color、borderという３つの値を用意しています。これらはそれぞれ背景、テキスト、ボーダーの色を指定するものです。

肝心の、ウィジェット作成の処理は、_createの関数定義で行なっています。ここでは、以下のようにしてウィジェット化するタグのDOMオブジェクトを取り出しています。

for(var i =0; i < this.element.length; i++){
    var target = this.element[i];

this.elementから順に要素を取り出し、これを操作していけばいいわけですね。ここでは、取り出したオブジェクトのstyle.color/style.background/style.borderの値をそれぞれ設定しています。こんな具合に、オブジェクトのスタイルを変更するなどしてウィジェットの表示を作っていくことになります。

ここでは各種の属性を変更していますが、例えば背景色を設定している部分を見てみましょう。以下のようになっていますね。

target.style.background = this.options.background;

this.optionsの値を、ターゲットのstyle.backgroundに設定しています。このthis.optionsは、このウィジェット定義にあるoptionsが初期値として設定されているもので、もしウィジェット作成時に設定が用意されていればその値が保管されています。この値を取り出し、ウィジェットの対象となるDOMオブジェクトの各種プロパティなどに設定していけば良いわけです。

また、ここでは「clean」という関数も用意しておきました。これは、_createで設定したプロパティの値をすべて空の文字列に戻すことで表示を初期状態に戻すものです。やはり、_createと同様に、this.elementから順にオブジェクトを取り出し、そのプロパティを操作します。このようにして、基本的には_createと同じ方法でウィジェットのオブジェクトを操作することができます。

※mywidget.jsのスクリプト

(function($) {  
	$.widget( "mobile.mywidget", $.mobile.widget, {  
		options: {  
			background: '#ffffff',
			color: '#666666',
			border: '#aaaaaa'
		},  
  
		_create: function(){  
			for(var i =0; i < this.element.length; i++){
				var target = this.element[i];
				target.style.background = this.options.background;
				target.style.color = this.options.color;
				target.style.border = "solid 1px " + this.options.border;
				target.style.padding = '5px';
			}
		} ,
		
		clear: function(){
			for(var i =0; i < this.element.length; i++){
				var target = this.element[i];
				target.style.background = "";
				target.style.color = "";
				target.style.border = "";
			}
		}
	});  
})(jQuery);