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. J2EE——开发环境搭建

    WEB环境搭建 1.J2EE开发环境搭建(1)——安装JDK.Tomcat.Eclipse 2.JAVA运行环境和J2EE运行环境的搭建 3.jsp开发所需要的eclipse插件(lomboz.tom ...

  2. RPMBUILD源码打包资源汇总(转)

    http://mattshma.github.io/2015/11/04/rpm%E6%89%93%E5%8C%85/ http://400053.blog.51cto.com/390053/7210 ...

  3. POJ 1840 Eqs(hash)

    题意  输入a1,a2,a3,a4,a5  求有多少种不同的x1,x2,x3,x4,x5序列使得等式成立   a,x取值在-50到50之间 直接暴力的话肯定会超时的   100的五次方  10e了都 ...

  4. Memcache安装与使用

    一.资源下载 安装memcached 之前必需要先安装 libevent 分别在libevent和memcached的官网下载安装包libevent-1.4.14b-stable.tar.gz和mem ...

  5. 14、AppWidget及Launcher RemoteViews

    一.Launcher的简单研究 1 什么是Launcher Android系统启动后加载的第一个程序 . 这个程序是其他应用程序的入口 . Launcher构成: HomeScreen : (Work ...

  6. redis自启动

    $ vi /etc/init.d/redis # chkconfig: 2345 90 10 # description: Redis is a persistent key-value databa ...

  7. iOS 流布局 UICollectionView使用(UICollectionVIew的代理方法)

    UICollectionViewDataSource协议 这个协议主要用于collectionView相关数据的处理,包含方法如下: 设置分区数(这个是可选实现的) - (NSInteger)numb ...

  8. 性能测试--Jmeter的Non GUI模式、集群

    Jmeter的Non GUI模式.集群 一.Non GUI模式 1.一般情况下在NonGUI模式下运行jmeter,有两个好处: 节省系统资源,能够产生更大的负载 可以通过命令行参数对测试场景进行更精 ...

  9. 我的Java开发学习之旅------>Java使用ObjectOutputStream和ObjectInputStream序列号对象报java.io.EOFException异常的解决方法

    今天用ObjectOutputStream和ObjectInputStream进行对象序列化话操作的时候,报了java.io.EOFException异常. 异常代码如下: java.io.EOFEx ...

  10. Shell parameter expansion

    使用sh写一些小型的脚本会使工作更加简单.有部分内容可能大家都比較陌生(至少我是这样). 就是变量有关的參数展开,以下就是一些简单的描写叙述和使用方法.能够使代码更加简洁 展开运算符 替换运算 ${v ...