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 に答える