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