jQuery Mobile基础##2.jQuery Mobile按钮 ###2.###2.###2.3按钮的大小默认情

##2.jQuery Mobile按钮
###2.1在页面上创建按钮
在页面上创建按钮有三种方式：
-使用元素
-使用元素
-使用带有data-role="button"的的元素

1 使用 button 元素

<div data-role="main" class="ui-content">
    <button class="ui-btn">这是一个按钮</button>
  </div>

2 使用 input 元素

<div data-role="main" class="ui-content">
    <input type="button" value="按钮">
  </div>

3 使用带有data-role="button"的 a 的元素

<div data-role="main" class="ui-content">
    <a href="#" class="ui-btn">按钮</a>
  </div>

###2.2通过按钮在两个页面之间进行切换
例2-2-1

<body>
<!--这是第一个页面pageone-->
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>这是页面的顶部工具栏</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>这是页面的内容，点击下面的按钮跳转</p>
    <!--接下来用第三种方法创建一个按钮-->
    <a href="#pagetwo" class="ui-btn">跳转到第二个界面pagetwo</a>
  </div>

  <div data-role="footer">
    <h1>这是页面底部工具栏</h1>
  </div>
</div> 
<!--第二个页面pagetwo-->
<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>这是第二个页面的顶部工具栏</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>这是第二个页面的内容</p>
    <!--接下来用第三种方法创建一个按钮-->
    <a href="#pageone" data-role="button">点击返回页面pageone</a>
  </div>

  <div data-role="footer">
    <h1>第二个页面的底部工具栏</h1>
  </div>
</div> 

</body>

###2.3按钮的大小
默认情况下，按钮会占满整个屏幕宽度，如果要创建一个和内容一样宽的按钮，或者要并排显示多个按钮，需要添加data-inline=“true”。
例2-3-1

 <div data-role="main" class="ui-content">
    <p>内联按钮 (一行显示三个):</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">第一个</a>
    <a href="#pageone" class="ui-btn ui-btn-inline">第二个</a>
    <a href="#pageone" class="ui-btn ui-btn-inline">第三个</a>
  </div>

###2.4按钮的摆放
jQuery Mobile提供一个简单的方法来摆放按钮
把data-role="controlgroup"属性和data-type="horizontal|vertical"一起使用来规定是否水平或垂直组合按钮
例2-4-1

<div data-role="main" class="ui-content">
	<!--下面是三个水平摆放的按钮-->
    <div data-role="controlgroup" data-type="horizontal">
      <p>水平组合按钮:</p>
      <a href="#" class="ui-btn">按钮 1</a>
      <a href="#" class="ui-btn">按钮 2</a>
      <a href="#" class="ui-btn">按钮 3</a>
    </div><br>
    
    <!--下面是三个垂直摆放的按钮-->
    <div data-role="controlgroup" data-type="vertical">
      <p>垂直组合按钮 (默认):</p>
      <a href="#" class="ui-btn">按钮 1</a>
      <a href="#" class="ui-btn">按钮 2</a>
      <a href="#" class="ui-btn">按钮 3</a>
    </div>
  </div>

###2.5后退按钮

创建后退按钮，使用data-rel="back"属性

例2-5-1

<div data-role="main" class="ui-content">
    <a href="#" class="ui-btn" data-rel="back">返回</a>
  </div>

###2.6更多按钮样式

类	描述
ui-btn-b	修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。
ui-corner-all	为按钮添加圆角
ui-mini	制作小按钮
ui-shadow	为按钮添加阴影

如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"。默认情况下  input  按钮有圆角及阴影效果。  a  和  button  元素没有。

###2.7jQuery Mobile提供的按钮图标
####2.7.1添加图标到按钮
使用ui-icon类将图标添加到按钮上，并可以使用指定类来设置按钮位置。

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

这里写图片描述