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. 可执行Jar包调用动态链接库(DLL/SO)

    踩过了很多的坑,查了很多资料,在此记录一下,以SpringBoot项目为基础. Maven加入JNA依赖 <!-- JNA start --> <dependency> < ...

  2. lucene分词器中的Analyzer,TokenStream, Tokenizer, TokenFilter

    分词器的核心类: Analyzer:分词器 TokenStream: 分词器做优点理之后得到的一个流.这个流中存储了分词的各种信息,能够通过TokenStream有效的获取到分词单元. 下面是把文件流 ...

  3. Ubuntu 12.04中文输入法的安装(zhuan)

    Ubuntu 12.04中文输入法的安装   Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu ...

  4. python 基础 1.5 python数据类型(四)--字典常用方法示例

    一. 字典 #字典 dict1 = {'name':'lzc','age':'20','sex':'man'} print dict1 print type(dict1) >>> { ...

  5. IE浏览器的判断

    function compatibleIE8(){ var browser = navigator.appName; var b_version = navigator.appVersion; if( ...

  6. Java基础教程:面向对象编程[2]

    Java基础教程:面向对象编程[2] 内容大纲 访问修饰符 四种访问修饰符 Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java 支持 4 种不同的访问权限. default ...

  7. 微信小程序开发:学习笔记[1]——Hello World

    微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/ ...

  8. Algorithm: Sieve of Eratosthenes

    寻找比n小的所有质数的方法. 2是质数, 2*i都是质数,同样3是质数,3*i也都是质数 代码如下 int n; vector<, true); prime[] = prime[] = fals ...

  9. 在Linux下创建7种类型的文件

    在测试的时候有时会需要每种类型的文件,在系统中进行搜索都会找到,当然最方便的还是手动创建它们进行测试使用. 普通文件: $ touch regular 目录: $ mkdir directory 符号 ...

  10. 在WAMPSERVER下增加多版本的PHP(PHP5.3,PHP5.4,PHP5.5 ,PHP5.6)支持。

    本人预装了一个wamp的集成环境(Apache 2.4.9 + PHP 5.5.12 + mysql 5.6.17),今天在wamp环境下 添加PHP多版本 (PHP 5.5.30).中间两个过程,1 ...