最近在做一个项目,由于涉及到跨平台性,所以采用了jquerymobile这个框架,在开发过程中,一开始为了图测试方便,采用了chrome浏览器来测试运行。现叙述如下问题:
当在first.html中,有个链接如:<a href="second.html" data-role="button" id="submit">登录</a>
而在second.html中,譬如我引用了highcharts这个jquery图表插件,会在second.html页面中生成一些图表。
可是这种情况,当我用chrome浏览器点击“登录”按钮时,链接到second页面,可是second页面的图表不会显示,需要刷新一下才能显示图表,于是我结合了phonegap,把此项目布到android手机中进行测试,也是如此。我很是郁闷,我后来换了360浏览器进行测试,虽然不支持jquerymobile框架主题样式显示,不过它链接过去能一下子出现图表的,而不需要刷新。对此,我就开始怀疑是否是浏览器链接加载页面的方式不一样的问题了。
反正中间耗费了很多时间去定位问题的所在。也是由于刚接触此类技术,并不是很精。后来想想还是追本还原,回到最起点,把jquerymobile的链接看了一下,有这么一段话:
Jquery Mobile支持所有标准的html格式,为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求,并且用动画的转场效果实现切换
指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载,页面会整体被刷新。
对此,我就考虑到了,是否是因为chrome为了提高页面的加载速度,采用了ajax加载,页面不会整体被刷新。于是我就在button按钮上加上了data-ajax="false",然后果然行了。
正确的方式如下:<a href="second.html" data-role="button" id="submit" data-ajax="false" >登录</a>
分享到:
相关推荐
在这个例子中,它应该展示了如何使用jQuery Mobile创建一个简单的“Hello World”页面。通常,你需要在HTML头部引入jQuery库和jQuery Mobile CSS及JS文件。 ```html <!DOCTYPE html> , initial-scale=1"> ...
这可能是由于 jQuery Mobile 的页面结构导致的,它通常将多个页面元素封装在一个单一的 `data-role="page"` 容器中。在页面切换时,只有当前显示的页面会被激活,其他页面可能不会正确地应用样式和脚本。 **解决...
jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建功能丰富的移动界面。在“jQuery...
1. **单一页面架构**:jQuery Mobile 使用单一页面模板,将多个页面的内容包含在一个 HTML 文件中,通过 AJAX 技术实现页面间的平滑切换,提高用户体验。 2. **触控优化**:所有的 UI 元素都经过优化,以适应触摸...
在 jQuery Mobile 中,页面是基于分页的,每个页面都由一个包含 `data-role="page"` 的 div 元素表示。页面间的导航可以通过链接实现,使用 `data-rel="back"` 可以实现返回上一页的功能。 ### 3. 模块化布局 ...
在本篇中,我们将深入探讨如何使用jQuery Mobile构建一个相册应用,并分析其核心知识点。 1. **页面结构与数据属性** jQuery Mobile依赖于特定的数据属性(data-*)来增强HTML元素,实现触控友好的交互。例如,`...
4. **页面导航:** jQuery Mobile 自带了一个基于链接的页面导航系统,可以处理页面间的过渡效果,无需实际的页面刷新。 5. **自动适应屏幕大小:** 通过流式布局和媒体查询,jQuery Mobile 能够自动适应不同尺寸的...
jQuery Mobile 是一个轻量级、触控优化的前端框架,专为移动设备设计,用于创建跨平台、响应式的Web应用程序。这个压缩包包含了《jQuery Mobile快速入门》这本书的配套源代码,适合初学者深入理解jQuery Mobile的...
在"restaurant_picker"这个实例中,我们将深入探讨如何使用 jQuery Mobile 创建一个餐厅选择器应用。 首先,jQuery Mobile 的核心理念是“Write Less, Do More”,通过简单的 HTML 标签和类,即可实现复杂的 UI ...
总的来说,《jQuery Mobile即学即用》是一本全面而深入的指南,涵盖了从基础到高级的jQuery Mobile知识。通过学习本书,读者可以迅速掌握这个强大的框架,从而高效地开发出适应各种移动设备的Web应用。
每个页面都被视为一个独立的单元,通过链接或程序导航在不同的页面之间切换,这种设计有利于优化移动设备的性能。 2. **主题和样式**:JqueryMobile提供了一套完整的主题系统,可以通过简单的类名应用到元素上,...
3. **增强型链接:** 通过设置`data-ajax="true"`,jQuery Mobile 可以实现页面无刷新跳转,提供更流畅的用户体验。 4. **触控事件:** 支持触摸事件,如`tap`、`swipe`等,使得在移动设备上的交互更为自然。 **二...
jQuery Mobile 使用 Ajax 进行页面导航,这使得页面之间可以平滑过渡,而无需完全刷新。然而,这可能会导致历史记录和书签出现问题,因此开发者需要了解如何正确配置 `data-ajax` 属性,以及何时使用 `data-rel=...
在jQuery Mobile中,一个页面由一个或多个“page”元素组成,每个page元素代表一个独立的视图。页面间可以通过链接或者程序导航来切换。例如: ```html <!-- 页面内容 --> <!-- 页面内容 --> ``` ### 三、...
jQuery Mobile 是一个流行的前端框架,专为移动设备设计,用于构建响应式和触控友好的网页应用。它基于 jQuery 和 jQuery UI,提供了丰富的组件、统一的事件处理以及优化的触控交互,使得开发者能够轻松创建跨平台、...
jQuery Mobile 是一个专为触摸设备设计的前端框架,它基于 jQuery 库,旨在简化移动 Web 应用程序的开发。这个框架提供了统一的接口,使得开发者能够创建跨平台、跨设备的移动应用,支持各种智能手机和平板电脑。...
这个压缩包中包含的是一个名为 "MiamiCoder" 的 jQuery Mobile 教程项目,可能包括了演示代码、讲解文档或者是一系列的实例页面。这些资源可以帮助开发者更深入地了解如何使用 jQuery Mobile 构建移动应用,例如如何...
- `<div data-role="page">` 是jQuery Mobile的基本构建单元,每个页面都应包含一个。 2. **头部**: - `<div data-role="header">` 通常包含标题和导航链接。 3. **主体**: - `<div data-role="content">` ...
6. **导航和页面链接**:使用`data-rel="back"`可以实现类似浏览器后退的功能,而`data-rel="dialog"`和`data-rel="popup"`则用于创建对话框和弹出框。 7. **表单增强**:jQuery Mobile 自动美化和增强标准HTML表单...
jQuery Mobile 是一个专为触摸屏设备设计的前端框架,它基于流行的 jQuery 库,旨在简化在移动设备上构建交互式Web应用的过程。这个框架提供了丰富的UI组件、优化的触控事件处理以及无刷新页面导航,以确保在各种...