jQuery Mobile的阿贾克斯导航单页模板
我们正在开发使用RC1 + ASP.NET MVC3 jQuery Mobile的应用程序。
我的问题是:
We are developing JQuery Mobile app using RC1 + ASP.NET MVC3. My question is:
是基于Ajax的页面导航可以使用单页模板? (这里提到:
http://jquerymobile.com/demos/1.0rc1/docs/pages /page-template.html )
Is Ajax based page navigation possible using single page template? (as mentioned here: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-template.html )
我保持$ .mobile.ajaxEnabled = TRUE;并且使用简单,我能够导航到不同的单页的应用。我有几个事件绑定在新的页面(即我们通常做的$(document)。就绪())jQuery的事件,我试图用pageinit,jQueryMobile的pageshow事件以及准备就绪()事件工作要做,但这些根本不被调用。
I am keeping $.mobile.ajaxEnabled = true; and using simple I am able to navigate to different "Single page" of application. I have few event binding to be done in new page (which we usually do in $(document).ready()) event of jQuery, I tried to use pageinit, pageshow events of jQueryMobile as well as Ready() event, but these are simply not being called.
许多感谢您的任何帮助。
Many Thanks for any helps.
是基于AJAX的页面导航的支持时,你的每一个< DIV数据角色=页面>
元素都在不同的页面。在导航,jQuery Mobile的只能找到第一个< DIV数据角色=页面>在页面上
元素,将其添加到当前的DOM,然后动画它进入视野。
Yes AJAX based page navigation is supported when each of your <div data-role="page">
elements are on different pages. On navigation, jQuery Mobile will find only the first <div data-role="page">
element on the page, add it to the current DOM, and then animate it into view.
请确保您使用的是 .delegate()
或 .live()
绑定,因为你的事件处理程序您元素结合到不在DOM直到用户导航到他们存在。这里有一个例子:
Make sure you are using .delegate()
or .live()
to bind your event handlers since the elements you are binding-to do not exist in the DOM until the user navigates to them. Here's an example:
$(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~~V )我会建议在外部的.js
文件写入所有的自定义JavaScript和包括它的每一页上。这样,如果一个用户刷新浏览器或深层链接到你的网站,他们会得到所有的code你希望他们有丰富的经验。
If you are using the pushState feature that updates the URL to not include the hashes (e.g. www.mywebsite.com/index.html#/dir1/page2.html changes to www.mywebsite.com/dir1/page2.html) I would recommend writing all your custom JavaScript in an external .js
file and including it on every page. This way if a user refreshes the browser or deep-links into your site they will get all the code for the experience you want them to have.
文件:
- Delegate: http://api.jquery.com/delegate