2012-05-19 33 views
0

我在程序中包含了一個頁面,該頁面使用PhoneGap Cordova顯示來自移動設備的加速器數據。我也在使用JQuery。我的問題是它沒有顯示數據。我究竟做錯了什麼?我對移動HTML和JavaScript開發非常陌生。加速器示例Phonegap不起作用

 <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>jQuery Mobile Web App</title> 
    <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/> 
    <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/> 
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> 
    </head> 
    <body> 

    <div data-role="page" id="page"> 
     <div data-role="header"> 
      <h1>Page One</h1> 
     </div> 
     <div data-role="content"> 
      <ul data-role="listview"> 
       <li><a href="#page2">Page Two</a></li> 
       <li><a href="#page3">Page Three</a></li> 
       <li><a href="#page4">Page Four</a></li> 
       <li><a href="#page6">Accelerator Example</a></li> 
       <li><a href="#page5">Alert Example</a></li> 
      </ul>  
     </div> 
     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div> 
    </div> 

    //code from other pages excluded 

    <div data-role="page" id="page6"> 
    <div data-role="header"> 
     <h1>Accelerator example 2</h1> 
    </div> 
    <div data-role="content" data-theme="b"> 
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    document.getElementById("ready").innerHTML = "false"; 
    // Wait for Cordova to load 
    // 
    document.addEventListener("deviceready", onDeviceReady, false); 

    // Cordova is ready 
    // 
    function onDeviceReady() { 
     document.getElementById("ready").innerHTML = "true"; 
     navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); 
    } 

    // onSuccess: Get a snapshot of the current acceleration 
    // 
    function onSuccess(acceleration) { 
     /*alert('Acceleration X: ' + acceleration.x + '\n' + 
       'Acceleration Y: ' + acceleration.y + '\n' + 
       'Acceleration Z: ' + acceleration.z + '\n' + 
       'Timestamp: '  + acceleration.timestamp + '\n'); 
       document.writeln(
       'Acceleration X: ' + acceleration.x + '\n' + 
       'Acceleration Y: ' + acceleration.y + '\n' + 
       'Acceleration Z: ' + acceleration.z + '\n' + 
       'Timestamp: '  + acceleration.timestamp + '\n');*/ 
      /* $("ax").html(acceleration.x); 
    $("ay").html(acceleration.y); 
    $("az").html(acceleration.z); 
    */ 
    document.getElementById("ax").innerHTML = acceleration.x; 
    document.getElementById("ay").innerHTML = acceleration.y; 
    document.getElementById("az").innerHTML = acceleration.z; 
    } 

    // onError: Failed to get the acceleration 
    // 
    function onError() { 
     alert('onError!'); 
    } 


    </script> 
    </head> 
    <body> 
    <h1>Example</h1> 
    <p>getCurrentAcceleration</p> 
    <p id="ax"></p> 
    <p id="ay"></p> 
    <p id="az"></p> 
    <p id="ready"></p> 
    </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 



</body> 
</html> 
+2

我知道這可能聽起來粗魯,但:有這個設備加速度計? – rcdmk

+0

是的我確定它有一個,但是多謝了 –

回答

3

您的示例有兩個主體標籤,第二個主體中的內容未顯示。

加速度計與jQuery Mobile和PhoneGap的一個工作示例可用here

如果您的目標是Android,項目創建嚮導AppLaud Eclipse pluginAppLaud Cloud將爲您提供完全運行的項目。

+0

我實際上使用Dreamweaver CS6將一個工作示例移植到我的手機中。兩個身體標籤?我認爲與JQuery的移動我本來應該把我所有的網頁在同一個HTML文件。同樣感謝這個例子。 –