📅 最后修改于: 2023-12-03 15:38:03.281000 🧑 作者: Mango
jQuery Mobile 是一个非常流行的移动网页开发框架。创建一个 fieldcontain slider 可以为用户提供一个交互式的滑块，可以滑动并选择想要的值。本文将介绍如何使用 jQuery Mobile 创建 fieldcontain slider。
首先，定义一些 HTML 结构，需要两个 div，一个包含标题，一个包含滑块：
<div data-role="fieldcontain">
<label for="slider-1">选择一个值：</label>
<div data-role="fieldcontain">
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
</div>
</div>
这里我们使用了 data-role="fieldcontain"，它会自动将标签和输入框组合在一起。
<input> 标签用于创建滑块，其中 min 和 max 属性定义了滑块允许选择的最小值和最大值，value 属性定义了滑块的默认值。
然后，我们需要引入 jQuery 和 jQuery Mobile。我们可以使用以下两个链接：
<link rel="stylesheet" href="https://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
最后，我们需要将滑块初始化为 fieldcontain slider。我们可以使用以下代码：
$(document).ready(function() {
$('#slider-1').slider();
});
这将自动将滑块转换为 fieldcontain slider。
完整的 HTML 代码：
<html>
<head>
<title>Fieldcontain Slider Demo</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<label for="slider-1">选择一个值：</label>
<div data-role="fieldcontain">
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#slider-1').slider();
});
</script>
</body>
</html>
以上就是如何使用 jQuery Mobile 创建 fieldcontain slider 的介绍。