0

我正在使用电话间隙检索电话的联系人，并希望使用 jquery mobile 在列表视图中显示姓名。但是在执行此代码时未应用 css

这是代码

<!doctype html>
   <html>
      <head>

      <meta charset="UTF-8" />

      <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />

      <script src="cordova-1.5.0.js" type="text/javascript"></script> 
      <script src="jquery.js" type="text/javascript"></script>

      <script src="contact.js" type="text/javascript"></script> 
      <script src="jquery.mobile-1.0.1.min.js" type="text/javascript"></script>

      <script >
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {

         var contactList = new ContactFindOptions(); 
         contactList.filter=""; 
         contactList.multiple=true;
         var fields = ["*"];  //"*" will return all contact fields
         navigator.contacts.find(fields,  getContactFields, onError, contactList );
         }

      function getContactFields(contacts) {
          //displaying contacts in list view
          for (var i=0; i<contacts.length; i++)
          {
              document.getElementById("temp").innerHTML+='<ul id="get" data-role="listview"><li><a href="#contact">'+contacts[i].displayName+'</a></li></ul>'
          }

          $('get').listview();
       }

       function onError(contactError) {
           alert('onError!');
       }
      </script>

这是我用于显示未应用 css 的联系人的功能

  //displaying contacts in list view

 for (var i=0; i<contacts.length; i++)
 {
     document.getElementById("temp").innerHTML+='<ul id="get" data-role="listview"><li><a href="#contact">'+contacts[i].displayName+'</a></li></ul>'
 }

 $('get').listview();

要显示的联系人姓名的 HTML 正文代码

<div data-role="content" id="temp"></div>

它的显示如下图所示。css 仅应用于名字

在此处输入图像描述

4

1 回答 1

0

首先，您的代码中几乎没有错误。

  1. 您添加列表元素的方式不正确。您正在为每个元素联系元素添加列表视图。所以首先创建 ul 元素，然后通过循环将 li 元素添加到其中。此外，如果您使用的是 JQM，请使用适当的 jQuery sintax。

反而：

document.getElementById("temp").innerHTML+='<ul id="get" data-role="listview"><li><a href="#contact">'+contacts[i].displayName+'</a></li></ul>'

利用：

$('#temp').append(<ul id="get" data-role="listview"></ul>);
$('#temp ul#get').append('<li><a href="#contact">'+contacts[i].displayName+'</a</li>');

这还不够。

  1. 填充列表视图时，您必须像这样刷新它的 css：

    $('ul#get').listview('refresh');

您可以在 JQM文档中找到有关此的更多信息。

  1. 这个声明不会做任何事情：

    $('get').listview();

您需要将其寻址到真正的 ul 元素，并且因为 get 是它的 id 它应该如下所示：

  $('#get').listview();
于 2012-11-25T13:09:42.067 回答