下面我将详细讲解如何使用jQuery Mobile创建迷你水平选择控件组的完整攻略，包含如下几个步骤：
1. 引入jQuery Mobile库
要使用jQuery Mobile创建控件，首先需要引入jQuery库和jQuery Mobile库。可以通过以下方式在你的HTML代码中引入它们：
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
2. 创建基本的HTML结构
在HTML代码中创建一个 <fieldset> 元素，用于包含所有的单选框。然后在该元素中添加多个 <input> 元素，每个元素用来表示一个选项，并且有相同的 name 属性（这是为了保证它们是一组单选按钮）。每个元素的 type 属性可以设置为 “radio”，它们的值应该不同，用来表示每个选项的不同值。最后，在以上元素中添加一个 <label> 元素，用来对单选按钮组进行描述。
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="option" id="option1" value="option1">
<label for="option1">选项1</label>
<input type="radio" name="option" id="option2" value="option2">
<label for="option2">选项2</label>
<input type="radio" name="option" id="option3" value="option3">
<label for="option3">选项3</label>
</fieldset>
其中，data-role="controlgroup" 属性用于将所有单选按钮放置在一个组中，并将它们呈现为一个组。data-type="horizontal" 属性用于将单选按钮呈现为水平的，如果移除该属性，则单选按钮将以竖直方式排列。
3. 获取选择结果
选择结果可以在每次单选按钮状态改变时通过jQuery获取。例如，以下代码将在单选按钮状态改变时弹出选中的选项的值：
$('input[name="option"]').change(function() {
var selectedOption = $('input[name="option"]:checked').val();
alert(selectedOption);
});
其中，$('input[name="option"]').change() 表示在该单选按钮组中的任意单选按钮状态改变时执行后续代码。$('input[name="option"]:checked').val() 表示获取当前选中的单选按钮的值。
示例
下面提供两个示例来演示如何创建迷你水平选择控件：
示例1
这个示例引入了jQuery库和jQuery Mobile库。它创建了一组水平的单选按钮，并弹出选中的选项的值。
<!DOCTYPE html>
<html>
<head>
<title>水平单选按钮选择器 - 示例1</title>
<meta charset="utf-8">
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="option" id="option1" value="option1">
<label for="option1">选项1</label>
<input type="radio" name="option" id="option2" value="option2">
<label for="option2">选项2</label>
<input type="radio" name="option" id="option3" value="option3">
<label for="option3">选项3</label>
</fieldset>
<script>
$('input[name="option"]').change(function() {
var selectedOption = $('input[name="option"]:checked').val();
alert(selectedOption);
});
</script>
</body>
</html>
示例2
这个示例创建了一组水平的单选按钮，并使用CSS样式对其进行了调整，使其呈现出迷你的效果。
<!DOCTYPE html>
<html>
<head>
<title>水平单选按钮选择器 - 示例2</title>
<meta charset="utf-8">
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
/* 将单选按钮的大小设置为16px */
.ui-radio label {
width: 16px;
height: 16px;
margin: 0.5em 0;
}
/* 将单选按钮的图标大小设置为8px */
.ui-radio .ui-icon {
width: 8px;
height: 8px;
}
/* 设置单选按钮之间的距离为4px */
.ui-radio, .ui-radio label {
margin-right: 4px;
}
</style>
</head>
<body>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="option" id="option1" value="option1">
<label for="option1">A</label>
<input type="radio" name="option" id="option2" value="option2">
<label for="option2">B</label>
<input type="radio" name="option" id="option3" value="option3">
<label for="option3">C</label>
</fieldset>
<script>
$('input[name="option"]').change(function() {
var selectedOption = $('input[name="option"]:checked').val();
console.log(selectedOption);
});
</script>
</body>
</html>
在上述示例中，我们通过添加 data-mini="true" 属性将单选按钮变成了迷你的水平选择控件。此外，我们还通过CSS样式对其进行了调整，包括设置单选按钮的大小和图标大小，以及设置单选按钮之间的距离。最后，我们在控制台输出了选中的值，而不是弹出一个提示框来显示结果。