如何使用 jQuery Mobile 制作垂直单选按钮控件组？

简介

jQuery Mobile 是一款基于 HTML5 的 UI 框架，专注于移动端 Web 开发，可以快速创建 Web 应用程序的 UI，提供了大量可定制的 UI 组件。本教程将介绍如何使用 jQuery Mobile 制作垂直单选按钮控件组。

准备工作

在开始本教程之前，您需要了解以下知识：

• HTML
• CSS
• jQuery Mobile 框架

同时，您需要在您的项目中引入 jQuery Mobile 框架。您可以通过以下方式引入：

<!-- 加载 jQuery Mobile CSS -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 加载 jQuery 和 jQuery Mobile JS -->
<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>

创建垂直单选按钮控件组

要创建垂直单选按钮控件组，您可以使用 jQuery Mobile 的 Checkbox/Radio 组件。Checkbox/Radio 组件是一种非常常见的 HTML 表单元素，供用户选择一个或多个选项。

添加 Radio 标记

要创建 Radio 单选按钮，需要使用 HTML <input> 元素，并将其 type 属性设置为 radio。然后，将每个单选按钮的值设置为不同的值，以便从表单中区分每个选项。例如：

<form>
  <fieldset data-role="controlgroup" data-type="vertical">
    <legend>请选择一个选项：</legend>
    <label for="radio-choice-1">选项 1</label>
    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1">

    <label for="radio-choice-2">选项 2</label>
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">

    <label for="radio-choice-3">选项 3</label>
    <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
  </fieldset>
</form>

在这个例子中，我们创建了一个包含三个单选按钮的垂直单选按钮组。请注意，每个单选按钮都具有一个唯一的 ID，用于标识该元素，并由于具有相同的 name 属性而彼此关联。

应用样式

默认情况下，jQuery Mobile 的 Checkbox/Radio 组件将应用 ThemeRoller 中定义的默认样式。但是，您可以使用 data-theme 属性将选项切换到不同的主题。例如：

<label for="radio-choice-1" data-theme="a">选项 1</label>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" data-theme="a">

在这个例子中，我们将标签和单选按钮的 data-theme 属性设置为 "a"，以将它们的样式切换到 ThemeRoller 的 "a" 主题。

效果预览

使用上述 HTML 代码生成的垂直单选按钮控件组的效果如下所示：

总结

恭喜您成功创建了一个垂直单选按钮控件组！使用 jQuery Mobile 框架，您可以更快地创建移动应用程序，而不必从头开始编写所有 UI 组件。希望这个教程对您有所帮助！