jQuery Mobile 创建水平选择控件组

水平选择控件组是一个接口组件，使用户能够从水平排列的一系列选择中进行选择。

步骤1：在项目中包含jQuery Mobile

在创建水平选择控件组的第一步中，将jQuery Mobile包含在您的项目中。可以直接将最新版本的jQuery Mobile添加到您的HTML页面中，也可以通过内容交付网络（CDN）来实现。

步骤

从给定的CDN URL加载jQuery Mobile的CSS文件
从给定的CDN URL加载jQuery库
从给定的CDN URL加载jQuery Mobile的JS文件

示例

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

<!-- Include jQuery Mobile JS -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

步骤2：创建水平选择控制群组

一旦将jQuery Mobile添加到您的项目中，使用HTML标记来添加水平选择控制群组。

步骤

使用data-role属性设置为”controlgroup”和data-type属性设置为”horizontal”来标识包含元素的容器。
在容器元素内创建子元素来表示各个选项。
对于每个选项，创建一个具有以下属性的元素：
- href属性设置为链接URL（在本例中为”#”）。
- class属性设置为”ui-btn ui-corner-all ui-shadow”。
- 表示选项标签的文本内容。
- 对于每个选项，重复步骤3。
- 将元素作为子元素放置在容器元素内。
- 使用CSS按需设置选项和容器元素的样式。

示例

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn ui-corner-all ui-shadow" data-icon="star">Option 1</a>
  <a href="#" class="ui-btn ui-corner-all ui-shadow" data-icon="check">Option 2</a>
  <a href="#" class="ui-btn ui-corner-all ui-shadow">Option 3</a>
  <a href="#" class="ui-btn ui-corner-all ui-shadow">Option 4</a>
  <a href="#" class="ui-btn ui-corner-all ui-shadow">Option 5</a>
</div>

步骤3：初始化水平选择控制组

我们必须使用JavaScript来启动水平选择控制组以使其工作。

步骤

当文档被创建或加载时，调用该函数。
该函数选择所有具有”data-role”属性值为”controlgroup”的div元素。
对所选元素调用”controlgroup()”函数以初始化控制组。
对控制组调用”container()”方法以检索其容器元素。
对容器元素调用”enhanceWithin()”方法以增强其子元素。
对增强的容器元素调用”css()”方法以将其宽度属性设置为100%。

示例

$(document).on("pagecreate", function() {
  $("div[data-role='controlgroup']").controlgroup().controlgroup("container").enhanceWithin().css("width", "100%");
});