如何在JQM中以编程方式创建列表视图

时间:2013-03-29 13:43:05

标签: html jquery-mobile jquery jquery-mobile-listview

我有一个来自ajax的数组,我需要创建jQuery Mobile Listview。我没有找到这方法,所以有可能吗?

1 个答案:

答案 0 :(得分:8)

以下是一个有效的例子:http://jsfiddle.net/Gajotres/SS7vJ/

另一个数组示例:http://jsfiddle.net/Gajotres/yHHWQ/

$(document).on('pagebeforeshow', '#index', function(){       
    $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
    $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
    $('#test-listview').listview().listview('refresh');
});

另外不要忘记调用.listview(两次,第一次没有刷新参数,第二次使用刷新参数。没有它你会收到这个错误:

  

无法在初始化之前调用listview上的方法

如果您想了解有关jQuery移动设备如何处理动态添加内容及其标记的更多信息,请查看此 ARTICLE ,为了透明它是我的个人博客,或者找到 HERE