jQuery Mobile經典...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
jQuery Mobile經典教程
←
→
作者：php.cn  更新時間：2022-04-11 13:58:34

jQuery Mobile 按鈕


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>

##運行實例»點擊"運行實例" 按鈕查看線上實例

#在jQuery Mobile 中，按鈕會自動樣式化，讓它們在移動設備上更具吸引力和可用性。 #

導航按鈕

如需透過按鈕在頁間進行鏈接，請使用帶有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="horizo​​ntal|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-role="button" 的 <a> 元素在頁間進行鏈接，使用 <input> 或 <button> 元素進行表單提交。
##預設情況下，組合按鈕是垂直組合，它們之間沒有外邊距和空間。並且只有第一個和最後一個按鈕是圓角，以便它們組合在一起的時候創建一個漂亮的外觀。
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 類別參考手冊。

下一章示範如何在按鈕上加上圖示。

#
←
→
提交

PHP中文網

首頁首頁課程課程文章文章問答問答詞典詞典手册手册下載下載搜尋搜尋APP下載 APP下載