jQuery MobileでマークアップHTMLを動的に作成するときに使うメソッドまとめ

| 2件の返信

普通jQuery Mobileを利用するときは、枠はhtmlで書きます。
例:JQueryのlistviewの使い方

<ul data-role="listview">
 <li><a href="acura.html">Acura</a></li>
 <li><a href="audi.html">Audi</a></li>
 <li><a href="bmw.html">BMW</a></li>
</ul>

なかなか必要に迫られないかもしれないけど、上記のコードをjavascriptで動的に作成したいときは以下のようにします。

$('<ul/>')
 .attr("data-role","listview")
 .append($('<li><a href="acura.html">Acura</a><li/>')
 .append($('<li><a href="audi.html">Audi</a><li/>')
 .append($('<li><a href="bmw.html">BMW</a><li/>');

でもこれだけだと、CSSのスタイルが適用されません。
上記に加えてlistview()メソッドを呼ぶとスタイルが適用されます。

$('<ul/>')
 .attr("data-role","listview")
 .append($('<li><a href="acura.html">Acura</a><li/>')
 .append($('<li><a href="audi.html">Audi</a><li/>')
 .append($('<li><a href="bmw.html">BMW</a><li/>');
 .listview('refresh'); // <- ここ!

※2013/10/25追記
K.Ueda 様よりの情報で、listviewメソッドに引数refreshを入れるとエラーが出て動かなかったとのこと。
その場合は下記のように一旦引数なしでlistviewメソッドを読んでから続けて引数ありのlistviewメソッドを呼ぶと良いようです。

$('要素').listview().listview('refresh');

 

jquery mobileには上記のようなメソッドがいくつかあります。
結構公式ページでもその辺が全て一箇所でまとまってないので、まとめておきます。

あらゆる要素に対して

$('</div>').appendTo( ".ui-page" ).trigger( "create" ); // div 以外に対しても可

navbarに対して

公式ドキュメント内には使い方が載ってないのですが、できてしまいます。非公式なのかな。。

$('<div data-role="navbar"/>')
    .append($('<ul/>')
        .append($('<li><a href="a.html">One</a></li>'))
        .append($('<li><a href="b.html">Two</a></li>'))
    ).navbar(); // <- ここ!

select に対して

$("#selectfoo").selectmenu("refresh") ;

チェックボックスに対して

$("input[type='checkbox']").checkboxradio("refresh");

ラジオボタンに対して

$("input[type='radio']").checkboxradio("refresh");

スライダーに対して

$("input[type='range']").slider("refresh");

参考

http://jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html

jQuery MobileでマークアップHTMLを動的に作成するときに使うメソッドまとめ」への2件のフィードバック

  1. K.Ueda (@kueda123)

    情報をまとめていただいて助かります。ただ、私の環境(JQM v1.2.1)では、listviewを”refresh”の引数付で呼び出すとエラーになります。引数無しなら、エラーを回避され表示も改善します。しかし、同一ページを再度表示させるとrefreshの効果が無くなります。
    結局、次の様に書けば、何度でもJQM Widgetsで表示される様になりました。ご参考まで
    $(”).listview().listview(‘refresh’);

    返信
    1. cmutoh

      お読みいただきありがとうございます。お役に立てて良かったです。少し前の事でうろ覚えですが、私もこのへんは色々とうまくいかないことがあり試行錯誤をした覚えがあります。何かの時には参考にさせていただきます。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>