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

jQuery Mobile 可以快速简便地创建响应式的表单元素。其中一个特性就是可以通过水平分组按钮来让表单看起来更加整洁。下面我们将介绍如何使用 jQuery Mobile 来实现水平分组按钮。

HTML

创建一个表单，在 form 标签中添加 data-role="fieldcontain" 用于包含表单元素。在表单中添加一个 fieldset 标签，并在其中添加多个 input 标签并设置 type 属性为 "radio"。将每个 input 标签的 label 标签和 input 标签用于关联，并且为每个 input 标签的 value 属性赋值。例如：

<form>
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
      <legend>Vertical:</legend>
      <input type="radio" name="radio-choice-h-2" id="vertical-choice-1" value="on">
      <label for="vertical-choice-1">One</label>

      <input type="radio" name="radio-choice-h-2" id="vertical-choice-2" value="off">
      <label for="vertical-choice-2">Two</label>

      <input type="radio" name="radio-choice-h-2" id="vertical-choice-3" value="other">
      <label for="vertical-choice-3">Three</label>
    </fieldset>
  </div>
</form>

CSS

为了使表单看起来整洁，我们需要为其添加一些 CSS 样式。使用下面的 CSS 样式，可以使表单元素水平排列：

.ui-controlgroup-horizontal .ui-radio {
    display: inline-block;
    width: auto;
    margin-right: .5em;
    margin-left: 0;
    vertical-align: middle;
}

.ui-checkbox-h .ui-btn.ui-last-child {
    border-radius: 0 3px 3px 0;
}

.ui-checkbox-h .ui-btn.ui-first-child {
    border-radius: 3px 0 0 3px;
    margin-left: 0;
}

.ui-checkbox-h .ui-btn.ui-radio-off.ui-btn-active.ui-btn-inherit {
    border-radius: 0;
}

结语

以上就是使用 jQuery Mobile 创建表单元素水平分组按钮的方法了。有了这个特性，你的表单将更加整洁干净，更加用户友好。

注：以上代码片段使用 Markdown 格式返回。