JQuery Mobile的页面
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的页面的更多相关文章
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- jQuery Mobile动态刷新页面样式
当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
- jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
- jquery mobile多页面跳转等,data-ajax="false" 问题,
当我们的网站引用了jquery mobile的js后,点击页面的链接,你会发现页面无法跳转,因为jquery mobile默认是采用ajax方式来加载网站的,如果你需要跳到另一个页面,需要在a标签加上 ...
- [转]jQuery Mobile动态刷新页面样式
本文转自:http://blog.csdn.net/zht666/article/details/8560765 当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控 ...
- JQuery Mobile - 解决页面点击时候,页眉和页脚消失问题!
当点击页面时候,页眉和页脚会消失!解决方法,在页面和页脚中加入: data-quicklinks="true" 实际使用代码: <div data-role="pa ...
- css3实现jquery mobile的页面过度原理
1.两个页面在同一个html中用js点击实现另外一个页面增加ui-page-active slid in等各种效果,每个页面中是一个绝对定位 .ui-mobile [data-role=page] { ...
随机推荐
- TP实例化模型的两种方式 M() D()
TP框架中实例化模型的两种方式 #如果使用自己自定义的函数,那么就用D $mode=D('model'); #如果使用是系统自带的函数,那么就是用M $model=M('model');
- java 单例模式(转载)
http://www.cnblogs.com/whgw/archive/2011/10/05/2199535.html Java中单例模式是一种常见的设计模式,可分为三种:懒汉式单例.饿汉式单例.登记 ...
- C打印函数printf的一种实现原理简要分析
[0]README 0.1)本文旨在对 printf 的 某一种 实现 原理进行分析,做了解之用: 0.2) vsprintf 和 printf.c 的源码,参见 https://github.com ...
- oc中 中文到拼音的转换
偶然发现的一个好玩的功能
- Spring、Hibernate 数据不能插入到数据库问题解决
1.问题:在使用Spring.Hibernate开发的数据库应用中,发现不管如何,数据都插不到数据库. 可是程序不报错.能查询到,也能插入. 2.分析:Hibernate设置了自己主动提交仍然无论用, ...
- 一个中断服务子程序ISR
请看下面的程序(一个中断服务子程序ISR),请指出这段代码的错误.)[中国台湾某著名CPU生产公司2005年面试题] 答案:(1)ISR不能返回一个值.如果你不懂这个,那么是不会被雇用的.(2)ISR ...
- Swift 学习笔记(扩展和泛型)
在开始介绍Swift中的扩展之前,我们先来回忆一下OC中的扩展. 在OC中如果我们想对一个类进行功能的扩充,我们会怎么做呢. 对于面向对象编程的话,首先会想到继承,但是继承有两个问题. 第一个问题:继 ...
- 列举Python常用数据类型并尽量多的写出其中的方法
#1 把字符串的第一个字符大写 string.capitalize() #2 返回一个原字符串居中,并使用空格填充至长度 width 的新字符串 string.center(width) #3 返回 ...
- Spring-data-redis:特性与实例(转载)
原文地址:http://www.cnblogs.com/davidwang456/p/4915109.html Spring-data-redis为spring-data模块中对redis的支持部分, ...
- 多线程(一) NSThread
OS中多线程的实现方案: 技术 语言 线程生命周期 使用频率 pthread C 程序员自行管理 几乎不用 NSthread OC 程序员自行管理 偶尔使用 GCD C 自动管理 经常使用 NSOpe ...