Mobile 應(yīng)用程序是建立在您想要顯示的簡單的點擊事物上。

在 jQuery Mobile 中創(chuàng)建按鈕

在 jQuery Mobile 中，按鈕可通過三種方式創(chuàng)建：

  • 使用 <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 中，按鈕會自動樣式化，讓它們在移動設(shè)備上更具吸引力和可用性。我們推薦您使用帶有 data-role="button" 的 <a> 元素在頁面間進行鏈接，使用 <input> 或 <button> 元素進行表單提交。

導(dǎo)航按鈕

如需通過按鈕在頁面間進行鏈接，請使用帶有 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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

內(nèi)聯(lián)按鈕

默認(rèn)情況下，按鈕占滿整個屏幕寬度。如果你想要一個僅是與內(nèi)容一樣寬的按鈕，或者如果您想要并排顯示兩個或多個按鈕，請?zhí)砑?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>普通 / 默認(rèn)按鈕:</p>
    <a href="#pagetwo" class="ui-btn">訪問第二個頁面</a>
    <p>內(nèi)聯(lián)按鈕:</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>內(nèi)聯(lián)按鈕 (一個接一個顯示):</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" 一起使用來規(guī)定是否水平或垂直組合按鈕：

實例

<!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>垂直組合按鈕 (默認(rèn)):</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默認(rèn)情況下，組合按鈕是垂直組合，它們之間沒有外邊距和空間。并且只有第一個和最后一個按鈕是圓角，以便它們組合在一起的時候創(chuàng)建一個漂亮的外觀。

后退按鈕

如需創(chuàng)建后退按鈕，請使用 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修改按鈕顏色為黑色，字體為白色(默認(rèn)為灰色背景，黑色字體)。嘗試一下
ui-corner-all為按鈕添加圓角嘗試一下
ui-mini制作小按鈕嘗試一下
ui-shadow為按鈕添加陰影嘗試一下

Note如果你需要使用更多的樣式，每個樣式類使用空格隔開，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

默認(rèn)情況下 <input> 按鈕有圓角及陰影效果。 <a> 和 <button> 元素沒有。

更完整的CSS類，請查看我們的jQuery Mobile CSS 類參考手冊。

下一章演示如何在按鈕上加上圖標(biāo)。