小强的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 ...
随机推荐
- 开源性能测试工具——jemeter介绍+安装说明
一. Apache JMeter介绍 1. Apache JMeter是什么 Apache JMeter 是Apache组织的开放源代码项目,是一个100%纯Java桌面应用,用于压力测试和性能测量. ...
- Vue 消息无缝滚动
vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...
- BZOJ2243: [SDOI2011]染色（树链剖分/LCT）
Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段), 如 ...
- 字串乱序 PHP&JS
<?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...
- JSP中的EL表达式详细介绍
一.JSP EL语言定义 EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.脚本编制元素是指页面中能够用于在 JSP 文件中嵌入 Java 代码的元素.它们通常用于对象操作以及执行那些 ...
- 小贝_redis web管理界面工具安装
RedisWEB管理界面工具安装 一.概述 二.文件下载 三.安装过程 一.概述 1.因为redis是基于C/S的方式开发.也就是说,仅仅要满足于redis的client通信要求的,都能够作为redi ...
- vuepress折腾记
由于格式比较乱,所以直接拿图片粘贴过来了,详情请看原文链接https://lewiscutey.github.io/blog/blog/vuepress-theme-toos.html
- （转）c运行库、c标准库、windows API的区别和联系
C运行时库函数C运行时库函数是指C语言本身支持的一些基本函数,通常是汇编直接实现的. API函数API函数是操作系统为方便用户设计应用程序而提供的实现特定功能的函数,API函数也是C语言的函数实现的 ...
- （转）xshell无法在vim中复制黏贴
ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴 修改.vimrc set mouse=c vi的三种模式:命令模式,插入模式,可视模式.鼠标可以启动于各种模式中: The ...
- Virtualizing memory type
A processor, capable of operation in a host machine, including memory management logic to support a ...