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