Mobile 应用程序是建立在您想要显示的简单的点击事物上。

在 jQuery Mobile 中创建按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：

  • 使用 <button> 元素

  • 使用 <input> 元素

  • 使用带有 data-role="button" 的 <a> 元素

<button>

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>按钮</h1>
  </div>
  <div data-role="main" class="ui-content">
    <button class="ui-btn">按钮</button>
  </div>
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

<input>

实例

                <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>按钮</h1>
  </div>

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

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



</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

<a>

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>按钮</h1>
  </div>

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

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

lamp在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 <a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。

导航按钮

如需通过按钮在页面间进行链接，请使用带有 data-role="button" 属性的 <a> 元素：

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<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">访问第二个页面</a>
  </div>

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

<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">返回第一个页面</a>
  </div>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

内联按钮

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：

实例

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<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">访问第二个页面</a>
    <p>内联按钮:</p>
    <a href="#pagetwo" class="ui-btn ui-btn-inline">访问第二个页面</a>
  </div>

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

<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" 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>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


组合按钮

jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。

请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮：

实例

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>组合按钮</h1>
  </div>

  <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>

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

lamp默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

后退按钮

如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）：

实例

               <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>访问第二个页面</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#pagetwo" class="ui-btn">访问第二个页面</a>
  </div>

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

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>返回按钮实例</h1>
  </div>

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

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

更多链接按钮实例

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

Note如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

更完整的CSS类，请查看我们的jQuery Mobile CSS 类参考手册。

下一章演示如何在按钮上加上图标。