JqueryMobile学习之三---button

按钮

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

 在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>

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

你可能感兴趣的:(jquerymobile)