|
|
|
|
移动端

HTML 5之Pages&Dialogs

Jquery Mobile是基于HTML5的,Jquery Mobile网站必须使用HTML5文档声明开始;我们要使用它的主题css,所以在页面Title里需要引用对应的主题css样式文件还有js库;

作者:J默来源:J默的博客|2012-05-02 10:28

【新品产上线啦】51CTO播客,随时随地,碎片化学习

Jquery Mobile里的一个Page并非同于我们的一个html页面;而是一个一个基于它的Page容器的一个div ;这就允许我们可以再一个html文件中创建多个Page页面,这样的好处是,在客户端发送请求后仅需要请求一次html内容;其它的各种功能和操作都已经到客户端了;而且html也只是各种框架性的结构,内容的操作要基于js的Ajax请求;这样才能给用户超普通website的体验;当然如果大量的html Tag在第一次请求就返回给客户端将会导致请求慢,渲染慢等问题;所以我们需要做适当的划分,而且首次渲染的html内容要尽量少(推荐使用jquery Template);而且框架支持多page,多页面切换时的效果动画,还可以将页面显示为对话框形势;

不同的是,在处理链接外部页面、链接同页面的”Page”,后退、重定向及目录链接有所不同;这会在下面详细介绍;

页面

Jquery Mobile是基于HTML5的,Jquery Mobile网站必须使用HTML5文档声明开始;我们要使用它的主题css,所以在页面Title里需要引用对应的主题css样式文件还有js库;当然具体引用路径要看这些文件是怎么组织的了;

  1. <!DOCTYPE html>   
  2. <html> 
  3. <head> 
  4.     <title>Easy 酒店</title>   
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">   
  6.     <link href="../css/jquery.mobile.structure-1.1.0.css" rel="stylesheet" type="text/css" /> 
  7.     <link href="../theme/lightGray/EH_lightGray.css" rel="stylesheet" type="text/css" /> 
  8.     <link href="../css/Common.css" rel="stylesheet" type="text/css" /> 
  9.     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script> 
  10.     <script src="../js/jquery.mobile-1.1.0.js" type="text/javascript"></script> 
  11. </head> 

Jquery Mobile的”Page”是一个带有data-role="page"的div容器,这个容器一般有三个直接div子节点而且分别用data-role="header",data-role=”content”,data-role=”footer”标记;这主要是做区域划分,即将这个Page容器分割为头、内容、脚三块;然后开发者再分别在不同块里添加其他内容;http://jquerymobile.com/demos/1.1.0/docs/api/data-attributes.html这里你可以看到所有你可以使用的属性标签;

  1. <!DOCTYPE html>   
  2. <html> 
  3. <head> 
  4.     <title>Easy 酒店</title>   
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">   
  6.     <link href="../css/jquery.mobile.structure-1.1.0.css" rel="stylesheet" type="text/css" /> 
  7.     <link href="../theme/lightGray/EH_lightGray.css" rel="stylesheet" type="text/css" /> 
  8.     <link href="../css/Common.css" rel="stylesheet" type="text/css" /> 
  9.     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script> 
  10.     <script src="../js/jquery.mobile-1.1.0.js" type="text/javascript"></script> 
  11. </head> 
  12. <body> 
  13.     <div data-role="page"> 
  14.  
  15.         <div data-role="header"> 
  16.             <h1>Easy Hotel</h1> 
  17.         </div><!-- /header --> 
  18.  
  19.         <div data-role="content">      
  20.             <p>Page content goes here.</p>          
  21.         </div><!-- /content --> 
  22.  
  23.         <div data-role="footer"> 
  24.             <h4>&copyJohnny2012 Mail:johnny@163.com</h4> 
  25.         </div><!-- /footer --> 
  26.     </div><!-- /page --> 
  27. </body> 
  28. </html> 

这样它就已经有效果了,这就是一个简单的Page页了;

image

内部链接如何多页

既然每个page都只是一个带有data-role=”page”的div,那我们在我们的页面上多创几个了;关于他们之间怎么互链,只需要给各个Page的div添加ID属性,链接时href制定为#pageID就可以了

  1. <div id="pageSearch" data-role="page"> 
  2.  
  3.         <div data-role="header"> 
  4.             <h1>Easy Hotel</h1> 
  5.         </div><!-- /header --> 
  6.         <div data-role="content">      
  7.             <a href="#pageList">List Page</a>                    
  8.         </div><!-- /