📌  相关文章
📜  如何使用 jQuery Mobile 制作基本单选按钮？(1)

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

如何使用 jQuery Mobile 制作基本单选按钮？

jQuery Mobile 是一个流行的 jQuery 插件，允许您创建具有移动设备友好 UI 的 Web 应用程序。它提供了多种 UI 控件，其中包括单选按钮。在本文中，我们将向您展示如何使用 jQuery Mobile 制作基本单选按钮。

步骤
  1. 首先，您需要将 jQuery 和 jQuery Mobile 的库文件添加到您的 HTML 文件中。您可以通过以下方式添加它们：
<head>
  <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>
  1. 接下来，您需要创建一个单选按钮组。它的语法类似于以下代码：
<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="pet" id="cat" value="cat">
    <label for="cat">Cat</label>
    <input type="radio" name="pet" id="dog" value="dog">
    <label for="dog">Dog</label>
    <input type="radio" name="pet" id="hamster" value="hamster">
    <label for="hamster">Hamster</label>
</fieldset>

在这个例子中，我们创建了一个名为 pet 的单选按钮组，并添加了三个单选按钮：Cat、Dog 和 Hamster。单选按钮的值分别为 cat、dog 和 hamster。

  1. 最后，您需要调用 jQuery Mobile 的 enhanceWithin() 方法来处理新添加的 HTML 元素。以下是完整代码：
<!DOCTYPE html>
<html>
<head>
  <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>

<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="pet" id="cat" value="cat">
    <label for="cat">Cat</label>
    <input type="radio" name="pet" id="dog" value="dog">
    <label for="dog">Dog</label>
    <input type="radio" name="pet" id="hamster" value="hamster">
    <label for="hamster">Hamster</label>
</fieldset>

<script>
$(document).ready(function() {
   $('fieldset').enhanceWithin();
});
</script>

</body>
</html>
结论

以上便是使用 jQuery Mobile 制作基本单选按钮的完整过程。通过这些简单的步骤，您可以创建一个适用于移动设备的 UI，以及易于使用的单选按钮组。