加速器示例Phonegap无法正常工作

时间:2012-05-19 22:23:02

标签: html5 mobile jquery-mobile cordova

我在程序中添加了一个页面,该页面使用PhoneGap Cordova显示来自移动设备的加速器数据。我也在使用JQuery。我的问题是它没有显示数据。我究竟做错了什么?我是移动HTML和JavaScript开发的新手。

     <!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>

1 个答案:

答案 0 :(得分:3)

您的示例有两个正文标记,并且未显示第二个正文的内容。

使用jQuery Mobile和PhoneGap的加速度计的工作示例here

如果您要定位Android,AppLaud Eclipse pluginAppLaud Cloud中的项目创建向导将为您配置一个完整运行的项目。