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

　　在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>
  1. data-transition="fade"
  2. data-transition="pop"
  3. data-transition="flip"
  4. data-transition="turn"
  5. data-transition="flow"
  6. data-transition="slidefade"
  7. data-transition="slide"
  8. data-transition="slideup"
  9. data-transition="slidedown"
  10. 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可能会变得很大，某些设备上会导致变慢或者内存问题。

 

 

 

posted @ 2013-05-08 17:35  李路平  阅读(1098)  评论(0)  编辑  收藏  举报