Question

我被困在使用Phonegap + jquery Mobile，当我移除Jquery Mobile时，我的页面正常工作移动电话差距API也正常工作，但只要我在其中包含Jquery Mobile。应用程序开始在中心显示灰色点，没有内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <link rel="stylesheet" href="jquery/jquery.mobile-1.4.2.min.css"> 
    <script src="jquery/jquery-1.10.2.min.js"></script>
    <script src="phonegap/cordova-2.7.0.js"></script>  
    <script src="jquery/jquery.mobile-1.4.2.min.js"></script>  

    <script src="js/index.js"></script>  
   <title>practice app</title>
</head>
<body>
 <div data-role="page" id="home">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>TestPage</h1>
      </div>
    <form class="ui-filterable">
          <input id="myFilter" data-type="search">
    </form>
    <ul data-theme='d' data-role="listview" data-filter="true" data-input="#myFilter" data-inset="true">
    <li>213</li>
    <li>213</li>
    <li>213</li>
    </ul>
    <p id="geolocation">Finding geolocation...</p>
    <p id="deviceProperties">Loading device properties...</p>
 </div>
 <script>
    app.initialize();
 </script>  
</body>
</html>

和Javascript代码是

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    var self = this;
    document.addEventListener('deviceready', function() { self.onDeviceReady(); }, false);
    // document.addEventListener('DOMContentLoaded', function() { self.onDocumentLoad(); }, false);

},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
    var self = this;
    //Device is ready
    var element ;
   //alert is working and showing the device name
    alert(device.name);
    element = document.getElementById('deviceProperties');        
    element.innerHTML = 'Device Name: '     + device.name     + '<br />' + 
                        'Device Cordova: '  + device.cordova + '<br />' + 
                        'Device Platform: ' + device.platform + '<br />' + 
                        'Device UUID: '     + device.uuid     + '<br />' + 
                        'Device Model: '    + device.model     + '<br />' + 
                        'Device Version: '  + device.version  + '<br />'; 


    navigator.geolocation.getCurrentPosition(onSuccess_gps, onError_gps);               
        function onSuccess_gps(position) {
            var element = document.getElementById('geolocation');
            element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                                'Longitude: '          + position.coords.longitude             + '<br />' +
                                'Altitude: '           + position.coords.altitude              + '<br />' +
                                'Accuracy: '           + position.coords.accuracy              + '<br />' +
                                'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                                'Heading: '            + position.coords.heading               + '<br />' +
                                'Speed: '              + position.coords.speed                 + '<br />' +
                                'Timestamp: '          +                                   position.timestamp          + '<br />';
        } 
        // onError Callback receives a PositionError object 
        function onError_gps(error) {
            alert('code: '    + error.code    + '\n' +
                    'message: ' + error.message + '\n');
        } 
},

onDocumentLoad : function() { 
}

};

Answer 1

您是否尝试在 phonegap脚本之前加载jQuery Mobile脚本，就像这样？

<script src="jquery/jquery-1.10.2.min.js"></script> <script src="jquery/jquery.mobile-1.4.2.min.js"></script> <script src="phonegap/cordova-2.7.0.js"></script>

Jquery Mobile不使用Phonegap / Cordova

1 个答案: