jQuery-Mobile学习（按钮）

一、按钮样式

一般我们常写的三种按钮样式写法分别是给a标签添加样式；给input设置为button值；最后就是直接用button标签。一般我们的按钮都是行内框。JQuery-Mobile里的按钮都是块级元素

 <div data-role="page" >
        <div data-role="header">
            <h1>这是页头</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a data-role="button">a标签按钮</a>
            <button>button按钮</button>
            <input type="button" value="input按钮"/>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>

在利用a标签的时候我们只需要给a标签加上data-role=”button”就可以直接把a标签变成按钮。a标签里有href的按钮我们一般称之为导航按钮。因为a标签做的按钮会直接跳转到另外一个页面。
我们想把按钮变成行内块很简单只需要给这些标签加上一个data-inline=”true”

<div data-role="page" >
   <div data-role="header">
      <h1>这是页头</h1>
   </div>
   <div data-role="main" class="ui-content">
     <a data-role="button" data-inline="true">a标签按钮</a>
     <button data-inline="true">button按钮</button>
     <input data-inline="true" type="button" value="input按钮"/>
   </div>
   <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
   </div>
 </div>

*效果图*

二、按钮组合
我们通常会有一排的按钮让我们做。一种水平放置，一种垂直放置。我们可以把按钮放在一个div里面。这个div有data-type=”horizontal / vertical” horizontal值得水平，vertical指的是垂直放置。

<div data-role="page" >
    <div data-role="header">
        <h1>这是页头</h1>
    </div>
    <div data-role="main" class="ui-content">
       <div data-role="controlgroup" data-type="horizontal">
         <a data-role="button" >按钮1</a>
         <a data-role="button" >按钮2</a>
         <a data-role="button" >按钮3</a>
     </div>
     <div data-role="controlgroup" data-type="vertical">
         <a data-role="button" >按钮1</a>
         <a data-role="button" >按钮2</a>
         <a data-role="button" >按钮3</a>
     </div>
  </div>
  <div data-role="footer" data-position="fixed">
        <h1>这是页脚</h1>
   </div>
</div>

data-role=”controlgroup”是用来创建一个组合用的。水平和垂直按钮都会紧急的贴在一起。

效果图

三、后退按钮
我们在a标签里面添加data-rel=”back”就会自动跳转到之前一个页面。这个地方我们可以常用来做手机里的返回图标。

<a href="#" data-role="button" data-rel="back">返回</a>

四、class样式按钮实现

a标签我们不一定需要加上data-role=”button”来实现按钮样式。也可以直接使用一些css样式来实现按钮。

<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>class定义出按钮的样式</h1>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#" class="ui-btn">灰色按钮 (默认)</a>
        <a href="#" class="ui-btn ui-btn-b">黑色按钮</a>
        <br>
        <p>内联按钮:</p>
        <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a>
        <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</a>
        <a href="#" class="ui-btn ui-corner-all ui-btn-b ui-btn-inline">圆角按钮</a>
        <a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-mini">mini按钮</a>
        <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow">有阴影的按钮</a>
    </div>

    <div data-role="footer" data-position="fixed">
        <h1>底部文本</h1>
    </div>
</div>

ui-btn默认为按钮样式为灰色。
ui-mini制作小按钮
ui-btn-b按钮颜色就为黑色。b代表黑色
ui-btn-inline按钮为行内块
ui-shadow按钮有阴影
ui-corner-all 按钮有圆角
默认情况下input按钮有圆角及阴影效果。 a 和 button 按钮没有。

效果图