小强的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 ...

随机推荐

uiautomator——第一个例子：打开浏览器，输入网址
1.在sdk安装目录:E:\Test_Tools\auto_test\app\adt-bundle-windows-x86-20131030\sdk\tools下启动uiautomatorviewer ...
【Codeforces Round #428 (Div. 2) C】Journey
[Link]:http://codeforces.com/contest/839/problem/C [Description] 给一棵树,每当你到一个点x的时候,你进入x的另外一每一个出度的概率都是 ...
5.3.7 UserDict对象
用户自己定义字典类UserDict,它是封装了一个字典类dict.主要使用来拷贝一个字典的数据.而不是共享同一份数据. class collections.UserDict([initialdata] ...
rhel5安装 oracle11
readhat 安装11gr2文档需要注意的地方:必须关掉的 1,防火墙:2,SElinux . root 用户运行 setup 命令可关防火墙与SElinux 修改网络配置文件,一定要重启此文 ...
方正飞越 A600硬改BIOS激活win7的工具与方法。
硬件:方正飞越A600-4E57:主板,H61 IPISB-VR:BIOS版本,方正A007SB0(AMI) 软件:Win7专业版目标:修改BIOS,添加SLIC2.1,硬激活win7 OEM版具 ...
visual studio code 中 debugger for chrome 插件的配置
安装 debugger for chrome 插件后,把默认的 launch.json 改成: { "name": "谷歌浏览器", "type&qu ...
利用mysql5.6 的st_distance 实现按照距离远近排序。（转载）
http://blog.csdn.net/zhouzhiwengang/article/details/53612481
[Angular] HttpParams
It is possible to use HttpParams to set http params. For example we have this url to make: https://a ...
JQuery EasyUI Combobox 实现省市二级联动菜单
//编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...
HTML 5 中FileReader的使用
FileReader 接口主要用来把文件读入到内存中,而且读取文件里的数据.FileReader接口提供了一个异步API,使用该API能够在浏览器主线程中异步訪问文件系统 ,读取文件里的数据. Fil ...

小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架

小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架的更多相关文章

随机推荐

热门专题