小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架
一、单容器页面结构
<!DOCTYPE html>
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<p>内容部分</p>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
说明：<meta name="viewport" content="width=device-width,initial-scale=1">设置浏览器的缩放宽度与等级，可以使页面的宽度与移动设备的屏幕宽度相同。
二、多容器页面结构
<!DOCTYPE html>
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="p1">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<p>内容部分</p>
<a href="#p2">下一页</a>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<div data-role="page" id="p2" data-add-back-btn="true">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<p>内容部分</p>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
说明：data-add-back-btn属性表示是否在容器的左上角添加一个“回退”按钮，默认值为false.
另外给<a>元素添加data-rel属性也可以实现回退。
三、外部页面链接切换
<!DOCTYPE html>
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="p1">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<p>内容部分</p>
<a href="#p2">下一页</a>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<div data-role="page" id="p2" data-add-back-btn="true">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<em style="float:right;padding-right:5px">
<a href="about.htm">访问外部页面</a>
</em>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>外部页面</h1>
</div>
<div data-role="content">
你好，感谢你的关注
</div>
<div data-role="footer">
<h1></h1>
</div>
</div>
</body>
</html>
如果不想以ajax方式打开页面，在链接元素中添加rel="external"
四、预加载与页面缓存
<div data-role="content">
<em style="float:right;padding-right:5px">
<a href="about.htm" data-prefetch="true">访问外部页面</a>
</em>
</div>
使用页面缓存功能将会使DOM内容变大，一旦选择了缓存功能，要及时清理。
将page容器的data-dom-cache设置为true,可以将该页面的内容注入文档的缓存中，或者通过js代码设置一个全局的属性，代码如下：
$(function(){
$.mobile.page.prototype.options.domCache = true;
})
小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
- 小强的HTML5移动开发之路（21）—— PhoneGap
一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android, ...
- 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...
随机推荐
- python处理文件
打开文件: open是内建函数,一个方法 open("test.txt","r",buffering=1) test.txt 表示被打开的文件名,如果不 ...
- CISP/CISA 每日一题 21
CISSP 每日一题(答)What is the term that identifies data ona disk after the data has supposedly been erase ...
- 手撕面试题ThreadLocal！！！
说明 面试官:讲讲你对ThreadLocal的一些理解. 那么我们该怎么回答呢????你也可以思考下,下面看看零度的思考: ThreadLocal用在什么地方? ThreadLocal一些细节! Th ...
- Shell中反引号（`）与$()用法的区别
今天有人提问: echo `echo \\\\\\\w` echo $(echo \\\\\\\w) 为什么输出的不一样? 这就引申出了另一个问题:反引号与$()有没有区别? 这是一个非常有意思的问题 ...
- 1.1 Introduction中 Kafka as a Messaging System官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Kafka as a Messaging System kafka作为一个消息系统 ...
- 1.11 Python基础知识 - 序列：元组
元组(tuple)是一组有序系列,元组和列表是否相似,但是元组是不可变的对象,不能修改.添加或删除元组中的元素,但可以访问元组中的元素 元组的定义: 元组采用圆括号中用逗号分隔的元素 元组的基本操作和 ...
- js面向对象1----了解构造函数
一.构造函数与实例的区别 1 构造函数 构造函数主要是一种用于生成对象的饼干模具,这些对象具有默认属性和属性方法,它可以创建多个共享特定特性和行为的对象. 构造函数只是一个函数,但当函数遇到了ne ...
- 福昕pdf阅读器如何删除所有注释
然后选中第一个 移动到最后按住shift,选择最后一个, 总之就是选中所有的 然后右键,点击删除即可. 不要忘记保存呦
- php网页跳转无法获取session值
今日编写项目,需要在跳转后的页面获取session值进行自动登录操作,但是明明在传输页面可以打印出session值,但在接受页面却显示session值为空,经确认脚本中的session_start() ...
- scrapy-爬取斗图
scrapy-爬取斗图代码 <一> 开局三连杀 1.创建run的文件