博客

如何使用jQuery Mobile创建一个迷你尺寸的滑块

  • Post category:jquery

使用jQuery Mobile创建迷你尺寸的滑块可以通过以下步骤完成：

  1. 引入必要的库文件

首先，需要在HTML文件中引入jQuery核心库和jQuery Mobile库。可以使用CDN方式引入，例如：

<head>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
  1. 创建滑块

接下来，创建一个<input>标签并指定type="range"属性来创建滑块。例如：

<input type="range" name="slider" id="slider" value="50" min="0" max="100">

上述代码创建了一个id为slider的滑块，初始值为50，最小值为0，最大值为100。

  1. 自定义滑块样式

为了创建迷你尺寸的滑块，可以使用jQuery Mobile在滑块上应用自定义样式。

<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-mini="true" data-track-theme="b" data-theme="b">

在上面的代码中，data-mini="true"属性会让滑块变得更小。其中，data-track-theme="b"属性将滑块滑动轨迹的颜色设为了蓝色，data-theme="b"属性则将整个滑块的颜色设为了蓝色。

  1. 显示滑块的当前值

可以使用jQuery Mobile提供的slider()方法来获取滑块的当前值，并通过一个标签将其显示在页面上。

<div data-role="rangeslider">
  <label for="range-1a">范围:</label>
  <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
  <label for="range-1b">范围:</label>
  <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>

<p>当前值: <span id="slider-value"></span></p>

<script>
  $(document).on("pagecreate", function() {
    $(document).on("change", "#range-1a, #range-1b", function() {
      var min = parseInt($("#range-1a").val());
      var max = parseInt($("#range-1b").val());
      $("#slider-value").html(min + " - " + max);
    });
  });
</script>

上面代码创建了一个范围选择滑块，并在页面上显示了当前的值。其中，data-role="rangeslider"属性用于创建范围选择滑块，$(document).on("change", "#range-1a, #range-1b", function(){...}是一个监听器，用于根据滑块的值变化来更新当前值的显示。

示例说明：

  1. 普通滑块示例

  2. 范围选择滑块示例

Tags: