控制组和翻转开关

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

控制组

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

1)创建index3.html文件

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

2)创建字段集

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

    
Click here
  

3)创建控制组

id使用 标签的复选框：

Fruits

Mango
 
Click here
    

4)创建更多复选框

现在，我们将通过以下方式添加更多复选框以查看控制组的确切功能：

        
Fruits
        
        Mango
        
        Banana
        
        Graps    
        
        Papaya    
    
        
            Click here
 

5)使用data-mini属性

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

拨动开关

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

主题化

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

• ui-flip开关这是flip开关的最外层容器。
• ui-flipswitch-on是翻转开关的打开状态标签。
• ui-flipswitch-off是翻转开关的关闭状态标签。
• ui-flipswitch-input这是翻盖开关的输入复选框元素。

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

1)创建index4.html文件

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

2)创建标签并翻转开关

我们将转到第1页的可折叠组的末尾。我们将为翻转开关创建标签。我们将使用输入标签来创建翻转开关，并提供type =“ checkbox”，ID和data-role =“ flipswitch”。此data-role属性更改复选框的外观，并创建一个翻转开关。我们将通过以下方式安排所有这些属性：

Flip switch