Javascript jquerymobile动态生成列表
我使用JQuery Mobile在可折叠页面中动态生成列表 但是,如果我在带有项目列表的可折叠页面之前设置页面,CSS就会出错 用于生成列表项的代码:Javascript jquerymobile动态生成列表,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我使用JQuery Mobile在可折叠页面中动态生成列表 但是,如果我在带有项目列表的可折叠页面之前设置页面,CSS就会出错 用于生成列表项的代码: var li = domCreationService.createListItem({"data-corners":"false", "data-shadow":"false", "data-iconshadow":"true", "data-wrapperels":"div", "data-icon":"arrow-r", "dat
var li = domCreationService.createListItem({"data-corners":"false", "data-shadow":"false",
"data-iconshadow":"true", "data-wrapperels":"div", "data-icon":"arrow-r", "data-iconpos":"right",
"data-theme":"c", "class":"ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-last ui-btn-up-c"});
var outherDiv = domCreationService.createDiv({"class": "ui-btn-inner ui-li"});
li.appendChild(outherDiv);
var innerDiv = domCreationService.createDiv({"class": "ui-btn-text"});
outherDiv.appendChild(innerDiv);
var link = domCreationService.createLinkItem({href: "#dialog.html",id: "dialog", "class": "ui-link-inherit", "data-rel": "dialog"});
innerDiv.appendChild(link);
link.appendChild(domCreationService.createImg({src: ("images/" + key + ".jpg"), "class": "ui-li-thumb"}));
var obj = domCreationService.createHTag(3, {"class": "ui-li-heading"});
obj.innerHTML = name;
link.appendChild(obj);
obj = domCreationService.createPTag({"class": "ui-li-desc"});
obj.innerHTML = beskrivning;
outherDiv.appendChild(domCreationService.createSpan({"class": "ui-icon ui-icon-arrow-r ui-icon-shadow"}));
link.appendChild(obj);
这是第一页时的外观:
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-last ui-btn-hover-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#dialog.html" id="dialog" class="ui-link-inherit" data-rel="dialog">
<img src="images/picture.jpg" class="ui-li-thumb">
<h3 class="ui-li-heading">Test</h3>
<p class="ui-li-desc">Lorem Ipsum</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
但当它不是第一页时,我会看到:
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-static ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom ui-li-static ui-btn-up-c">
<div class="ui-btn-text">
<a href="#dialog.html" id="dialog" class="ui-link-inherit" data-rel="dialog">
<img src="images/picture.jpg" class="ui-li-thumb">
<h3 class="ui-li-heading">Test</h3>
<p class="ui-li-desc">Lorem Ipsum</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
请注意附加的第二个div类中的更改
以前有人经历过类似的情况吗?在这里,动态地向jQM listview添加内容需要执行:
$('#listID').listview('refresh');
在列表生成的末尾。此方法将重新设置所有新列表元素的样式。其中,动态向jQM listview添加内容需要执行:
$('#listID').listview('refresh');
在列表生成的末尾。此方法将重新设置所有新列表元素的样式。我已经尝试过了,但是CSS仍然会为类添加值,但前提是我有startpage。在我循环遍历数据并创建/附加所有项之后,我立即运行刷新,结果没有什么不同。css对齐仍处于关闭状态。我已经尝试过了,但是css仍然会为类添加值,但前提是我有起始页。在我循环遍历数据并创建/附加所有项之后,我立即运行刷新,结果没有什么不同。css对齐仍处于关闭状态。