Phonegap 默认主题不显示带有箭头符号的 ListView

Question

我创建了具有默认主题的 Listview 项目。我的配置如下所述。

1. index.html 文件，其中完成了对 css、js 文件的所有导入，包括 cordova-2.0.0.js 和其他需要的东西。 Index.html 文件包含我的登录页面。

2. 现在，登录后我会转到 home.html 页面，其中我的列表视图配置如下：

   <div data-role="header" data-theme="b">
       <h1>Home Screen</h1>
   </div>
   
   <div data-role="content">    
     <ul data-role="listview" data-theme="c">
       <li><a href="profile.html"><img src="images/profile.png" alt="Profile">My Profile</a></li>
       <li><a href="courses.html"><img src="images/courses.jpg" width="189" height="189" alt="Courses">My Courses</a></li>
       <li><a href="contactsList.html"><img src="images/contact.jpg" width="160" height="160" alt="Contacts">My Contacts</a></li>
       <li><a href="mapPage.html"><img src="images/map.png" width="215" height="215" alt="Map">My Map</a></li>
     </ul>
   </div>
   
   <div data-role="footer" data-theme="b">
       <h4>&copy; 2012.</h4>
   </div>
   

请注意，我没有在此处包含头文件。 home.html 文件中只有这么多代码。 （请注意，因为它是 HTML，所以我无法在我配置 data-role="page" 的位置显示我的父 div 标签）

1. 现在，所有主题都在应用，只是箭头没有出现，而是出现了一个灰色点，如下图所示。

谁能解释一下为什么会这样？？我已经检查了另一个项目，并且我拥有所有的导入。

下面是我的 index.html 导入：

<link rel="stylesheet" href="styles/custom.css" />

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

<script src="js/jquery-1.8.3.min.js"></script>

<!-- <script src="js/jquery-mobile-1.2.0.min.js"></script> -->
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>

编辑

我的 CSS custom.css 如下

/* CSS Document */

#container0 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x:hidden;
    border: 1px solid black;
}

#div0 {
    width: 100%;
    height: 100%;
    position: absolute;
}

#div1 {
    width: 100%;
    position: absolute;
    left: 100%;
    height: 100%;
}

/*#footer {
    margin-top:'10px';
}*/

button {
    display:block;
    text-align:center;
    margin:0 auto;
    width:100%;
    height:2em;
}

.loginBtn {
    width:100%;
}

.info {
    border:1px solid black;
    background:#eeeeff;
    margin:5px;
    padding:5px;
}


/* Map CSS Start */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
    width:520px;
  height: 900px;
}

/*@media print {*/
@media all and (orientation: landscape) {
  html, body {
    height: auto;
  }

  #map_canvas {
    width: 950px;
    height: 480px;
  }
}
/* Map CSS End */

.ui-content h2 {
    text-align:left;
    padding:0px;
    padding-left:10px;
    margin-bottom:10px;
}

.ui-content h4 {
    padding: 0px;
    padding-left:10px;
    margin-bottom: 5px;
}

Answer 1

在适当的地方使用上面的 jquery 文件并在锚标记之后尝试这个

<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>

Answer 2

试试这个：

<link rel="stylesheet" href="custom.css" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>

编辑：

我已经解决了本地 jquery.mobile-1.2.0.min.css 文件。

首先从这个链接复制这张图片Arrow Icon

你会得到名为icons-18-white.png的图片。

将此图片保存到www/images/icons-18-white.png 路径中。

就是这样。

它对我有用。

谢谢。