问题描述
我使用以下代码以编程方式使用phonegap更改我的应用中的页面：
I am using the following code to programmatically change the page in my app with phonegap:
$('#selection').change(function() {
alert($(this).val());
$.mobile.changePage($("#about"), "slideup");
});
当用户更改选择时，警报会触发，理论上应将它们发送到以下jquery对象。
When the user changes the selection, the alert fires off and in theory should send them to the following jquery object.
<div data-role="page" id="about" data-id="about">
<div data-role="header" data-position="fixed" data-nobackbtn="false"><h1>About Us</h1></div>
<div data-role="content">
<p>Information about the company</p>
</div>
</div>
该对象在正常链接时工作正常
The object works fine with normal linking
<span><a href="#about" data-transition="fade">About Us</a></span>
但是我不能让它在浏览器中或在手机间隙内加载程序。
But I cannot get it to load programmtically in the browser or within phone gap.
任何想法？我必须查找API一百万次。
Any ideas? I must have looked up the API a million times.
完整的HTML如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Header</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-0.9.3.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.0a1.min.css" />
<script src="js/jquery-1.4.3.min.js"></script>
<script src="js/jquery.mobile-1.0a1.min.js"></script>
<script src="js/mycustomjs.js"></script>
<script type="text/javascript">
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
function reachableCallback(reachability) {
// There is no consistency on the format of reachability
var networkState = reachability.code || reachability;
var states = {};
states[NetworkStatus.NOT_REACHABLE] = 'No network connection';
states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';
alert('Connection type: ' + states[networkState]);
}
navigator.network.isReachable('phonegap.com', reachableCallback);
}
</script>
</head>
<body>
<!-------------- INDEX PAGE ------------------------------------>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-nobackbtn="false">
<h1 header</h1>
</div>
<div data-role="content">
<p>Thank you for downloading our app</p>
<div data-role="fieldcontain">
<label for="selection" class="select">Please select an industry</label>
<select name="selection" id="selection">
<option value="choice1">choice1</option>
</select>
</div>
</div>
</div>
<!-------------- ABOUT PAGE ------------------------------------>
<div data-role="page" id="about" data-id="about">
<div data-role="header" data-position="fixed" data-nobackbtn="false">
<h1>About Us</h1>
</div>
<div data-role="content">
<p>Information about the company</p>
</div>
</div>
</body>
</html>
推荐答案
您正在使用jquery-mobile 1.0 alpha 1，看起来有一个截然不同的API。例如，changePage具有以下签名[1]：
You are using jquery-mobile 1.0 alpha 1, which it looks like had a significantly different API. changePage for example, had the following signature [1]:
function changePage( from, to, transition, back )
我认为（尽管没有尝试）你可以使用
Which I assume (didn't try, though) you could use as
$.mobile.changePage($('#home'), $('#about'), 'slide-up', false);
虽然我认为升级到1.0 beta2（最新版本）会更好，除非有与电话空白不兼容会使你无法使用它（据我所知，没有任何）。如果你升级，上面的代码应该可以正常工作。
Although I think that it would be better to upgrade to 1.0 beta2 (latest release) unless there is an incompatibility with phonegap that would keep you from using it (as far as I know, there isn't any). If you upgrade, your above code should work well.
。[1]：
这篇关于Jquery mobile，无法使用$ .mobile.changePage来更改页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！