如何使用JqueryMobile动态添加列表视图?

时间:2012-07-22 13:01:22

标签: jquery jquery-mobile

我正在开发一个应用程序,我正在使用jQuery mobile for UI。是否有任何机构知道如何使用js动态实现列表视图。静态代码段如下:

<ul data-role="listview" data-theme="g"> 
      <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>

4 个答案:

答案 0 :(得分:1)

你可以这样做:

<ul data-role="listview" data-theme="g" id="lstSample">

</ul>

在js

    for(var i=0;i<urs_source.length;i++){
        $("#lstSample").append($("<li><a href='" + urs_source[i].link + "'>" + urs_source[i].text  + "</a></li>"));
}

$('#lstSample').listview('refresh');

最后,您需要刷新列表视图。

答案 1 :(得分:0)

<ul data-role="listview" data-theme="g" id="mylist"> 
      <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>

$("#mylist").css("display","none");
$("#mylist").css({display:"none", backgroundColor:"red"});

这应该有所帮助。

答案 2 :(得分:0)

所以你想在你的ui元素中添加li元素吗?

如果是这样,你可以这样做:

<ul data-role="listview" data-theme="g" id="mylist"> 
      <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>

function addlist(link, text) {
$("#mylist").append("<li><a href='" + link + "'>" + text + "</a></li>");
}

然后你可以添加调用这个函数的列表项:

addlist("ford.html", "Ford");

否则我不明白你的问题: - (

答案 3 :(得分:0)

使用JS向列表中添加元素后;你需要在它上面调用refresh让JQM增强它。

$('.selector').listview('refresh');