介绍

　　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解决下拉框内容写入的方法可以这 ...

随机推荐

常用的shell语句【awk】去重，排列
目的:从日志access.log中,筛选出IP来,并统计每个IP出现的次数,然后显示出来. 因为:awk = 扒IP shot = 排序 uniq = 去重所以:awk '{print $1} ...
开发时复制aspx网页的方法
简单的copy /paste *.aspx网页,所使用的是同一个CodeBehind ,这往往不是我们所想要的!!!我们一般都希望使这两个网页具有各自的 *.cs文件.步骤:①新建一个Web ...
[libxml2]_[XML处理]_[使用libxml2的xpath特性修改xml文件内容]
场景: 1.在软件需要保存一些配置项时,使用数据库的话比较复杂,查看内容也不容易.纯文本文件对utf8字符支持也不好. 2.这时候使用xml是最佳选择,使用跨平台库libxml2. 3.基于xpath ...
从头基于空镜像scratch创建一个新的Docker镜像
我们在使用Dockerfile构建docker镜像时,一种方式是使用官方预先配置好的容器镜像.优点是我们不用从头开始构建,节省了很多工作量,但付出的代价是需要下载很大的镜像包. 比如我机器上docke ...
c++下各种编码格式转换的方法
1.利用c++11新特性 std::wstring_convert配合std::codecvt模板类作者:Gomo Psivarh链接:https://www.zhihu.com/question/ ...
高通Vuforia
这里使用高通的Vuroria来做一个AR歌姬. 工具: Vuforia,MMD4Mecanim 模型: 初音未来pmd模型文件,极乐净土vmd动作文件. 逻辑: 当发现识别卡时:开启音乐,模型速度为1 ...
HDU 1205 鸽巢原理
#include <bits/stdc++.h> using namespace std; long long abs_(long long a,long long b) { if(a&g ...
如何解决“请考虑使用 app.config 将程序集“XXXXXXXX”从版本XXXX重新映射到版本XXXX”的问题
> 请考虑使用 app.config 将程序集“System.ValueTuple, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51”从版本“\ ...
Java中Thread类的join方法到底是如何实现等待
现在的场景是A线程执行:public void run(){ bThread.join(0);//把b线程加入到当前线程(a线程),等待b结束,当前a线程才会结束.}B线程执行public void ...
QS：vue中qs的使用
关于Vue中,序列化字符串,处理发送请求的参数使用工具qs来处理参数步骤: 1.首先先下载: npm i qs 2.然后引入 : import qs from 'qs' 3.qs主要有两个方法 : ...

深入了解jQuery Mobile-1

介绍