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

时间:2015-04-09 06:08:57

标签: android jquery-mobile phonegap-plugins

  

我从设备中获取了联系人,但它们完全列在一个控件中。我必须在复选框控件中的循环结构中列出它们。以下是我的剧本

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

请帮我解决这个问题..提前致谢

1 个答案:

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