1

我使用 phonegap 和 jquery mobile 开发的应用程序有一个奇怪的问题：当应用程序启动时，没有应用样式，但是如果我在应用程序中浏览然后返回索引，我可以看到样式应用得很好。我应该改变什么？这是我的 index.html 代码：

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 
var intervalloRefresh;
var intervalloRisultati;
var iter=0;

// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// Cordova is ready to be used!
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> --> 
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
    #pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page"> 
      <div data-role="content"> 
        <div id="pulsantiera" data-role="controlgroup" data-type="vertical">
            <!-- <a href="javascript:void(0)" data-role="button" onclick="capturePhoto();">Allineamento</a> -->
            <a href="javascript:void(0)" data-role="button" onclick="allinea();">Allinea</a>
            <a href="percorsi.html" data-role="button">Percorsi</a>
            <a href="programma.html" data-role="button">Programma</a>
            <a href="video.html" data-role="button">Info</a>
            <a href="javascript:void(0)" data-role="button" onclick="capturePhoto();">Foto</a>
            <a href="chat.html" data-role="button">Chat</a>
            <a href="javascript:void(0)" data-role="button" onclick="vote('y');">Y</a>
            <a href="javascript:void(0)" data-role="button" onclick="vote('a');">A</a>
            <a href="javascript:void(0)" data-role="button" onclick="vote('n');">N</a>
        </div>
        <div style="width:74%;height:100%;margin-left:26%"  >   
            <h1 id="title">PATH</h1>
            <div id="content">
                <img src="images/IT_MAPPA.jpg">
            </div>
            <div id="vote" stle="display:none"></div>
        </div>
      </div>
 </div>

</body>
</html>
4

1 回答 1

0

您是否尝试过切换 CSS 和 JS 文件的位置？

如果从上到下解析：

1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded

因此，当 JQM 启动时，JQM 小部件所需的 CSS 并不存在。

尝试切换到：

1) all CSS 
2) jquery 
3) jquery mobile

还要检查JQM 页面模板。CSS 总是排在第一位。

于 2012-10-24T09:11:12.053 回答