如何使用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按钮控制组,让用户可以选择其中的一个选项。我们可以使用fieldsetlabel元素来创建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>

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