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可能会变得很大,某些设备上会导致变慢或者内存问题。

 

 

 

你可能感兴趣的:(jquery)