Home > Developer > Web Develop
JQuery Mobile is a touch-optimized HTML5 UI framework designed to create responsive websites and applications that can be accessed on all smartphones, tablets and desktop devices
Mobile page Structure JQuery Mobile site must start doctype with HTML5 to take full advantage of the capabilities of all frameworks. in the head jquery Mobile and mobile theme CSS all need to start in the jquery reference. The simplest way to get started is to link to a file hosted on a jquery CDN, or to build a custom bundle for best performance . Here's how to link to a CDN, where [version] should be replaced with the actual version.
Viewport META Tags<!DOCTYPE html>
请注意，上面有一个元viewport标记head用于指定浏览器应如何显示页面缩放级别和尺寸。如果未设置此选项，许多移动浏览器将使用大约900像素的“虚拟”页面宽度，以使其与现有桌面网站一起使用，但屏幕可能看起来缩小并且太宽。通过将视口属性设置为content="width=device-width, initial-scale=1"，宽度将设置为设备屏幕的像素宽度。
inside the body: page<meta name="viewport" content="width=device-width, initial-scale=1">
在<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>
Multi-page template structurea single HTML file can contain multiple "pages" that are loaded together by stacking multiple Div data-role of the "page" . Each "page" block requires a unique ID ( id="foo" ) for href="#foo" internal links between "pages" () . When you click a link, the framework looks for an internal "page" with an ID and converts it to a view.
The following is an example of a two pages Web site that is built with two jquery Mobile Div, linked to the ID on each page wrapper. Note that the ID on the page wrapper is only used to support internal page links, which is optional if each page is a separate HTML document. This is body The two pages inside the element .
<body><div data-role= "page" id= "foo" > <div data-role= "header" >
conventions, not requirements 强烈建议，在他们的身体脚本jQuery Mobile的文档中还含有一个div带data-role="page"
pre-fetching pagesWhen you use a single-page template, you can prefetch pages into the DOM so that they are available as soon as the user accesses them. to prefetch a page, use the data-prefetch property to a link to the page . jquery Mobile then pagecreate loads the target page in the background after the home page loads and triggers the event.
<a href= ". /pages-dialog/dialog-alt.html "Data-prefetch=" true ">this Link would prefetch the page</a>
Alternatively, you can use the Pagecontainer widget's load() method to programmatically prefetch a page :
pageUrl, { showLoadMsg: false } );
DOM Cache在DOM中保留大量页面会迅速填满浏览器的内存，并可能导致某些移动浏览器速度变慢甚至崩溃。jQuery Mobile有一个简单的机制来保持DOM整洁。
如果您愿意，可以告诉jQuery Mobile将以前访问过的页面保留在DOM中，而不是删除它们。这使您可以缓存页面，以便在用户返回时立即可用。
$.mobile.page.prototype.options.domCache = true;
or, to cache only specific pages, you can use the data-dom-cache="true" Property is added to the container of the page. to keep all previously visited pages in the DOM, domCache set the options on the page plug-in true as follows:
pageContainerElement.page({ domCache: true });
请注意，第一页的内容不会从DOM中删除，只会通过Ajax加载页面。多页模板中的页面完全不受此功能的影响 - jQuery Mobile仅删除通过Ajax加载的页面。
Explore jquery Mobile-1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
