在javascript中使用jQuery mobile css

我使用手机间隙检索手机的联系人，并希望通过使用jquery mobile在列表视图中显示名称。但没有被施加的CSS而执行此代码在javascript中使用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的得到应用到第一名存实亡

enter image description here

来源

2012-11-25 akshay1728

首先，你必须在你的代码一些错误。

添加列表元素的方式不正确。您正在为每个元素联系人元素添加listview。所以首先创建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>');

这仍然是不够的。

当ListView的填充必须刷新它的CSS是这样的：

$（ '＃UL GET'）的列表视图（ '刷新'）;

你可以在JQM documentation找到更多关于这方面的信息。

这种说法是不打算做任何事情：

$（ '得到'）列表视图（）;

你需要把它解决的实际UI元素，因为得到的是它的ID应该是这样的：

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

来源

2012-11-25 13:09:42 Gajotres

在javascript中使用jQuery mobile css

回答

相关问题