深入了解jQuery Mobile-1
Posted 甜珊贝奇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入了解jQuery Mobile-1相关的知识，希望对你有一定的参考价值。
介绍
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 1.3.1“$.mobile.loading”不工作