单页模板中的 JQuery Mobile Ajax 导航

标签 jquery asp.net-mvc-3 jquery-mobile

我们正在使用 RC1 + ASP.NET MVC3 开发 JQuery Mobile 应用程序。 我的问题是:

是否可以使用单页面模板进行基于 Ajax 的页面导航? (正如这里提到的: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html )

我保留 $.mobile.ajaxEnabled = true;并使用简单的方法,我可以导航到应用程序的不同“单页”。我在新页面中几乎没有事件绑定(bind)(我们通常在 jQuery 的 $(document).ready())事件中完成,我尝试使用 jQueryMobile 的 pageinit、pageshow 事件以及 Ready() 事件,但是这些根本就没有被调用。

非常感谢您的帮助。

最佳答案

是的,当您的每个 <div data-role="page"> 时,支持基于 AJAX 的页面导航。元素位于不同的页面上。在导航上,jQuery Mobile 只会找到第一个 <div data-role="page">页面上的元素,将其添加到当前 DOM,然后将其动画化到 View 中。

确保您使用的是.delegate().live()绑定(bind)您的事件处理程序,因为您要绑定(bind)的元素在用户导航到它们之前并不存在于 DOM 中。这是一个例子:

$(document).delegate('[data-role="page"]', 'pageshow', function () {
    alert(this.id + ' --> pageshow');
});

如果您使用的 PushState 功能会更新 URL 以不包含哈希值(例如,将 www.mywebsite.com/index.html#/dir1/page2.html 更改为 www.mywebsite.com/dir1/page2.html )我建议在外部 .js 中编写所有自定义 JavaScript文件并将其包含在每一页上。这样,如果用户刷新浏览器或深层链接到您的网站,他们将获得您希望他们拥有的体验的所有代码。

文档:

关于单页模板中的 JQuery Mobile Ajax 导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7741888/

相关文章:

javascript - Angular JS - 单击按钮从指令加载模板 html

asp.net-mvc-3 - ASP.NET MVC3 Windows 身份验证传递到 TFS

jquery - 如何更改导航栏中按钮文本的字体大小?

jquery - 如何自定义水平 jQuery-mobile 单选按钮

javascript - 如何在页面上的某些按钮上使用 dropzone JS?

javascript - jQuery:slideToggle 和无微暂停的即时回调

javascript - 生成的 Javascript 不执行

asp.net-mvc-3 - MVC 3 Razor,具有自定义标记/部分的助手

asp.net-mvc-3 - EF4.3知道上下文是否已成功插入实体

jquery - 使用 jquery mobile 进行选择导航