1.JQuery Mobile的页面结构如下图:

page:是在浏览器中显示的页面

  header:创建页面上方的工具栏(常用于标题和搜索按钮)

  content:定义了页面的内容,比如文本, 图片,表单,按钮等

  footer:用于创建页面底部工具条

2.页面的加载

JQM的默认链接请求方式是ajax,为了不重新渲染整个页面和减少传输数据量,只是部门加载页面,也就是指加载另外一个页面上面提到的page中的内容。

下面是两个html页面,启动的是第一个页面

这时浏览器显示的内如如下,第二个page被隐藏掉了,可以使用#+page的id让它显示。

当我们跳转到第二个页面时,只是把page3中的内容加载进来,因此在使用ajax方式时,要保证每个页面的名称唯一,如下:

而这时page外面的<header></header>啊,引用的js、css啊还是html1中的内容。

因此有时候就会出现js不执行,样式不加载等等的情况,如果html2中有特殊的js或者样式,它的加载就要写在page3下面。

JQuery Mobile的页面的更多相关文章

  1. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  2. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  3. jQuery Mobile动态刷新页面样式

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...

  4. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  5. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  6. jquery mobile多页面跳转等,data-ajax="false" 问题,

    当我们的网站引用了jquery mobile的js后,点击页面的链接,你会发现页面无法跳转,因为jquery mobile默认是采用ajax方式来加载网站的,如果你需要跳到另一个页面,需要在a标签加上 ...

  7. [转]jQuery Mobile动态刷新页面样式

    本文转自:http://blog.csdn.net/zht666/article/details/8560765 当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控 ...

  8. JQuery Mobile - 解决页面点击时候,页眉和页脚消失问题!

    当点击页面时候,页眉和页脚会消失!解决方法,在页面和页脚中加入: data-quicklinks="true" 实际使用代码: <div data-role="pa ...

  9. css3实现jquery mobile的页面过度原理

    1.两个页面在同一个html中用js点击实现另外一个页面增加ui-page-active slid in等各种效果,每个页面中是一个绝对定位 .ui-mobile [data-role=page] { ...

随机推荐

  1. PowerBuilder -- 保存图片

    String ls_path, ls_file_name, ls_filter, ls_errInt li_ret, li_loop, li_i, li_file, li_bytesLong ll_f ...

  2. 目标检测之行人检测(Pedestrian Detection)---行人检测之简介0

    一.论文 综述类的文章 [1]P.Dollar, C. Wojek,B. Schiele, et al. Pedestrian detection: an evaluation of the stat ...

  3. maven nexus 搭建

    http://www.cnblogs.com/adolfmc/archive/2012/08/21/2648415.html http://www.cnblogs.com/dingyingsi/p/3 ...

  4. 前后端分离之fiddler前端开发代理 autoresponder 正则表达式 regex:(?insx) 修正符详解

    regex:(?isx)^http://127.0.0.1:3000(/dlscene)?/order/(\w*) http://127.0.0.1:8080/dlscene/order/$2 上面这 ...

  5. 九度OJ 1169:比较奇偶数个数 (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:9459 解决:3146 题目描述: 第一行输入一个数,为n,第二行输入n个数,这n个数中,如果偶数比奇数多,输出NO,否则输出YES. 输入 ...

  6. git config --system --unset credential.helper 重新输入账号密码

    检查本地配置$ git config --local -lcore.repositoryformatversion=0core.filemode=falsecore.bare=falsecore.lo ...

  7. Software-defined networking

    Software-defined networking administrators to programmatically initialize, control, change, and mana ...

  8. JavaScript如何判断非空

    JavaScript判断非空的语句一般为: var elvis; if (typeof elvis !== "undefined" && elvis !== nul ...

  9. 常见寄存器以及常见汇编指令,常见爆破指令 good

    CPU的任务就是执行存放在存储器里的指令序列.为此,除要完成算术逻辑操作外,还需要担负CPU和存储器以及I/O之间的数据传送任务.早期的CPU芯片只包括运算器和控制器两大部分.到了近几年,为了使存储器 ...

  10. 创建laravel项目

    下载项目到本地 git clone https://github.com/251068550/LaraBlog.git compoer安装 cd LaraBlog composer install 如 ...