小强的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 ...
随机推荐
- QT常用代码之加载动态库和弹出对话框
作者:朱金灿 来源:http://blog.csdn.net/clever101 加载动态库的代码: typedef void (*Execute)(); // 定义导出函数类型 QString st ...
- C#中选中指定文件并读取类似ini文件的内容
一.背景 由于项目中需要去读取设备的配置信息,配置文件的内容和INI配置文件的格式类似,所以可以按照INI文件的方式来处理.涉及如何打开一个文件,获取打开的文件的路径问题,并读取选中的文件里边的内容. ...
- codevs 5960 信使
codevs 5960 信使 题目描述 Description 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单 ...
- 【Codeforces Round #452 (Div. 2) D】Shovel Sale
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让N乘2->a 然后看一下位数是多少. 假设有x位(x>=2) 则(0..(a%10-1) ) + (99..9)[x- ...
- method initializationerror not found:JUnit4单元測试报错问题
今天使用JUnit 4进行单元測试时,測试程序一直执行不起来,报method initializationerror not found错误.例如以下: 网上说版本 ...
- POJ--1753--Flip Game【DFS】
链接:http://poj.org/problem? id=1753 题意:一个4*4的方格,有白棋或者黑棋.每次操作是一个位置的颜色翻转,即白变黑.黑变白,而且与它相邻的四个位置的颜色也都跟着改变, ...
- Android学习笔记之按键操作
我们如何和Android 程序来进行交互那份?来让 Android 程序产生相应的反应,我们不得不通过键盘事件.触摸事件.传感器事件等来实现. 键盘是Android中主要的输入设备,对按键的响应的处理 ...
- 不同jquery对象触发相同的函数 “.js-story-title,.js-mt-index-cont2”
$(document).on("click",".js-story-title,.js-mt-index-cont2",function () {}
- kindle paperwhite 简单笔记按名称分类
已更新python,见新博客 http://www.hrwhisper.me/archives/708 写作背景: 南京决赛比赛完那天晚上写的. 使用方法: 将My Clippings.txt 放在 ...
- MySQL和SqlServer的区别
一.查看表结构数量等mysql语句: -- 查看系统内所有数据库 show databases: -- 查询数据库内所有表 show tables; -- 显示表结构 desc 表名; sql ser ...