jQuery mobile开发之页面(链接)跳转刷新问题
2016-03-24 21:56
519 查看
在jQuery mobile中实现页面跳转常用的方法如下:
但有时我们会发现,当点击“跳转”后要么是页面没有响应,要么是跳转后的页面中涉及到的页面跳转控件交互时也没有响应,而检查一下url网址可
以看到我们想要跳转到的网址已经定位好了,但就是不能直接跳转。这时候,只要手动刷新页面即可恢复正常。
问题分析:
在网上查了一下,发现是data-ajax设置的问题。首先让我们来看一下data-ajax在官方api文档中的介绍。
data-ajax:取值为true | false,规定是否通过AJAX来加载页面,以改进用户的体验和过渡。如果值为false,则jQuery mobile将进行普通的页面
请求。
这里我想有很多人跟我一样,对上面这句话不太理解。要想明白其中的意思,首先我们要弄懂下面几个问题:
1)ajax加载页面和普通加载页面有什么不同?
AJAX即“AsynchronousJavascriptAnd XML”(异步Javascript和XML),是一种创建交互式网页应用的网页开发技术。通过与后台与服务器进行少量数据交换,AJAX
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用
AJAX)如果需要更新内容,必须重载整个网页页面。
2)jQuery mobile的页面链接方式?
为了实现页面跳转的动画效果,jQuery mobile中所有指向外部的链接(例如page.html)默认都采用ajax的方式来加载。为了保证跳转过程的隐蔽性,jQuery
mobile框架通过解析链接的href属性形成ajax请求,同时在加载过程中伴有加载图标出现。所有的这些都是通过JQuery mobile自动完的。
如果ajax请求成功,新页面的内容将被添加到DOM中,同时所有的mobile组件被自动初始化,然后新的页面会以动画的方式进入当前视图。 如果ajax请求失败,框架将会显示一个错误的消息提示框。
注意:你不能通过ajax的导航行为来链接到一个多页面的文档(mutipage document),因为框架只会加载文档中的第一个页面,而不是文档内部所有的页面。在这种情况下,你就要采用非ajax的方式(data-ajax=false)来实现页面的整体刷新,从而避免潜在的哈希冲突。不过目前有一个子页面插件可以实现多页面文档的加载,大家有兴趣的话可以试一下。
本文引用链接:http://demos.jquerymobile.com/1.0/docs/pages/page-links.html
<a href="#pageid">跳转</a> 或是<a href="page.html">跳转</a></span></span></span></span></span>问题描述:
但有时我们会发现,当点击“跳转”后要么是页面没有响应,要么是跳转后的页面中涉及到的页面跳转控件交互时也没有响应,而检查一下url网址可
以看到我们想要跳转到的网址已经定位好了,但就是不能直接跳转。这时候,只要手动刷新页面即可恢复正常。
问题分析:
在网上查了一下,发现是data-ajax设置的问题。首先让我们来看一下data-ajax在官方api文档中的介绍。
data-ajax:取值为true | false,规定是否通过AJAX来加载页面,以改进用户的体验和过渡。如果值为false,则jQuery mobile将进行普通的页面
请求。
这里我想有很多人跟我一样,对上面这句话不太理解。要想明白其中的意思,首先我们要弄懂下面几个问题:
1)ajax加载页面和普通加载页面有什么不同?
AJAX即“AsynchronousJavascriptAnd XML”(异步Javascript和XML),是一种创建交互式网页应用的网页开发技术。通过与后台与服务器进行少量数据交换,AJAX
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用
AJAX)如果需要更新内容,必须重载整个网页页面。
2)jQuery mobile的页面链接方式?
为了实现页面跳转的动画效果,jQuery mobile中所有指向外部的链接(例如page.html)默认都采用ajax的方式来加载。为了保证跳转过程的隐蔽性,jQuery
mobile框架通过解析链接的href属性形成ajax请求,同时在加载过程中伴有加载图标出现。所有的这些都是通过JQuery mobile自动完的。
如果ajax请求成功,新页面的内容将被添加到DOM中,同时所有的mobile组件被自动初始化,然后新的页面会以动画的方式进入当前视图。 如果ajax请求失败,框架将会显示一个错误的消息提示框。
注意:你不能通过ajax的导航行为来链接到一个多页面的文档(mutipage document),因为框架只会加载文档中的第一个页面,而不是文档内部所有的页面。在这种情况下,你就要采用非ajax的方式(data-ajax=false)来实现页面的整体刷新,从而避免潜在的哈希冲突。不过目前有一个子页面插件可以实现多页面文档的加载,大家有兴趣的话可以试一下。
本文引用链接:http://demos.jquerymobile.com/1.0/docs/pages/page-links.html
相关文章推荐
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- SpringMVC+JQueryMobile开发 data-external-page与JQM机制
- jquerymobile的执行顺序,
- jquerymobile的执行顺序,
- jQuery Mobile的按钮
- jquery mobile navbar: 对click事件的响应不准确
- jquery mobile修改原样式css
- jquery mobile panel面板左右宽度设置css
- Jquery Mobile文字和UI 组件如何同时居中(前端UI)?
- Jquery Mobile table获取单元格内容
- jquery mobile学习
- jqueryMobile 两个页面切换,第二个页面css样式没有加载的问题,已解决
- Bootstrap Modal-Bootstrap模态框
- jquery mobile popup的afterclose事件不触发的问题
- jquery mobile 页面问题
- 关于使用jquery mobile popup弹框阴影问题
- 使用 JQueryMobile 点击超链接提示“error loading page” 错误
- 第一课 Jquery mobile简介
- cordova方方面
- jquery mobile datepicker