📌  相关文章
📜  如何使用 jQuery Mobile 创建分组按钮页脚？(1)

📅  最后修改于: 2023-12-03 15:38:03.367000             🧑  作者: Mango

使用 jQuery Mobile 创建分组按钮页脚

jQuery Mobile 是一个基于 HTML、CSS 和 JavaScript 的移动 Web 开发框架，它提供了一系列的 UI 组件和工具，帮助程序员快速开发移动应用程序。在这个教程中，我们将介绍如何使用 jQuery Mobile 创建分组按钮页脚。

步骤 1：准备工作

在开始创建分组按钮页脚之前，您需要确保已经引入了 jQuery 和 jQuery Mobile 的 JavaScript 和 CSS 文件。您可以从官方网站下载这些文件，也可以使用 CDN 加载，如下所示：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My App</title>

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
步骤 2：创建页脚

创建一个页面并添加页脚。每个页脚都应该有一个 data-role="footer" 属性，如下所示：

<div data-role="page">
  <div data-role="header">
    <h1>Header</h1>
  </div>

  <div data-role="content">
    <p>Content goes here.</p>
  </div>

  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
步骤 3：创建分组按钮

要创建分组按钮，您需要将按钮包含在一个 data-role="controlgroup" 的容器中，并设置 data-type="horizontal" 或 data-type="vertical" 属性以指定按钮的排列方式。以下是一个水平排列的示例：

<div data-role="footer">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-btn-inline ui-corner-all">Button 1</a>
    <a href="#" class="ui-btn ui-btn-inline ui-corner-all">Button 2</a>
    <a href="#" class="ui-btn ui-btn-inline ui-corner-all">Button 3</a>
  </div>
</div>

以上代码将创建一个横向排列的分组按钮，每个按钮都有一个默认的边框和圆角。

步骤 4：自定义按钮样式

如果您想自定义按钮的样式，可以通过添加类名和样式来实现。例如，以下代码将添加一个名为 my-btn 的类到按钮，并将其背景颜色设置为红色：

<div data-role="footer">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-btn-inline ui-corner-all my-btn">Button 1</a>
    <a href="#" class="ui-btn ui-btn-inline ui-corner-all my-btn">Button 2</a>
    <a href="#" class="ui-btn ui-btn-inline ui-corner-all my-btn">Button 3</a>
  </div>
</div>

<style>
.my-btn {
  background-color: red;
}
</style>
步骤 5：完整示例

最后，以下是一个完整的示例，该示例演示如何使用 jQuery Mobile 创建一个带有橙色背景和白色文本的分组按钮页脚：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My App</title>

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  <style>
    .my-btn {
      background-color: #f7b731;
      color: #fff;
    }
  </style>
</head>

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Header</h1>
    </div>

    <div data-role="content">
      <p>Content goes here.</p>
    </div>

    <div data-role="footer">
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn ui-btn-inline ui-corner-all my-btn">Button 1</a>
        <a href="#" class="ui-btn ui-btn-inline ui-corner-all my-btn">Button 2</a>
        <a href="#" class="ui-btn ui-btn-inline ui-corner-all my-btn">Button 3</a>
      </div>
    </div>
  </div>
</body>
</html>

以上示例将创建一个橙色背景和白色文本的分组按钮。按钮的样式是通过添加自定义类名和自定义样式来实现的。