2011-12-14 11 views
2

jQmobileを初めて使用し、jqMobileサイトの例に従っています。複数ページのテンプレート形式を使用して、戻るボタンを動作させようとしています(ハードウェアボタン)。しかし、2ページ目に(ハードウェア)戻るボタンを押すと、最初のページに戻るのではなく、単にアプリケーションを終了します。ここで私が使用していたサンプルコードは次のとおりです。jQuery Mobile - Back(ハードウェア)ボタンがアプリケーション内で機能しない

<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> 

感謝を、事前に、すべての返信のために。

+0

私は...特別にJavaScriptを使用して、スマートフォンのハードウェアボタンの動作を変更することはできないと思うと、ところで...どこのjavascriptは何ですか?あなたはマークアップを投稿しただけです... – MilkyWayJoe

+1

どのデバイスを使用しています ? –

+0

Galaxy SIIとエミュレータでテスト済みです。私はOPにjavascriptを追加しました。 – azsl1326

答えて

1

ご使用のデバイスがhashchangeイベントをサポートしていない可能性があります。

あなたはハッシュを更新するために使用されるhashchangeイベントにお使いのデバイスの互換性を確認することができます。

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

出典:jQuery - hashchange event

jQueryのモバイルドキュメントから:

ユーザーがクリックしたときなど、クリックとは独立して発生するハッシュの変更。 戻るボタンは、Ben Almanのhashchange 特別イベントプラグイン(jQuery Mobileに含まれています)を使用してウィンドウオブジェクトにバインドされたhashchangeイベント によって処理されます。ハッシュ変更 が発生すると(最初のページが読み込まれたときも)、hashchangeイベント ハンドラはlocation.hashを$ .mobile.changePage() 関数に送信し、参照されたページをロードまたは公開します。

出典:http://jquerymobile.com/test/docs/pages/page-navmodel.html

+0

とjavascriptコードを追加しました。私はエミュレータと私のGalaxy SIIの両方でテストしましたが、バックボタンは私が期待していたように動作していないようです。 – azsl1326

関連する問題