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. リスト要素を追加する方法が正しくありません。すべての要素 contact 要素に listview を追加しています。したがって、最初に ul 要素を作成し、次にループを介して li 要素を追加します。また、JQM を使用している場合は、適切な jQuery 構文で使用してください。

その代わり：

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 に答える