slideBar/index.html at master · masia-ma/slideBar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/slideBar.css">
  <script src="./js/slideBar.js"></script>
</head>
<body>
    <div style="margin: 20px 100px;">
      <div style="margin: 20px 0;">
        <p>非自由模式</p>
        <p>当前设置：最小值为10，步长为5</p>
      </div>
      <!-- 滑动条容器 -->
      <div class="sliderBar-wrapper" id="slide-bar">
        <div class="sliderBar-container">
            <!-- 整个滑动条 -->
            <div class="entire-bar" id="entire-bar"></div>
            <!-- 活动部分的滑动条 -->
            <div class="action-bar" id="action-bar"></div>
            <!-- 滑动块 -->
            <div class="action-block" id="action-block"></div>
        </div>
        <div class="sliderBar-scale"></div>
      </div>

      <div style="margin-top: 20px;">
        你想绑定的input框：<input type="text" id="inputBox">
      </div>


      <div style="margin: 20px 0;">非自由模式</div>
       <!-- 滑动条容器 -->
       <div class="sliderBar-wrapper" id="slide-bar2">
        <div class="sliderBar-container">
            <!-- 整个滑动条 -->
            <div class="entire-bar" id="entire-bar"></div>
            <!-- 活动部分的滑动条 -->
            <div class="action-bar" id="action-bar"></div>
            <!-- 滑动块 -->
            <div class="action-block" id="action-block"></div>
        </div>
        <div class="sliderBar-scale"></div>
      </div>

      <div style="margin-top: 20px;">
        你想绑定的input框：<input type="text" id="inputBox2">
      </div>


      <div style="margin-top: 20px;">
        <p>1.直接拖动小滑块或者点击滑动条区域时间，输入框的值会发生相应的改变，当你松开鼠标时，会执行你传入的回调函数，参数就是你选择的数值，类型为number</p>
        <p>2.给你所绑定的输入框输入数值，当前的输入框失去焦点或者你敲击回车时，小滑块会移动到相应的位置，并且执行你传入的回调函数，参数为你选择的数值，类型为number</p>
      </div>
    </div>
  <script>
    new masia.SlideBar({
      slideBar: 'slide-bar', // 必选，滑动条容器的id值
      scaleStep: 10, // 必选，刻度值的步长
      maxNumber: 100, // 必选，总数
      inputBox: 'inputBox', // 必选，绑定的input框的id值
      unit: 'G', // 设置一个单位名称，默认为空
      minNumber: 10, // 你可以设置一个用户可选的最小值，若不设置，则最小值默认为0
      defaultVal: 60, // 你可以置一个默认值，供页面实例创建完成之后使用，若不设置，则为最小值，若最小值也不设置，则为0
      freeModel: false, // 自由模式，默认开启，用户可选的数值以1为步长。关闭之后，用户选择的数值以你设置的步长为单位跳动
      numStep: 5, // 设置非自由模式下的步长，若不设置，则为刻度值步长scaleStep
      slideCompleteCallback: function (value) { // 设置选择完成之后的回调函数，只有一个参数，值为选择的数值
        console.log(value)
      }
    })
    new masia.SlideBar({
      slideBar: 'slide-bar2', // 必选，滑动条容器的id值
      scaleStep: 100, // 必选，刻度值的步长
      maxNumber: 1000, // 必选，总数
      inputBox: 'inputBox2', // 必选，绑定的input框的id值
      unit: 'G', // 设置一个单位名称，默认为空
      minNumber: 10, // 你可以设置一个用户可选的最小值，若不设置，则最小值默认为0
      defaultVal: 60, // 你可以置一个默认值，供页面实例创建完成之后使用，若不设置，则为最小值，若最小值也不设置，则为0
      freeModel: true, // 自由模式，默认开启，用户可选的数值以1为步长。关闭之后，用户选择的数值以你设置的步长为单位跳动
      slideCompleteCallback: function (value) { // 设置选择完成之后的回调函数，只有一个参数，值为选择的数值
        console.log(value)
      }
    })
  </script>
</body>
</html>