覆盖backbutton android phonegap 1.8 jqmobile 1.1.0 jquery 1.7.1

时间:2012-06-14 09:13:24

标签: android jquery jquery-mobile cordova back-button

我最近开始在Phonegap 1.8 + Jquerymobile 1.1.0 + jquery 1.7.1 for Android 2.3.3中开发移动应用程序。我的问题是: 我尝试过几种方式在Android中覆盖后退按钮,但没有任何效果。我尝试过使用

document.addEventListener("backbutton", handleBackButton, false);
function handleBackButton() {//do sth}

然后我在Application.java代码中重写了它。它几乎可以工作。 我的第一页(index.html)刚刚用于登录,之后有主页(main.html),其中包含指向其他页面的链接。我已经覆盖了所有其他页面上的backbutton to goback而不是login和main。在这两个页面上,它应该在AlertDialog中单击“是”后退出应用程序。好吧,在MainPage中它显示AlertDialog,然后直接返回登录页面,甚至没有等待我的回复。在登录页面上,它只显示AlertDialog并等待我的反应。不知道为什么。这是我的一些代码。

public void onBackPressed() {

  AlertDialog.Builder builder = new AlertDialog.Builder(this);
  builder.setMessage("Are you sure you want to exit?")
  .setCancelable(false)
  .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
         public void onClick(DialogInterface dialog, int id) {
             SampleApplication.this.finish();
         }
     })
     .setNegativeButton("No", new DialogInterface.OnClickListener() {
         public void onClick(DialogInterface dialog, int id) {
              dialog.cancel();
         }
     });
  AlertDialog alert = builder.create();
  String testUrl = appView.getUrl();      

  if(testUrl.equals("file:///android_asset/www/index.html"))
  {
      alert.show();
  }
  if (testUrl.equals("file:///android_asset/www/main.html"))
  {
      alert.show();
  }
  if ((!testUrl.equals("file:///android_asset/www/index.html")) && (!testUrl.equals("file:///android_asset/www/main.html")))
  { 
      this.appView.goBack();

  }

}

1 个答案:

答案 0 :(得分:0)

你可以做的是在你想要常规后退按钮行为的所有页面上使用常规后退按钮,但为需要不同行为的页面创建一个单独的按钮,并使其看起来像普通的后退按钮: / p>

在标题栏中,只需添加一个锚点,您可以在其中添加自定义数据rel(并将其连接到您想要的任何功能),例如

<a data-rel="custombackbtn">Back</a>

然后将data-rel添加到您的常规后退按钮的样式(主题的css或常规css),这样,无论何处提到[data-rel ='back'],都要添加data-rel ='custombackbtn '例如

a[data-rel='back'], .ui-header a[data-rel='back'] {
*/Styling*/
}

更改为

a[data-rel='back'], .ui-header a[data-rel='back'], a[data-rel='backbtn'], .ui-header a[data-rel='backbtn'] {
*/Styling*/
}