介绍

　　jQuery Mobile是一种触控优化的HTML5 UI框架，旨在制作可在所有智能手机，平板电脑和台式机设备上访问的响应式网站和应用程序

移动页面结构

　　jQuery Mobile站点必须以HTML5开头doctype才能充分利用所有框架的功能。在headjQuery的引用中，jQuery Mobile和移动主题CSS都需要开始。最简单的入门方法是链接到jQuery CDN上托管的文件，或者为了获得最佳性能，构建自定义捆绑包。以下是如何链接到CDN，其中[version]应替换为实际版本。

<!DOCTYPE html>

<html>

<head>

	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />

	<script src="http://code.jquery.com/jquery-[version].min.js"></script>

	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>

</head>

<body>

	...content goes here...

</body>

</html>

视口元标记

　　请注意，上面有一个元viewport标记head用于指定浏览器应如何显示页面缩放级别和尺寸。如果未设置此选项，许多移动浏览器将使用大约900像素的“虚拟”页面宽度，以使其与现有桌面网站一起使用，但屏幕可能看起来缩小并且太宽。通过将视口属性设置为content="width=device-width, initial-scale=1"，宽度将设置为设备屏幕的像素宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

身体内部：page

　　在<body>标签内部，移动设备上的每个视图或“页面” div用具有该 data-role="page"属性的元素（通常是a ）标识。

　　<div data-role="page">

　　　　<div data-role="header">...</div>

　　　　<div role="main" class="ui-content">...</div>

　　　　<div data-role="footer">...</div>

　　</div>

把它放在一起：基本的单页模板

<!DOCTYPE html>

<html>

<head>

	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />

	<script src="http://code.jquery.com/jquery-[version].min.js"></script>

	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>

</head>

<body>

<div data-role="page">

	<div data-role="header">

		<h1>Page Title</h1>

	</div><!-- /header -->

	<div role="main" class="ui-content">

		<p>Page content goes here.</p>

	</div><!-- /content -->

	<div data-role="footer">

		<h4>Page Footer</h4>

	</div><!-- /footer -->

</div><!-- /page -->

</body>

</html>

多页模板结构

　　一个单一的HTML文件可以包含通过堆叠多个div具有共同加载多个“页” data-role的"page"。每个“页面”块都需要一个唯一的id（id="foo"），用于在“pages”（href="#foo"）之间进行内部链接。单击链接时，框架将查找带有id的内部“页面”并将其转换为视图。

　　下面是一个两个“页面”网站的示例，该网站使用两个jQuery Mobile div构建，链接到每个页面包装器上的id。请注意，页面包装器上的ID仅用于支持内部页面链接，如果每个页面都是单独的HTML文档，则可选。这是body元素内部的两个页面。

<body>

<div data-role="page" id="foo">

　　<div data-role="header">

　　　　<h1>Foo</h1>

　　</div>

　　<div role="main" class="ui-content">

　　　　<p>I'm first in the source order so I'm shown as the page.</p>

	<p>View internal page called <a href="#bar">bar</a></p>

　　</div>

　　<div data-role="footer">

	<h4>Page Footer</h4>

　　</div>

</div>

<!-- Start of second page -->

<div data-role="page" id="bar">

　　<div data-role="header">

　　　　<h1>Bar</h1>

　　</div>

　　<div role="main" class="ui-content">

	<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>

	　　<p><a href="#foo">Back to foo</a></p>

	</div>

	<div data-role="footer">

	　　<h4>Page Footer</h4>

	</div>

</div>

</body>

约定，而不是要求

　　强烈建议，在他们的身体脚本jQuery Mobile的文档中还含有一个div带data-role="page"

预取页面

　　使用单页模板时，您可以将页面预取到DOM中，以便在用户访问它们时立即可用。要预取页面，请将该data-prefetch属性添加到指向该页面的链接。然后jQuery Mobile在主页加载并pagecreate触发事件后在后台加载目标页面。

　　<a href="../pages-dialog/dialog-alt.html" data-prefetch="true">This link will prefetch the page</a>

或者，您可以使用pagecontainer小部件的load()方法以编程方式预取页面：

　$( ":mobile-pagecontainer" ).pagecontainer( "load", pageUrl, { showLoadMsg: false } );

DOM缓存

在DOM中保留大量页面会迅速填满浏览器的内存，并可能导致某些移动浏览器速度变慢甚至崩溃。jQuery Mobile有一个简单的机制来保持DOM整洁。
如果您愿意，可以告诉jQuery Mobile将以前访问过的页面保留在DOM中，而不是删除它们。这使您可以缓存页面，以便在用户返回时立即可用。

　　$.mobile.page.prototype.options.domCache = true;

或者，要仅缓存特定页面，可以将该data-dom-cache="true"属性添加到页面的容器中。要将所有以前访问过的页面保留在DOM中，请domCache在页面插件上设置选项true，如下所示：

　pageContainerElement.page({ domCache: true });

请注意，第一页的内容不会从DOM中删除，只会通过Ajax加载页面。多页模板中的页面完全不受此功能的影响 - jQuery Mobile仅删除通过Ajax加载的页面。

深入了解jQuery Mobile-1的更多相关文章

jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
jquery mobile 问问多多
jquery mobile 问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了
jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
一.简介先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...
JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
JQuery Mobile 页面参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
Jquery Mobile开发以及Js对象动态绑定
动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...
jquery mobile系列问题汇总整理（传播知识，利己利人）
我在用jquery mobile做项目时,遇到jm在下拉框等组件里不能正常动态更新内容,查找了相关资料,在这里抛砖引玉,先提供一个解决下拉框内容写入更新的解决方法: jm解决下拉框内容写入的方法可以这 ...

随机推荐

java实现多文件上传01
1.html代码 <html> <head> <link rel="stylesheet" type="text/css" hre ...
【Leetcode】【Easy】Binary Tree Level Order Traversal II
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
Intel® Manager for Lustre* software（一）
Intel® Manager for Lustre* software Installation 软件安装指导目录: 安装IML(Intel® Manager for Lustre* software ...
【java开发系列】—— Tomcat编译报错
由于之前Eclipse里面有一个可移植性的web工程,但是在我很久没用后,再次登录这个IDE的时候就发现了问题. 首先,我的电脑里面有两个版本的JDK,1.6和1.7.两个版本的Tomcat6和7以及 ...
【转载】#457 Converting Between enums and their Underlying Type
When you declare an enum, by default each enumerated value is represented internally with an int. (S ...
Uva 11468 AC自动机或运算
AC自动机 UVa 11468 题意:给一些字符和各自出现的概率,在其中随机选择L次,形成长度为L的字符串S,给定K个模板串,求S不包含任意一个串的概率. 首先介绍改良版的AC自动机: 传统的AC自动 ...
使用vue自定义组件以及动态时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
【Openjudge 9277 Logs Stacking堆木头】题解
题目链接:http://noi.openjudge.cn/ch0206/9277/ ... #include <algorithm> #include <iostream> # ...
HDU 1175 连连看（超级经典的bfs之一）
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1175 连连看 Time Limit: 20000/10000 MS (Java/Others) ...
Unity让带有Rigidbody组件的游戏对象停止运动
Rigidbody rigidbody = transform.GetComponent<Rigidbody>(); rigidbody.velocity = Vector3.zero; ...

深入了解jQuery Mobile-1

介绍