控制组和翻转开关

在我们之前的章节中，我们学习了如何通过使用可折叠内容块来完全使用最小的屏幕区域。 现在，我们将学习如何在 PhoneGap 中使用 控制组 和 翻转开关。 我们将逐一解释 控制组 和 翻转开关。

控制组

控制组是使用 JQuery 移动库组织内容的最简单方法之一。 以下是在 PhoneGap 中创建控制组的步骤：

1) 创建 index3.html 文件

我们将创建一个新的文件 index3.html，其中包含与 index2.html 中预设相同的代码。 我们稍后将在 index3.html 文件中进行更改，而不是在 index2.html 中。

2) 创建字段集

我们将在第二页的主 div 中创建字段集。 它是常规的 HTML 标签。 创建此字段集的原因是它将包含我们所有的控制组。

3) 创建控制组

我们将在<fieldset></fieldset> 标签内添加 legend 方法。 之后，我们将使用 <input></input> 标签 添加带有 id 的复选框，并使用 <label></label> 标签 添加标签，如下所示：

4) 创建更多复选框

现在，我们将添加更多复选框，以准确查看控制组的功能，如下所示：

5) 使用 data-mini 属性

我们还可以使用 JQuery 的 data-mini 属性来获得更小的复选框集。 我们将以下列方式使用它：

翻转开关

翻转开关是一个双选项选择菜单。 它是复选框的新外观。 当我们单击或滑动它时，会切换翻转开关。 我们将通过简单地将 data-role="flipswitch" 属性添加到复选框输入来创建翻转开关。

主题化

jQuery Mobile CSS 框架由 翻转开关 使用来设置其外观。 如果 翻转开关 需要特定的样式，我们将使用以下 CSS 类名来覆盖或作为 classes 选项的键：

1. ui-flip switch
   它是翻转开关的最外层容器。
2. ui-flipswitch-on
   它是翻转开关的 on 状态标签。
3. ui-flipswitch-off
   它是翻转开关的 off 状态标签。
4. ui-flipswitch-input
   它是翻转开关的输入复选框元素。

以下是在 PhoneGap 中创建 翻转开关 的步骤：

1) 创建 index4.html 文件

我们将创建一个新的文件 index4.html，其中包含与 index3.html 中预设相同的代码。 我们稍后将在 index4.html 文件中进行更改，而不是在 index3.html 中。

2) 创建标签和翻转开关

我们将转到 page1 部分的可折叠集合的末尾。 我们将为翻转开关创建一个标签。 我们将使用一个输入标签来创建翻转开关，并提供 type="checkbox"、ID 和 data-role="flipswitch"。 此 data-role 属性会更改复选框的外观并创建一个翻转开关。 我们将按以下方式排列所有这些属性：