JqueryMobile学习之三button

按钮

按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候（比较适合，手指比较胖的人群）

在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：

<p><a href="#about" data-role="button">About this app</a></p>

</div>

...

<p>This app rocks!</p>

</div>

另外jQuery Mobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。

还可以利用data-icon属性建立各式各样的按钮，建立行内按钮和按钮组（水平或垂直的）

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <link href="Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" />
 6     <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
 7     <script src="Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10     <div data-role="page" id="home">
11  
12        <div data-role="header">
13          <h1>Home</h1>
14        </div>
15  
16        <div data-role="content"> 
17          <p><a href="#about" data-role="button">About this APP</a></p>    
18        </div>
19  
20  </div>
21     
22  <div data-role="page" id="about">
23  
24    <div data-role="header">
25      <h1>About This App</h1>
26    </div>
27  
28    <div data-role="content"> 
29      <p>This app rocks! <a href="#home">Go home</a></p>    
30    </div>
31  
32  </div>
33 </body>
34 </html>

点击这个按钮后出现如下效果