📌  相关文章
📜  如何使用 jQuery Mobile 使表单元素水平分组按钮？(1)

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

如何使用 jQuery Mobile 使表单元素水平分组按钮？

在 jQuery Mobile 中，您可以使用水平分组按钮来组织表单元素。这些按钮可以帮助用户快速选择特定选项，并使表单更加易于浏览。

以下是使用 jQuery Mobile 创建水平分组按钮的步骤。

步骤 1：包含相关的库

首先，您需要在 HTML 中包含 jQuery 和 jQuery Mobile 库。您可以从官方网站上下载这些库，也可以使用 CDN 服务。

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

步骤 2：创建表单元素

创建您想要包含在水平分组按钮中的表单元素。在本例中，我们将创建一个包含两个输入框和一个提交按钮的表单。

<form>
  <fieldset>
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username">

    <label for="password">密码：</label>
    <input type="password" name="password" id="password">

    <button type="submit">登录</button>
  </fieldset>
</form>

步骤 3：将表单元素转换为水平分组按钮

要将表单元素转换为水平分组按钮，请将它们包裹在一个 div 元素中，并为该元素添加 data-role="controlgroup" 属性。然后，将元素的 type 属性设置为 "radio"。您还可以为每个元素添加 id 和 for 属性，以确保标签与相应的元素匹配。

<form>
  <fieldset>
    <div data-role="controlgroup">
      <label for="username">用户名：</label>
      <input type="radio" name="user" id="username">

      <label for="password">密码：</label>
      <input type="radio" name="user" id="password">

      <button type="submit">登录</button>
    </div>
  </fieldset>
</form>

现在，您的表单元素应该呈现为水平分组按钮。您可以使用 CSS 样式来自定义按钮的外观，或使用 jQuery Mobile 提供的主题来改变它们的样式。

注意：在 jQuery Mobile 中，水平分组按钮要求元素具有相同的名称。在本例中，我们将 name 属性设置为 "user"，以将它们归类在一起。

完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>水平分组按钮演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
<body>
  <form>
    <fieldset>
      <div data-role="controlgroup">
        <label for="username">用户名：</label>
        <input type="radio" name="user" id="username">

        <label for="password">密码：</label>
        <input type="radio" name="user" id="password">

        <button type="submit">登录</button>
      </div>
    </fieldset>
  </form>
</body>
</html>