欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > jquery Mobile >
收 藏
2600

jQuery Mobile AJAX导航

所属栏目:jquery Mobile 来源:未知 内容发布:做网站吧

 为了实现在移动设备上的无缝客户体验,jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此,当在浏览器中点击一个链接打一个新的页面时,jQuery Mobile接收这个链接,通过AJAX的方式请求链接页面,并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。

      这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时,主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂,但是做为开发人员的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。

注意:如果你不想采用AJAX的方式加载页面,而想以原生的页面加载方式打开一个链接页面,只需要在打开的链接上添加属性 rel=”external”属性

       

页面切换效果

你可以使用多种不同的切换效果来显示新页面内容,只需要在链接里添加data-transition属性即可。可能的值如下

例如 <p><a href=”#about” data-transition=”flip”>关于页面</a></p>

在浏览器中查看效果

注意:查看以上的效果需要您的浏览器支持jQuery Mobile。例如:Mobile Safari, DeskTop Safari,或Chrome。

文章关键词:jquery  AJAX导航  Mobile  

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:JqueryMobile基础教程
下一篇:jQuery Mobile 基本页面结构

返回顶部