可折叠集一次展开多个ListView [英] Collapsible-Set Expand Multiple ListView At A Time
本文介绍了可折叠集一次展开多个ListView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是我使用" collapsible-set "一次只打开一个列表视图.但是我的代码无法正常工作.
My problem is I use "collapsible-set" to make only one list view open at a time. But my code does not working.
.html
<div data-role="page" id="personalPage">
<!-- HEADER -->
<div data-role="header" id="personalHeader" data-position="fixed">
<h3>Personal Information</h3>
</div>
<!-- CONTENT -->
<div data-role="content" style="padding: 15px;" id="personalContent">
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b" data-collapsed="false">
<h3>Assured Details</h3>
<ul data-role="listview" data-inset="true">
<li>
<h2>Assured ID:</h2>
<label for="text" id="assuredID">-</label>
</li>
<li>
<h2>Name:</h2>
<label for="text" id="assName">-</label>
</li>
<li>
<h2>Birth Date:</h2>
<label for="text" id="assBirth">-</label>
</li>
<li>
<h2>Address:</h2>
<label for="text" id="assAddr" class="wrap">-</label>
</li>
<li>
<h2>Mobile Number:</h2>
<label for="text" id="assMob">-</label>
</li>
<li>
<h2>Home Number:</h2>
<label for="text" id="assHome">-</label>
</li>
<li>
<h2>FaxNumber:</h2>
<label for="text" id="assFax">-</label>
</li>
<li>
<h2>Driver License:</h2>
<label for="text" id="assDriveLicen">-</label>
</li>
</ul>
</div>
<div id="assCar">
</div>
</div>
</div>
<!-- FOOTER -->
<div data-role="footer" data-position="fixed" id="personalFooter">
<div data-role="navbar" id="navbar">
<ul>
<li><a href="#homePage" id="Home" data-icon="home" data-iconpos="top">Home</a></li>
<li><a href="#policyPage" id="Policy" data-icon="bars" data-iconpos="top">Policy</a></li>
<li><a href="#" id="Personal" data-icon="info" data-iconpos="top" class="ui-btn-active ui-state-persist">Personal</a></li>
<li><a href="#historyPage" id="History" data-icon="bars" data-iconpos="top">History</a></li>
</ul>
</div>
</div>
</div>
.js(我将汽车列表视图动态添加到"可折叠设置"中.汽车详细信息是从数据库中检索的.)
.js (I dynamically append a car listview into the "collapsible-set". The car details is retrieve from the database.)
function updatePersonalCarUI(tel) {
//alert("Personal: Update Car");
for(var i = 0; i < tel.length; ++i) {
$("#assCar").append('' +
'<div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b">' +
'<h3>Car#' + (i+1) + '</h3>' +
'<ul data-role="listview" data-inset="true">' +
'<li>' +
'<label for="text"><b>Name:</b></label>' +
'<label for="text" class="wrap"><i> ' + tel[i].CNAME + '</i></label>' +
'</li>' +
'<li>' +
'<label for="text"><b>License Plate Number:</b></label>' +
'<label for="text"><i> ' + tel[i].CLICENPLATENUMBER + '</i></label>' +
'</li>' +
'<li>' +
'<label for="text"><b>VIN Number:</b></label>' +
'<label for="text" class="wrap"><i> ' + tel[i].CVINNUMBER + '</i></label>' +
'</li>'+
'</ul>' +
'</div>');
}
}
感谢您的解决方案或建议.
Thank you for your solutions or suggestions.
推荐答案
您不是将汽车附加到可折叠集合中，而是将子DIV附加到该集合中，称为"assCar".相反，您应该将汽车直接附加到可折叠集合DIV中，然后刷新可折叠集合小部件:
You are not appending your cars to the collapsible set, but rather a child DIV within the set called "assCar". Instead you should append the cars directly into the collapsible set DIV and then refresh the collapsibleset widget:
这是一个 演示 小提琴
Here is a DEMO fiddle
以下是标记和脚本:
<div id="assCarCol" data-role="collapsible-set">
<div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b" data-collapsed="false">
<h3>Assured Details</h3>
<ul data-role="listview" data-inset="true">
<li>
<h2>Assured ID:</h2>
<label for="text" id="assuredID">-</label>
</li>
</ul>
</div>
</div>
for (var i = 0; i < 2; ++i) {
$("#assCarCol").append('' +
'<div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b">' +
'<h3>Car#' + (i + 1) + '</h3>' +
'<ul data-role="listview" data-inset="true">' +
'<li>' +
'<label for="text"><b>Name:</b></label>' +
'<label for="text" class="wrap"><i> ' + i + '</i></label>' +
'</li>' +
'<li>' +
'<label for="text"><b>License Plate Number:</b></label>' +
'<label for="text"><i> ' + i + '</i></label>' +
'</li>' +
'<li>' +
'<label for="text"><b>VIN Number:</b></label>' +
'<label for="text" class="wrap"><i> ' + i + '</i></label>' +
'</li>' +
'</ul>' +
'</div>');
}
$("#assCarCol").collapsibleset("refresh").enhanceWithin();
这篇关于可折叠集一次展开多个ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
