jQuery Mobile学习笔记系列一

阅读更多

jQuery Mobile，一个新的手机终端脚本开发库，从名字可以看出，它是基于jQuery；目前支持很多种手机设备，包括IOS/Android/BlackBerry/Windows Phone等，当然，支持程度不一，具体可以看：http://jquerymobile.com/gbs/ 由于这项目比较新，在我写这文章的时候，目前还是1.0 ALPHA4.1 RELEASED版，官网提供下载的只有jQuery Mobile的JS和CSS，相关文档目前还没有提供下载，只能通过在线看Demo和说明。 一般用jQuery Mobile开发手机版Web页面，需要包括下面三个文件jQuery/jQuery Mobile JS/jQuery Mobile CSS（版本可以根据情况自己决定），如：

	 
	Page Title
 

今天介绍下它的Page：

1. Page基本结构
在一个手机页面中，一般包括三个部分（header/content/footer），它们都是Page的子元素，如下面就是一个Page的基本内容：

  
  
  
  
 
	
   
   
   
   

    
    
    
    ...
   
   
   
   
 
	
   
   
   
   

    
    
    
    ...
   
   
   
   
 
	
   
   
   
   

    
    
    
    ...
   
   
   
   
 

  
  
  
  
  

页面间的跳转和切换，一般都是Page对象的切换，你可以在一个HTML页面中包含多个Page对象，切换通过 指定相应的Page ID就可以，如下面页面内容，默认显示第一个Page对象foo，在foo的Page Content中有个 bar链接，表示切换到bar Page，这样达到页面切换的效果，其实通过浏览器看其生成的内容可以知道，这都是通过CSS来达到效果的，最底层当然是display block/none什么的，只不过jQuery Mobile封装了很多CSS：

  
  
  
  


	
   
   
   
   

		
    
    
    
    
Foo
	
   
   
   
   


	
   
   
   
   
	
		
    
    
    
    
I'm first in the source order so I'm shown as the page.
		
		
    
    
    
    
View internal page called bar
	
	
   
   
   
   


	
   
   
   
   

		
    
    
    
    
Page Footer
	
   
   
   
   


  
  
  
  





  
  
  
  


	
   
   
   
   

		
    
    
    
    
Bar
	
   
   
   
   


	
   
   
   
   
	
		
    
    
    
    
I'm first in the source order so I'm shown as the page.
		
		
    
    
    
    
Back to foo
	
	
   
   
   
   


	
   
   
   
   

		
    
    
    
    
Page Footer
	
   
   
   
   


  
  
  
  

默认在Page切换的时候，切换后的页面左上角默认包括一个Back的按钮回到上一个页面，页面URL中也体现出来，如../index.html#foo，表示index.html切换到id为foo的Page，或者index.html#docs-pages.html，表示从index.html切换到docs-pages.html，其实不管页面内链接还是页面间切换，jQuery Mobile都是发起Ajax请求加载新的页面。如果想链接到一个新界面，而且URL中不想有以前路径#新页面，可以通过在 加入链接属性rel="external"或data-ajax="false"，这就告诉jQuery Mobile需要重新加载一个新的页面，而且URL也是全新的。

2. Page切换效果
默认Page间切换的效果是从右向左切换，可以在 中指定data-transition属性，指定页面切换的效果，jQuery Mobile目前支持slide/slideup/slidedown/pop/fade/flip等切换效果。 jQuery Mobile官网：http://jquerymobile.com/