使用jQuery Mobile ajax导航技术+ PhoneGap导航到自己

时间:2013-05-09 04:54:08

标签: jquery ajax cordova jquery-mobile

我正在开发基于jQuery Mobile和Phonegap Framework的移动应用程序。我在我的应用程序中使用jQuery Mobile的基于Ajax的导航。我指的是使用data-role =“page”的单页模板中的所有页面。

但是我遇到了一个问题。我正在使用jQuery mobile的$.mobile.changePage('#xyz');方法在页面之间导航。但问题是当我点击按钮时页面转到其他页面并再次返回我点击按钮或链接的页面。在该页面上再次显示a->b->a。我不知道发生了什么。我没有代码错误或代码问题。我在申请中提供了transition="fade"。我已尝试过所有内容,包括-webkit-backface-visibility:hidden;"$.mobile.changePage.defaults.allowSamePageTransitions = true;",但没有任何效果。我无法复制或粘贴代码。我没有这样做的许可。但如果你们能为我提供帮助,那将是一件好事。

希望大家都明白我想问你的意思。

这是我的编辑。

对于Javascript

$('#secondPage').on('pageinit',function() { jQuery('#itemlist').on('tap',function(){$.mobile.changePage('#homePage',{transition:"fade"});}); });

和HTML

<body>
<div data-role="page" id="firstPage">
<div data-role="header" data-position="fixed" data-theme="c">
</div>
<div data-role="content" data-theme="c">
<a data-role="button" href="#" data-theme="c" data-corners="false" id="itemlist">HomePage</a>
</div>
<div data-role="footer" data-theme="c">
</div>
</div>
<!- ------------------------------------------------------------------------------- ->
<div data-role="page" id="homePage">
<div data-role="header" data-theme="c">
</div>
<div data-role="content" data-theme="c">
</div>
<div data-role="footer" data-theme="c">
</div>
</div>
</body>

1 个答案:

答案 0 :(得分:1)

我认为连续两个连续发生的事件有问题:

  1. 点击事件:页面更改为#homePage

  2. 点击事件:页面更改回#firstPage

  3. 虽然我没有在代码中看到错误,但这可能是浏览器出现意外行为的错误。需要考虑的事项:

    • 尝试从链接中删除href="#"
    • 尝试删除javascript并将href="#homePage"放入您的链接中。
    • 尝试将JS事件从tap更改为clickreturn false