按钮
按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候（比较适合，手指比较胖的人群）
在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：
<div data-role="content">
<p><a href="#about" data-role="button">About this app</a></p>
</div>
...
<div data-role="content">
<p>This app rocks!</p>
<a href="#home" data-role="button">Go home</a>
</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>
点击这个按钮后出现如下效果
