jQueryMobileのリストにリンクを追加する
jQuery Mobileのリストを動的に追加してみます。jQueryを使用して実現します。
ボタンを押すと、liが追加されるようにしています。

<script type="text/javascript">
$(function(){
  $(':button').click(function(){
    $('#listview').append("<li>サンプルリスト2</li>");
  });

});
</script>

<div class="content" data-role="content">
  <button>ボタン</button>
  <br>
  <ul data-role="listview" id="listview">
    <li data-role="list-divider">見出し1</li>
    <li><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト1</a></li>
  </ul>
</div>


ボタンを押した時にリスト追加するDEMOです。

jQueryMobileのリストをaタグで囲む
aタグで囲んでいなかったため、リストの表示(UI)がおかしいです。
aタグで囲んで表示(UI)を直してみます。

<script type="text/javascript">
$(function(){
  $(':button').click(function(){
    var $a = $("<a/>");
    $a.attr("rel","external").attr('target','_blank').attr('href','http://www.confrage.com/');
    $('#listview').append($a.html("<li>サンプルリスト2</li>"));
  });
});
</script>

<div class="content" data-role="content">
  <button>ボタン</button>
  <br>
  <ul data-role="listview" id="listview">
    <li data-role="list-divider">見出し1</li>
    <li><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト1</a></li>
  </ul>
</div>


ボタンを押した時にリスト追加するDEMOです。
aタグで囲んでもきれいなUIにならないのがわかります。

jQueryMobileのul要素をrefreshする
jQueryMobileでは動的に追加した要素に対してはrefreshする必要があるようです。
以下、ul要素に対してliを動的に追加した場合のrefreshの例です。

<script type="text/javascript">
$(function(){
  $(':button').click(function(){
    var $a  = $("<a>");
    var $li = $("<li>");
    $a.attr("rel","external").attr('target','_blank').attr('href','http://www.confrage.com/');
    $('#list').append($li.html($a.text("サンプルリスト2")));
    $('#list').listview('refresh');
  });
});
</script>

<div class="content" data-role="content">
  <button>ボタン</button>
  <br>
  <ul data-role="listview" id="listview">
    <li data-role="list-divider">見出し1</li>
    <li><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト1</a></li>
  </ul>
</div>
</script>




ボタンを押した時にリスト追加し、デザインもrefreshしたDEMOです。

Back to top

Information