2015/03/08

[jQuery mobile]動的にlistviewを作成

jQuery mobileで例えばajaxで取得したコンテンツをjQueryを使って動的にlistviewにして表示したい場合はどうすればいいのだろうか?

<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(function(){
  var feed = new google.feeds.Feed("http://www.amazon.co.jp/gp/rss/bestsellers/digital-text/2293143051/ref=zg_bs_2293143051_rsslink?tag=easyofcoldfus-22");
  feed.setNumEntries(10);
  feed.load(function(result){
    if (!result.error) {
      var feed = result.feed;
      var entries = feed.entries;
      var entryLen = entries.length;
      var $listView = $('ul[data-role="listview"]');
      var $li;
      var entry;
      for(var i=0;i<entryLen;i++){
        entry = entries[i];
        $li = $('<li></li>');
        $li.text(entry.title);
        $listView.append($li);
      }
      $listView.listview('refresh');
    }
  });
  
});
</script>
<div data-role="page">
    <div data-role="header">...</div>
    <div role="main" class="ui-content">
      <ul data-role="listview">
      </ul>
    </div>
    <div data-role="footer">...</div>
</div>
上のコードは、RSSフィードを取得してそれをlistviewに表示するときの例。

listviewメソッドでrefreshパラメータを設定してコールしてあげるとlistviewができる。

参考
Listview

0 コメント:

コメントを投稿