0
Я застрял в работе с Phonegap + jquery Mobile, моя страница отлично работает, когда я удаляю JQuery Mobile phonegap API также работает, но как только я включу JQuery Mobile в него. Приложения начинают показывать серые точки в центре без содержимого.JQuery Mobile Не работает с Phonegap/Cordova
<!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() {
}
};