我从设备中获取了联系人,但它们完全列在一个控件中。我必须在复选框控件中的循环结构中列出它们。以下是我的剧本
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("welcome");
var options = new ContactFindOptions();
options.filter="";
options.multiple=true;
var fields = ["*"];
navigator.contacts.find(fields, onSuccess, onError, options);
}
function onSuccess(contacts)
{
alert('Total Contacts '+contacts.length);
for (var i = 0; i < contacts.length; i++)
{
contacts = contacts.sort(compare);
if(contacts[i].phoneNumbers)
{
document.getElementById("demo").innerHTML += "</br>" + contacts[i].displayName;
for( var j = 0; j < contacts[i].phoneNumbers.length; j++)
{
document.getElementById("demo").innerHTML += " - " +contacts[i].phoneNumbers[j].value;
// document.getElementById("demo").innerHTML += " - " +contacts[i].phoneNumbers[j].type;
}
}
}
}
function compare(a,b) {
if (a.displayName > b.displayName)
return 1;
if (a.displayName < b.displayName)
return -1;
// return 0;
}
function onError()
{
alert("Some Error Occured");
}
</script>
以下是html正文结构
<body>
<h1>Example</h1>
<p >Create Contact</p>
<p id="demo"> </p><p id="demo_no">no.</p></body>
请帮我解决这个问题..提前致谢
答案 0 :(得分:1)
将您的演示元素更改为 jQM controlgroup :
<h1>Example</h1>
<p >Create Contact</p>
<div id="demo" data-role="controlgroup"></div>
然后在你的脚本中,
您只需要对联系人排序一次,因此请在for循环之外移动排序调用。
对于每个电话号码的联系人,创建一个复选框输入和一个标签。
最后将所有复选框和标签添加到控制组的 container 元素,告诉jQM enhance 复选框,以及刷新控制组:
var html = '';
contacts = contacts.sort(compare);
for (var i = 0; i < contacts.length; i++)
{
if(contacts[i].phoneNumbers)
{
html += '<input type="checkbox" name="chk' + i + '" id="chk' + i + '">';
html += '<label for="chk' + i + '">' + contacts[i].displayName;
for( var j = 0; j < contacts[i].phoneNumbers.length; j++)
{
html += " / " + contacts[i].phoneNumbers[j].value;
}
html += "</label>";
}
}
$("#demo").controlgroup("container").empty().append(html);
$("#demo").enhanceWithin().controlgroup( "refresh" );
正在使用 DEMO