jQueryMobile（二）

三】、按钮

<!-- 一个jQueryMobile页面 -->
<div data-role='page'>
<div data-role='header'></div>
<div data-role='main' class='ui-content'></div>
<div data-role='footer'></div>
</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'

<div data-role="page" id="page1">
<div data-role="header">
<h1>头部1</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="controlgroup" data-type="horizontal">
<p>水平按钮</p>
<a href="javascript:void(0);" class="ui-btn">按钮1</a>
<a href="javascript:void(0);" class="ui-btn">按钮2</a>
<a href="javascript:void(0);" class="ui-btn">按钮3</a>
</div>
<div data-role="controlgroup" data-type="vertical">
<p>垂直按钮</p>
<a href="javascript:void(0);" class="ui-btn">按钮1</a>
<a href="javascript:void(0);" class="ui-btn">按钮2</a>
<a href="javascript:void(0);" class="ui-btn">按钮3</a>
</div>
</div>
<div data-role="footer">
<h1>尾部1</h1>
</div>
</div>

后退按钮 data-rel='back'

<div data-role="page" id="page1">
<div data-role="header">
<h1>头部1</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="controlgroup" data-type="horizontal">
<p>水平按钮</p>
<a href="#page2" class="ui-btn">page2</a>
<a href="javascript:void(0);" class="ui-btn">按钮2</a>
<a href="javascript:void(0);" class="ui-btn">按钮3</a>
</div>
<div data-role="controlgroup" data-type="vertical">
<p>垂直按钮</p>
<a href="javascript:void(0);" class="ui-btn">按钮1</a>
<a href="javascript:void(0);" class="ui-btn">按钮2</a>
<a href="javascript:void(0);" class="ui-btn">按钮3</a>
</div>
</div>
<div data-role="footer">
<h1>尾部1</h1>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
<h1>头部2</h1>
</div>
<div data-role="main" class="ui-content">
<a href="javascript:void(0);" class="ui-btn" data-rel="back">返回</a>
</div>
<div data-role="footer">
<h1>尾部2</h1>
</div>
</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