jQuery Mobile - 页面

用户可以与 jQuery Mobile 页面交互,它将内容分组为逻辑视图和页面视图。 页面视图可以使用页面转换动画。 可以使用 HTML 文档创建多个页面,因此无需向服务器请求内容。

下表详细说明了页面的类型。

序号 类型 & 说明
1 Single Page

使用编写模板的标准方法在 HTML 文档中创建单个页面。

2 Multi-Page Template

多个页面可以包含在单个 HTML 文档中,通过使用 data-role = "page" 添加多个 div 来一起加载。

3 Dialogs Page

模态对话框在页面上方的交互式叠加层中打开内容。


约定,而非要求

  • 页眉、页脚、页面和内容等数据角色属性元素用于提供页面的基本格式和结构。

  • 对于单页文档,自动初始化所需的页面包装器设置为可选。

  • 对于具有自定义布局的网页,可以排除结构元素。

  • 为了管理页面,页面包装器在未包含在标记中时由框架注入。


预取页面

包括属性data-prefetch,我们可以在单页模板中将页面预取到DOM中。 如需更多信息,请单击此处


DOM 缓存

当浏览器内存在 DOM 中变满时,它会降低移动浏览器的速度,或者可能由于加载多个页面而崩溃。 有一种简单的方法可以保持 DOM 整洁 −

  • 当通过 ajax 加载页面时,它指示在重定向到另一个页面时从 DOM 中删除该页面。

  • 您访问过的上一个页面可以在您再次访问时从缓存中检索。

  • 您可以使用以下行告诉 jQuery Mobile 将其保留在 DOM 中,而不是删除页面 −

$.mobile.page.prototype.options.domCache = true;
  • 在页面插件上将 domCache 选项设置为 true 以将所有页面保留在之前访问过的 DOM 中。

pageContainerElement.page({ domCache: true });