jQuery Mobile - 返回（硬件）按钮在应用程序中不起作用

我是jQmobile的新手，并且一直关注jqMobile网站上的示例。使用多页面模板格式，我试图让后退按钮工作（硬件按钮）。但是，当我在第二页上时，按（硬件）返回按钮，它只是退出应用程序，而不是返回到第一页。下面是我使用的示例代码：jQuery Mobile - 返回（硬件）按钮在应用程序中不起作用

<head> 
<title>PhoneGap</title> 
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> 
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 

<script type="text/javascript"> 
//This is your app's init method. Here's an example of how to use it 
function init() { 

    document.addEventListener("deviceready", onDR, false); 

} 

function onDR(){ 
    //document.addEventListener("backbutton", backKeyDown, true); 
    navigator.notification.alert("PhoneGap is working"); 
    //boot your app... 

} 

function backKeyDown() { 

    // do something here if you wish  
} 



$(document).bind("mobileinit", function(){ 
    $.mobile.touchOverflowEnabled = true; 
    $.mobile.defaultPageTransition = 'fade'; 
}); 



</script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head>

<!-- Start of first page --> 
<div data-role="page" id="foo"> 

    <div data-role="header"> 
     <h1>Foo</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 


<!-- Start of second page --> 
<div data-role="page" id="bar"> 

    <div data-role="header"> 
     <h1>Bar</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>  
     <p><a href="#foo">Back to foo</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
</body>

感谢，提前对所有的答复。

来源

2011-12-14 azsl1326

我不认为这是有可能改变智能手机的硬件按钮的行为，特别是与JavaScript ..和BTW ..哪里是你的JavaScript？你只发布标记... – MilkyWayJoe 2011-12-14 20:25:42

你在用什么设备？ – 2011-12-14 21:36:56

有可能您的设备不支持hashchange事件。

您可以检查与被用于更新哈希hashchange事件设备的兼容性：

if ("onhashchange" in window) { 
    //... 
}

来源：jQuery - hashchange event

从jQuery Mobile的文档：

独立于点击发生的哈希变化，例如当用户点击了后退按钮，通过使用Ben Alman的hashchange 特殊事件插件（包含在jQuery Mobile中）绑定到窗口对象的hashchange事件进行处理。当发生散列更改（以及第一页加载时），hashchange事件处理程序将发送location.hash到$ .mobile.changePage（）函数，该函数反过来加载或显示引用的页面。

来源：http://jquerymobile.com/test/docs/pages/page-navmodel.html

来源

2011-12-14 21:58:02 Jasper

jQuery Mobile - 返回（硬件）按钮在应用程序中不起作用

回答

相关问题