本文介绍了Jquery Mobile不和Phonegap / Cordova一起工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我被困在使用Phonegap + jquery移动,我的页面工作正常,当我删除Jquery Mobile phonegap API也工作,但一旦我包括Jquery移动。
应用程序开始在中心显示没有内容的灰点。

I am stucked in working with Phonegap + jquery Mobile, My Page is working fine when i remove Jquery Mobile phonegap API is also working but as soon as I include Jquery Mobile in it.The Applications starts showing the grey dot in center with no content.

<!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代码为

and the Javascript code is

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() {
}

};


推荐答案

您是否尝试加载jQuery Mobile脚本

Have you tried loading the jQuery Mobile script before the phonegap script, like this?

<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一起工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-11 17:00