デフォルトのテーマで Listview を持つプロジェクトを作成しました。私の構成は以下で説明するようになります。
- css、js ファイルへのすべてのインポートが行われるindex.htmlファイルには、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;
}
