では、<a>タグではなく、
<input type="button">の初期化処理を行うにはどうすればいいのでしょうか。
buttonMarkupは<a>タグのレンダリングをするのに使われるメソッドです。普通のプッシュボタンは、buttonというメソッドが用意されていました。これを使えばいいだろう……と思うでしょう。
では、先ほどのスクリプトを以下のように書き換えてみましょう。やってみればわかりますが、これでは全くボタンの表示は変わらないのです。
$(document).bind("pagecreate", function(){
$('a').button({ corners: false, theme:"b"});
});何が問題なのか？ それは、「プッシュボタンはjQuery Mobileによってレンダリングが行われる」という点です。先ほどの<a>タグは、そのままではボタンにレンダリングされません。つまり放っておかれるのです。そこで、
pagecreateの際にスクリプトでレンダリングをしてあげた、というわけです。
では、プッシュボタンのように、「jQuery Mobileが自動的にウィジェットをレンダリングする」というものはどうすればいいのでしょうか。これは、発想を根本的に変える必要があります。つまり、スクリプトでレンダリングを行うのではなく、「レンダリングの際に用いられる諸設定をあらかじめ操作しておく」のです。
jQuery Mobileは、自身の中に各ウィジェット類に関する細々とした初期設定情報を保持しています。そしてページをロードした時、それらの設定情報を元にレンダリングを行なっているのです。したがって、この初期設定情報をあらかじめ操作してやることが出来れば、それにあわせてカスタマイズされたウィジェットがレンダリングされることになります。
このウィジェット類の初期設定は、
$.mobileオブジェクトの中に、ウィジェットの種類ごとにまとめられています。例えば、プッシュボタンの初期設定は、「
button」オブジェクトとして用意されています。
あるオブジェクトを元に新しいオブジェクトを生成する場合、JavaScriptはそのオブジェクトの「
prototype」を引き継いでいきます。この
prototypeの中に、ウィジェットの設定があるのです。初期設定は「
options」というプロパティにまとめられています。――整理すると、ウィジェットの初期設定情報は、
$.mobile.ウィジェット.prototype.options
というところにまとめられている、ということになります。この「ウィジェット」の部分に、それぞれのウィジェットの種類ごとのオブジェクトが指定されることになります。プッシュボタンならば、
$.mobile.button.prototype.optionsとなるわけです。