📌  相关文章
📜  如何使用 jQuery Mobile 制作水平单选按钮控件组？(1)

📅  最后修改于: 2023-12-03 15:08:21.430000             🧑  作者: Mango

如何使用 jQuery Mobile 制作水平单选按钮控件组？

jQuery Mobile是一个用于移动端网页开发的开源框架，它集成了大量的UI组件，可以帮助程序员快速制作漂亮的移动端网页。本文将介绍如何使用jQuery Mobile制作水平单选按钮控件组。

第一步：引入jQuery Mobile库

在HTML文件中引入jQuery Mobile库的CSS和JS文件，代码如下：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
第二步：创建水平单选按钮控件组

在HTML文件中创建水平单选按钮控件组的代码如下：

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>选择你喜欢的颜色:</legend>
    <input type="radio" name="color" id="color-red" value="red" checked />
    <label for="color-red">红色</label>
    <input type="radio" name="color" id="color-blue" value="blue" />
    <label for="color-blue">蓝色</label>
    <input type="radio" name="color" id="color-green" value="green" />
    <label for="color-green">绿色</label>
</fieldset>

其中，data-role="controlgroup"表示创建控件组，data-type="horizontal"表示水平排列，<legend>标签用于设置标题，<input>标签用于创建单选按钮，name属性表示单选按钮的组名，id属性表示单选按钮的标识，checked属性表示默认选中。

第三步：使用CSS美化控件组

可以使用CSS对水平单选按钮控件组进行美化，例如修改背景色、文字颜色等，代码如下：

/* 设置背景色 */
.ui-controlgroup-controls {
    background-color: #f5f5f5;
}

/* 设置文字颜色 */
.ui-radio label {
    color: #333;
}

/* 设置选中状态的背景色和文字颜色 */
.ui-radio label.ui-btn-active {
    background-color: blue;
    color: #fff;
}
完整代码

完整的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>水平单选按钮控件组</title>
    <meta charset="utf-8">
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入jQuery Mobile库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <style>
        /* 设置背景色 */
        .ui-controlgroup-controls {
            background-color: #f5f5f5;
        }

        /* 设置文字颜色 */
        .ui-radio label {
            color: #333;
        }

        /* 设置选中状态的背景色和文字颜色 */
        .ui-radio label.ui-btn-active {
            background-color: blue;
            color: #fff;
        }
    </style>
</head>
<body>
    <div data-role="page">
        <div data-role="main" class="ui-content">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>选择你喜欢的颜色:</legend>
                <input type="radio" name="color" id="color-red" value="red" checked />
                <label for="color-red">红色</label>
                <input type="radio" name="color" id="color-blue" value="blue" />
                <label for="color-blue">蓝色</label>
                <input type="radio" name="color" id="color-green" value="green" />
                <label for="color-green">绿色</label>
            </fieldset>
        </div>
    </div>
</body>
</html>

效果如下：

水平单选按钮控件组效果图

以上就是使用jQuery Mobile制作水平单选按钮控件组的方法，希望本文能对您有所帮助！