如何使用jQuery Mobile创建迷你水平选择控件组

使用jQuery Mobile创建迷你水平选择控件组可以通过以下步骤来完成：

添加jQuery Mobile库

首先需要在你的网站中添加jQuery Mobile库，可以使用如下CDN引入该库。

<head>
    <!-- 引入 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>
</head>

创建HTML结构

可以使用以下HTML结构来创建迷你水平选择控件组。

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" value="on">
    <label for="radio-choice-h-1a">選項1</label>
    <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" value="off">
    <label for="radio-choice-h-1b">選項2</label>
    <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" value="other">
    <label for="radio-choice-h-1c">選項3</label>
</div>

这里使用了data-role、data-type和data-mini属性来创建迷你水平选择控件组，name属性用于将单选框分组，id属性和label标签用于将单选框和标签相关联。

自定义样式

可以使用CSS样式来自定义迷你水平选择控件组的样式，例如：

.ui-controlgroup-horizontal .ui-radio {
    margin-top: 0;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

这里使用了ui-controlgroup-horizontal和ui-radio选择器来定位迷你水平选择控件组和单选框的样式，可以根据需求进行调整。

示例1：

下面是一个示例，它显示了如何创建一个简单的迷你水平选择控件组。

<!DOCTYPE html>
<html>
<head>
    <title>迷你水平选择控件组示例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery核心库和 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/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

    <!-- 自定义样式 -->
    <style>
        .ui-controlgroup-horizontal .ui-radio {
            margin-top: 0;
            margin-left: 0.5em;
            margin-right: 0.5em;
        }
    </style>
</head>
<body>
    <!-- 迷你水平选择控件组 -->
    <div data-role="controlgroup" data-type="horizontal" data-mini="true">
        <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" value="on">
        <label for="radio-choice-h-1a">選項1</label>
        <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" value="off">
        <label for="radio-choice-h-1b">選項2</label>
        <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" value="other">
        <label for="radio-choice-h-1c">選項3</label>
    </div>
</body>
</html>

示例2：

下面是另一个示例，它显示了如何创建一个带有图标的迷你水平选择控件组。

<!DOCTYPE html>
<html>
<head>
    <title>带有图标的迷你水平选择控件组示例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery核心库和 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/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

    <!-- 自定义样式 -->
    <style>
        .ui-controlgroup-horizontal .ui-radio {
            margin-top: 0;
            margin-left: 0.5em;
            margin-right: 0.5em;
        }
        .ui-icon-choice-a:before {
            background-image: url("https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/images/icons-18-white.png");
            background-position: -144px 0;
            background-repeat: no-repeat;
        }
        .ui-icon-choice-b:before {
            background-image: url("https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/images/icons-18-white.png");
            background-position: -162px 0;
            background-repeat: no-repeat;
        }
        .ui-icon-choice-c:before {
            background-image: url("https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/images/icons-18-white.png");
            background-position: -180px 0;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <!-- 带有图标的迷你水平选择控件组 -->
    <div data-role="controlgroup" data-type="horizontal" data-mini="true">
        <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="choice-a" checked="checked">
        <label for="radio-choice-h-2a" class="ui-icon-choice-a">选项1</label>
        <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="choice-b">
        <label for="radio-choice-h-2b" class="ui-icon-choice-b">选项2</label>
        <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="choice-c">
        <label for="radio-choice-h-2c" class="ui-icon-choice-c">选项3</label>
    </div>
</body>
</html>

以上就是使用jQuery Mobile创建迷你水平选择控件组的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建迷你水平选择控件组 - Python技术站