我创建了具有默认主题的 Listview 的项目。我的配置如下所述。
- index.html文件，其中完成了对 css、js 文件的所有导入，包括 cordova-2.0.0.js 和其他需要的东西。Index.html文件包含我的登录页面。
现在，登录后，我转到 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>© 2012.</h4> </div>
请注意，我没有在此处包含头文件。home.html 文件中只有这么多代码。（请注意，因为它是 HTML，所以我无法在我配置了 data-role="page" 的地方显示我的父 div 标签）
- 现在，所有主题都在应用，只是箭头没有出现，而是出现了一个灰色点，如下图所示。
任何人都可以解释为什么会这样吗？我已经检查了另一个项目，并且我拥有所有的导入。
下面是我的 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;
}
