jQuery 移动 ajax 导航
我刚刚开始接触 jQuery mobile(到目前为止它看起来真的很有趣)。
我读了elated.com 上的很棒的教程,其中一部分是关于页面转换/ajax 导航的。这看起来很棒(在我的 iPhone 上),但如果你看一下源代码,它都是在同一页面上的平面 html。
我想要/需要的是指向另一个网址,并在可能的情况下发生相同的效果。
我一直在阅读此处有关 data-url 的信息,但我似乎无法让任何事情发挥作用。
这是一些非常粗略的示例代码,显然不起作用:
<p><a href="#" data-url="test.html" data-transition="flip">My test link</a></p>
什么是正确的代码?有可能吗?
I am just getting my teeth into jQuery mobile (and so far it looks really interesting).
I read a great tutorial on elated.com, one part of which was about page transitions/ajax navigation. This looks great (on my iPhone) but if you look at the source it's all flat html on the same page.
What i want/need is to point to another url and for ther same effect to happen if possible.
I have been reading here info about data-url but I cant seem to get anything to work.
Here is some very rough example code that obviosuly doesnt work:
<p><a href="#" data-url="test.html" data-transition="flip">My test link</a></p>
What is the right code? Is it even possible?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
尝试
link
似乎太明显了? ;)
data-url
是页面 div 在加载时所具有的属性。所有页面都通过 AJAX 加载到当前 DOM,并且可以轻松找到此属性。try
<a href="test.html">link</a>
seems too obvious? ;)
data-url
is an attribute that a page div has, when it's been loaded. All pages are AJAX-loaded to the current DOM and they get this attribute to be easy found.来自http://jquerymobile.com/test/docs/pages/page-links。 html
默认链接行为:Ajax
要启用动画页面转换,所有指向外部页面(例如 products.html)的链接都将通过 Ajax 加载。为了不引人注意地执行此操作,框架会解析链接的 href 以制定 Ajax 请求 (Hijax) 并显示加载微调器。所有这一切都由 jQuery Mobile 自动发生。
如果 Ajax 请求成功,新的页面内容将添加到 DOM,所有移动小部件都会自动初始化,然后新页面会通过页面转换以动画形式呈现在视图中。
From http://jquerymobile.com/test/docs/pages/page-links.html
Default link behavior: Ajax
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
将标签:
data-ajax="false"
添加到您想要显式加载新页面的任何内容,例如:或者您可以使用本机锚点
target
标签add the tag:
data-ajax="false"
to anything you want to expliticly load a new page for, eg:Alternatively you can use the native anchor
target
tag