博客

如何使用jQuery Mobile制作垂直的Radio按钮控制组

  • Post category:jquery

下面是如何使用jQuery Mobile制作垂直的Radio按钮控制组的完整攻略：

1. 引入jquery和jQuery Mobile库文件

首先，在你的html文件中引入jquery和jQuery Mobile库文件，示例代码如下：

<head>
  <meta charset="UTF-8">
  <title>Radio按钮控制组</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. 创建Radio按钮控制组

接下来，我们需要创建一个Radio按钮控制组，让用户可以选择其中的一个选项。我们可以使用fieldset和label元素来创建Radio按钮控制组，并给每个选项设置不同的值和文本。例如：

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>您最喜欢的颜色是？</legend>
    <input type="radio" name="color" id="red" value="red">
    <label for="red">红色</label>
    <input type="radio" name="color" id="green" value="green">
    <label for="green">绿色</label>
    <input type="radio" name="color" id="blue" value="blue">
    <label for="blue">蓝色</label>
  </fieldset>
</div>

在上面的代码中，我们使用了fieldset元素来创建一个Radio按钮控制组，其中每个选项都是一个input元素和对应的label元素。注意，input元素的type属性必须设置为radio，并且name属性必须相同才能实现单选功能。

3. 添加样式和布局

默认情况下，jQuery Mobile会将Radio按钮控制组渲染成横向布局，但是我们需要垂直布局，这时我们可以添加一些样式来设置宽度和高度。例如：

<style>
  .ui-radio label {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    height: auto;
    width: 90%;
    text-align: left;
  }
</style>

在上面的代码中，我们使用了CSS选择器.ui-radio label来选中每个选项的label元素，并为其添加了一些样式，例如设置display属性为block，让每个选项单独占一行；设置margin-bottom属性为10px，给每个选项之间添加一些间隔；设置border属性为1px的灰色实线，让每个选项有一定的边框；设置padding属性为10px，增加每个选项内部的间隔；设置height属性为auto，让每个选项的高度自适应；设置width属性为90%，让每个选项的宽度占用父元素的90%；设置text-align属性为left，让选项左对齐。

4. 完整示例代码

最终的完整示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Radio按钮控制组</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>
    .ui-radio label {
      display: block;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 10px;
      height: auto;
      width: 90%;
      text-align: left;
    }
  </style>
</head>
<body>
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>您最喜欢的颜色是？</legend>
      <input type="radio" name="color" id="red" value="red">
      <label for="red">红色</label>
      <input type="radio" name="color" id="green" value="green">
      <label for="green">绿色</label>
      <input type="radio" name="color" id="blue" value="blue">
      <label for="blue">蓝色</label>
    </fieldset>
  </div>  
</body>
</html>

5. 其他示例

除了上面的示例，我们还可以使用data-type="vertical"属性来设置垂直布局，例如：

<fieldset data-role="controlgroup" data-type="vertical">
  <legend>您最喜欢的颜色是？</legend>
  <input type="radio" name="color" id="red" value="red">
  <label for="red">红色</label>
  <input type="radio" name="color" id="green" value="green">
  <label for="green">绿色</label>
  <input type="radio" name="color" id="blue" value="blue">
  <label for="blue">蓝色</label>
</fieldset>

这样，就可以不使用自定义样式，直接实现垂直布局。

Tags: