小强的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 ...
随机推荐
- 轻松学习Linux之本地安装系统
1.安装Linux前的准备工作(详细讲解了系统分区,及类型) 2.轻松学习Linux之用光驱安装 3.轻松学习Linux之用光驱安装(之二) 4.硬盘安装Linux系统 本文出自 "李晨光原 ...
- windows 静态和动态库
c++中共有两种库:1.动态链接库LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link library.(这 ...
- 2018/8/21 qbxt测试
2018/8/21 qbxt测试 期望得分:0? 实际得分:0 思路:manacher 会写模板但是不会用 qwq 听了某人的鬼话,直接输出0,然后就gg了 #include <cstdio ...
- windows服务插件利器-新生命组件XAgent使用心得
1.简单介绍 XAgent为大石头带领下的新生命团队自己开发的一个.Net下的常用的Windows服务管理组件利器,通过在控制台中简单的输入1,2,3,4,5等数字可以实现一步安装.卸载Windows ...
- 26.SpringBoot事务注解详解
转自:https://www.cnblogs.com/kesimin/p/9546225.html @Transactional spring 事务注解 1.简单开启事务管理 @EnableTrans ...
- javascript: with 表单验证
<html> <head> <script type="text/javascript"> function validate_required ...
- svd 奇异值分解
参考:http://www.cnblogs.com/pinard/p/6251584.html 酉矩阵,关于矩阵的问题,还是很复杂的. 只有方阵才可以进行特征值分解, 但是如果行不等于列,即不是方阵, ...
- HTML(超文本标记语言)的内容和理解
由于上篇文章中提到WebMethod的Description 属性(propery)中可以使用超文本,因此就记录一篇关于超文本的文章以供参考,注意:Description=" HTML格式 ...
- POJ 3061 Subsequence 二分或者尺取法
http://poj.org/problem?id=3061 题目大意: 给定长度为n的整列整数a[0],a[1],--a[n-1],以及整数S,求出总和不小于S的连续子序列的长度的最小值. 思路: ...
- GO语言学习（二）Windows 平台下 LiteIDE 的安装和使用
1. 安装 Go 语言并设置环境变量 参考GO语言学习(一) 2. MinGW 的下载和安装 Windows 下的 Go 调试还需要安装 MinGW. 2.1 下载安装工具的安装 最新版本下载安装工具 ...