学习 jQueryMobile 第一个程序

     最近没事看看手机方面的东西。发现HTML5+CSS3+JQueryMobile挺适合做手机web app的。没事学习一下，纯属自己记个笔记。JQM（JqueryMobile）包含了自己的样式表，虽然现在样式不多，但效果还可以。

     准备 1：需要一些css+js+jquery的知识。

            2：需要苹果safari或者谷歌chrome浏览器，因为这两个浏览器支持的效果比较好（显示效果基本上和手机上显示的一样）。

            3：当然你也可以在android模拟器中看一下手机中的真实效果。

     页面架构，最简单的例子JQM的HelloWorld。

View Code

 1  <! DOCTYPE html >  
 2  < html >  
 3     < head >  
 4     < title > Page Title </ title >  
 5     < link  rel ="stylesheet"  href ="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"   />
 6     < script  src ="http://code.jquery.com/jquery-1.4.3.min.js" ></ script >
 7     < script  src ="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js" ></ script >
 8  </ head >  
 9  < body >  
10 
11  < div  data-role ="page" >
12 
13     < div  data-role ="header" >
14       < h1 > Page Title </ h1 >
15     </ div >
16 
17     < div  data-role ="content" >  
18       < p > Page content goes here. </ p >     
19     </ div >
20 
21     < div  data-role ="footer" >
22       < h4 > Page Footer </ h4 >
23     </ div >
24  </ div >
25 
26  </ body >
27  </ html >

 我们引用了jquery的css，jquery的js，和jquerymoblie的js，当然也可以下下来，放到你的本地目录。看一下效果：

可以看到一个简单的页面，它包含了一个header，content，footer，基本上需要的都有了。你不用添加任何的样式，只需修改data-role属性的内容。

页面切换，手机中用到最多的估计就是页面切换了，这些在JQM中非常简单。

View Code

 1  < div  data-role ="page"  id ="home" >
 2 
 3     < div  data-role ="header" >
 4       < h1 > Home </ h1 >
 5     </ div >
 6 
 7     < div  data-role ="content" >  
 8       < p >< a  href ="#about" > About this app </ a ></ p >     
 9     </ div >
10 
11  </ div >
12 
13  < div  data-role ="page"  id ="about" >
14 
15     < div  data-role ="header" >
16       < h1 > About This App </ h1 >
17     </ div >
18 
19     < div  data-role ="content" >  
20       < p > This app rocks!  < a  href ="#home" > Go home </ a ></ p >     
21     </ div >
22 
23  </ div >

你只需要仿照上面的页面再写一个data-role属性为page的div，添加一个id，然后添加一个指向此id的链接，在浏览器里看一下效果是不是很炫。看一下第二个页面的上部是不是有一个back按钮，

这是JQM自动为你添加的，你不用写任何代码。如果感觉效果不够炫，你可以给链接添加一个属性，像这样<a href="#about"  data-transition="pop">About this APP</a>,看一下效果，

页面是不是弹出来了。 data-transition可选参数有

slide

Slide right to left (left to right if tapping the Back button). This is the default.

 

slideup

Slide from the bottom to the top (top to bottom if tapping the Back button).

 

slidedown

Slide from the top to the bottom (bottom to top if tapping the Back button).

 

pop

Expand the new page (contract it if tapping the Back button). Great for dialogs and popups.

 

fade

Fade the new page in (fade it out if tapping the Back button).

 

 

flip

Flip the old page out and the new page in, like flipping a card.

 

 

 

可以每个属性都试一下，看看效果。