[英]making a list in jquery mobile using innerhtml
我正在尝试使用jquery mobile提供的样式创建列表。 当我在html文件中创建列表时,该列表包含了jquery mobile提供的样式: http : //jquerymobile.com/demos/1.0/docs/lists/lists-search.html
但是,在我的网站上,我需要根据数组中对象的数量生成列表,因此我想通过使用javascript制作html脚本并更改div的innerHTML来做到这一点。 当我这样做时,将出现一个普通列表,其中没有jquery mobile的样式。
有人能解决我的问题吗?
这是我的标记代码:
function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";
for(i=0; i<appArray.length;i++) {
app = appArray[i];
htmlString = htmlString + "<li><a id=App" + (i+1).toString() + " onclick='AppSelected(id);'>";
htmlString = htmlString + "<img src='DummyImages/" + app[1] + "' alt='Logo' class='ListAppLogo'>";
htmlString = htmlString + "<h3>"+ app[2] + "</h3>";
htmlString = htmlString + "<p>" + app[4] + ".0/5.0</p>";
htmlString = htmlString + "<input type='hidden'>" + app[0] + "</a></li>";
}
htmlString = htmlString + "</ul>";
searchList.innerHTML = htmlString;
}
使用JavaScript创建列表后,您需要确保JQuery Mobile对其进行了初始化。 使用以下代码段,其中此列表是无序列表元素的ID。
$('#thislist').listview()
另外,如果已经存在具有data-role ='listview'的无序列表,那么您将要使用带有参数'refresh'的相同的初始化程序。 这是另一个清单,其中此列表是无序列表的ID。 如果您动态地添加/删除了刷新,则需要使用刷新。
$('#thislist').listview('refresh');
我不相信解决方案,而是尝试详细解释它,因为我花了一些时间弄清楚它,但是更改应该是这样的。
原始代码:
function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";
...
searchList.innerHTML = htmlString;
}
固定代码:
function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul id='thislist' data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";
...
searchList.innerHTML = htmlString;
$('#thislist').listview();
}
这样,它使用来自jquery mobile的listview显示您的列表。
您没有使用与jQuery Mobile相同的CSS。 如果您在提供的链接上查看HTML,则会看到他们的列表项上还有其他类:
<ul data-role="listview" data-filter="true" class="ui-listview">
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li" aria-hidden="true">
<div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.