如何使用 phonegap 作为复选框列表显示从 android 设备获取的联系人？

Question

I have fetched the contacts from device but they are completely listed out in a single control. I have to list out them in looping structure in checkbox control. Below is my script

<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>

And below is the html body structure

<body>
<h1>Example</h1>
<p >Create Contact</p>
<p id="demo"> </p><p id="demo_no">no.</p></body>

Please help me out for this.. Thanks in advance

Answer 1

将您的演示元素更改为 jQM controlgroup:

<h1>Example</h1>
<p >Create Contact</p>         
<div id="demo" data-role="controlgroup"></div>

然后在你的脚本中，

您只需对联系人进行一次排序，因此将排序调用移到 for 循环之外。

为每个有 phone 个号码的联系人创建一个复选框输入和一个标签。

最后将所有的复选框和标签添加到控制组的container element, tell jQM to 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" );

Working DEMO

如何使用 phonegap 作为复选框列表显示从 android 设备获取的联系人？

How to display the fetched contacts from android device using phonegap as a checkbox list?

android

jquery-mobile

phonegap-plugins