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

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

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

使用 jQuery Mobile，可以轻松地创建水平分组按钮，增强表单元素的可用性。下面我们将介绍如何在表单中使用 jQuery Mobile 的水平分组按钮。

1. 引入 jQuery Mobile 库

在使用 jQuery Mobile 实现水平分组按钮前，需首先引入 jQuery Mobile 库。可以在 HTML 页面上添加以下代码引入需要的库：

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
2. 创建表单标记

在页面的 <form> 标记中添加表单元素，按需显示 label 标记等内容，如下所示：

<form>
  <fieldset data-role="controlgroup">
    <legend>水平分组按钮</legend>
    <input type="checkbox" name="fruit-1" id="fruit-1" value="apple">
    <label for="fruit-1">苹果</label>
    <input type="checkbox" name="fruit-2" id="fruit-2" value="orange">
    <label for="fruit-2">橙子</label>
    <input type="checkbox" name="fruit-3" id="fruit-3" value="banana">
    <label for="fruit-3">香蕉</label>
    <input type="checkbox" name="fruit-4" id="fruit-4" value="grape">
    <label for="fruit-4">葡萄</label>
  </fieldset>
</form>
3. 设置样式

使用 jQuery Mobile 的样式可以让表单元素更加美观、易用。为了实现水平分组按钮，还需要将 fieldset 标记的 data-role 属性设置为 'controlgroup'，如下所示：

<fieldset data-role="controlgroup">

设置后，表单元素将自动排列成一行，并让用户能够选择多个选项。

4. 完整代码片段

组合上述代码片段，即可实现 jQuery Mobile 的水平分组按钮，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>水平分组按钮示例</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
  <form>
    <fieldset data-role="controlgroup">
      <legend>水平分组按钮</legend>
      <input type="checkbox" name="fruit-1" id="fruit-1" value="apple">
      <label for="fruit-1">苹果</label>
      <input type="checkbox" name="fruit-2" id="fruit-2" value="orange">
      <label for="fruit-2">橙子</label>
      <input type="checkbox" name="fruit-3" id="fruit-3" value="banana">
      <label for="fruit-3">香蕉</label>
      <input type="checkbox" name="fruit-4" id="fruit-4" value="grape">
      <label for="fruit-4">葡萄</label>
    </fieldset>
  </form>
</body>
</html>

以上就是使用 jQuery Mobile 实现水平分组按钮的全部内容与步骤。