jQueryMobile（二）

三】、按钮

1 <!-- 一个jQueryMobile页面 -->
2 <div data-role='page'>
3     <div data-role='header'></div>
4     <div data-role='main' class='ui-content'></div>
5     <div data-role='footer'></div>
6 </div>

class="ui-content"为main区域设置jQueryMobile里内置的默认边距
创建按钮class="ui-btn"
内联按钮class='ui-btn ui-btn-inline'
组合按钮：
data-role='controlgroup' data-type='horizontal/vertical'
class='ui-btn'

 1 <div data-role="page" id="page1">
 2     <div data-role="header">
 3         <h1>头部1</h1>
 4     </div>
 5     <div data-role="main" class="ui-content">
 6         <div data-role="controlgroup" data-type="horizontal">
 7             <p>水平按钮</p>
 8             <a href="javascript:void(0);" class="ui-btn">按钮1</a>
 9             <a href="javascript:void(0);" class="ui-btn">按钮2</a>
10             <a href="javascript:void(0);" class="ui-btn">按钮3</a>
11         </div>
12         <div data-role="controlgroup" data-type="vertical">
13             <p>垂直按钮</p>
14             <a href="javascript:void(0);" class="ui-btn">按钮1</a>
15             <a href="javascript:void(0);" class="ui-btn">按钮2</a>
16             <a href="javascript:void(0);" class="ui-btn">按钮3</a>
17         </div>
18     </div>
19     <div data-role="footer">
20         <h1>尾部1</h1>
21     </div>
22 </div>

后退按钮 data-rel='back'

 1 <div data-role="page" id="page1">
 2     <div data-role="header">
 3         <h1>头部1</h1>
 4     </div>
 5     <div data-role="main" class="ui-content">
 6         <div data-role="controlgroup" data-type="horizontal">
 7             <p>水平按钮</p>
 8             <a href="#page2" class="ui-btn">page2</a>
 9             <a href="javascript:void(0);" class="ui-btn">按钮2</a>
10             <a href="javascript:void(0);" class="ui-btn">按钮3</a>
11         </div>
12         <div data-role="controlgroup" data-type="vertical">
13             <p>垂直按钮</p>
14             <a href="javascript:void(0);" class="ui-btn">按钮1</a>
15             <a href="javascript:void(0);" class="ui-btn">按钮2</a>
16             <a href="javascript:void(0);" class="ui-btn">按钮3</a>
17         </div>
18     </div>
19     <div data-role="footer">
20         <h1>尾部1</h1>
21     </div>
22 </div>
23 
24 <div data-role="page" id="page2">
25     <div data-role="header">
26         <h1>头部2</h1>
27     </div>
28     <div data-role="main" class="ui-content">
29         <a href="javascript:void(0);" class="ui-btn" data-rel="back">返回</a>
30     </div>
31     <div data-role="footer">
32         <h1>尾部2</h1>
33     </div>
34 </div>

带有圆角的按钮class='ui-btn ui-corner-all'
迷你按钮class='ui-btn ui-mini'
带有阴影的按钮class='ui-btn ui-shadow'

四】、按钮图标

jQueryMobile按钮图标：http://www.runoob.com/jquerymobile/jquerymobile-icons.html

定位按钮：
.ui-btn-icon-top
.ui-btn-icon-bottom
.ui-btn-icon-left
.ui-btn-icon-right

只显示图标，不显示文本：
.ui-btn-icon-notext