您的位置：首页 > Web前端 > JQuery

jQuery Mobel 学习相关资料整理(一)

2013-05-08 17:35 447 查看

　　在Jquery Mobile中，一个页面"就是一个data-role属性被设为"page"的容器(通常为div容器)，里面包含了"header", "content",“footer"三个容器，各自可以容纳普通的html元素，表单和自定义的Jquery Mobile组件

1、一个标准的Jquery Mobile页面的样板。

<!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/1.0a3/Jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script>
</head>
<body>

　<div data-role="page">

　　<div data-role="header">
　　　<h1>Page Title</h1>
　　　</div><!-- /header -->

　　　<div data-role="content">
　　　<p>Page content goes here.</p>
　　</div><!-- /content -->

　<div data-role="footer">
　　<h4>Page Footer</h4>
　</div><!-- /footer -->
　</div><!-- /page -->

</body>
</html>

2、想要支持中文，添加以下meta标签。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

3、一个页面中包含多个页面，支持Ajax的跳转的页面。

<body>

<!-- Start of first page -->
<div data-role="page" id="foo">

　　　<div data-role="header">
　　　　　<h1>Foo</h1>
　　　</div><!-- /header -->

　　　<div data-role="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><!-- /content -->

　　<div data-role="footer">
　　　　<h4>Page Footer</h4>
　　</div><!-- /footer -->
　　</div><!-- /page -->

<!-- Start of second page -->
　　<div data-role="page" id="bar">

　　<div data-role="header">
　　　<h1>Bar</h1>
　</div><!-- /header -->

　　<div data-role="content">
　　　<p>I'm first in the source order so I'm shown as the page.</p>
　　　<p><a href="#foo">Back to foo</a></p>
　</div><!-- /content -->

　<div data-role="footer">
　　<h4>Page Footer</h4>
　</div><!-- /footer -->
　</div><!-- /page -->
</body>

4、后退链接属性。(后退的行为，会无视链接的herf) data-rel="back"

<a href="index.html" data-rel="back">后退</a>

5、页面跳转效果属性。 data-transition="*"

<a href="index.html" data-transition="pop">跳转</a>

data-transition="fade"

data-transition="pop"

data-transition="flip"

data-transition="turn"

data-transition="flow"

data-transition="slidefade"

data-transition="slide"

data-transition="slideup"

data-transition="slidedown"

data-transition="none"

6、在页面上层的弹出对话框属性。 data-rel="dialog"

<a href="foo.html" data-rel="dialog">Open dialog</a>

7、页面预加载属性。data-prefetch

<a href="prefetchThisPage.html" data-prefetch> ... </a>

你可以预加载随意多个页面，只需要将要预加载的链接加上data-prefetch属性。或者你，可以在js里调用$.mobile.loadPage()方法来设置预加载。

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

8、不使用jQuery Mobel 提供的 DOM 缓存机制属性。data-dom-cache="true"

<div data-role="page" id="cacheMe" data-dom-cache="true">

通过js控制。

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

通过程序控制。

pageContainerElement.page({ domCache: true });

DOM缓存的缺点是DOM可能会变得很大，某些设备上会导致变慢或者内存问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航