jquerymobileでは、data属性にいろいろ指定しておいたHTMLを用意することで、自動的にスタイルなどが適応されて表示される。 いろんなclass属性が負荷されたspanタグがいっぱい作られる。

ajaxで取得したDOM要素を、ページに追加した場合、そのままだと、ページ初期化時に適応されたようなスタイルが適応されない。 言い換えると、ごてごてしたspanタグが付加されない。

ListViewのスタイルを適応させるには、よくある問題のようで、少し検索すると、エレメントのlistview(‘refresh’)メソッドを呼べばいいというのがhitする。

今回は、ListViewの中にあるボタン類のスタイルが適応されなかったので困って調べた。

<a data-role="button">hoge</a>

上のような単純な例の場合は、$(‘hoge‘).button() で間に合うようですが、 下のような比較的複雑なボタンだとメソッド呼出しでのスタイル適応もできない。

<div data-role="controlgroup" data-type="horizontal">
     <a data-role="button" class="favorite" data-ajax="false" data-icon="favorite" data-iconpos="notext" data-theme="c" data-inline="true">fav</a>
     <a data-role="button" class="retweet" data-ajax="false" data-icon="retweet" data-iconpos="notext" data-theme="c" data-inline="true">RT</a>
   </div>

jQuery Mobile Docs – Scripting pages

$( …new markup that contains widgets… ).appendTo( “.ui-page” ).trigger( “create” );

$(html_string_by_ajax).appendTo( ".ui-page" ).trigger( "create" );

k

これで、通常のページ初期化と同じ処理が走ってくれるようで、ajaxで取得したDOM要素を挿入した時にも、スタイルが適応されました。