如何使用 jQuery Mobile 创建一个 Fieldcontain 的迷你滑块？

jQuery Mobile 是一款用于创建响应式 Web 应用的框架。它提供了许多 UI 组件，包括迷你滑块。迷你滑块非常适合用于在 Web 应用中对一组相关值进行微调。

本文将向您介绍如何使用 jQuery Mobile 创建一个 Fieldcontain 的迷你滑块。在此之前，您需要为您的项目引入 jQuery Mobile。

创建 Fieldcontain

首先，让我们创建一个 Fieldcontain，它将容纳我们的迷你滑块。将以下代码复制并粘贴到您的 HTML 文件中：

<div data-role="fieldcontain">
  <label for="slider-mini">Slider:</label>
  <input type="range" name="slider-mini" id="slider-mini" value="50" min="0" max="100" data-mini="true">
</div>

此代码将创建一个包含标签和迷你滑块的 Fieldcontain。请注意，我们使用 data-mini 属性将滑块设置为迷你尺寸。

您可以在此处设置更多属性，如滑块的最小和最大值以及初始值。将您的 Fieldcontain 设计得很好后，您可以进行更多的自定义。

js 代码

为了使您的滑块生效，您需要将以下代码复制并粘贴到您的 JavaScript 文件中：

$(document).on("pagecreate", function() {
  $("#slider-mini").on("change", function() {
    var value = $(this).val();
    // 对滑块的值执行您的操作
  });
});

此代码使用 jQuery 挑选出我们的迷你滑块，并为其添加了一个 "change" 事件。每当值发生更改时，此事件将触发一个功能，您可以在其中对该值执行操作。请注意，我们在此处使用了一个 "pagecreate" 事件，这意味着代码将在页面加载时运行。

结论

至此，您已经创建了一个 Fieldcontain 的迷你滑块。您可以在其中包括更多属性和自定义，以满足您的需求。我们的 JavaScript 代码将确保您的滑块能够与您的应用程序进行交互。

### 代码片段
```html
<div data-role="fieldcontain">
  <label for="slider-mini">Slider:</label>
  <input type="range" name="slider-mini" id="slider-mini" value="50" min="0" max="100" data-mini="true">
</div>

$(document).on("pagecreate", function() {
  $("#slider-mini").on("change", function() {
    var value = $(this).val();
    // 对滑块的值执行您的操作
  });
});