基于jQuery实现多功能滑块特效插件

基于jQuery实现多功能滑块特效插件

一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。这些滑块能够在屏幕上面显示良好的分辨率,通常在触摸屏设备上,我们可以向左或向右滑动来浏览不同的图像。

使用方法
在页面中引入jquery和r-slider.js文件。

1
2
<script src="js/jquery.min.js"></script>
<script src="js/r-slider.js"></script>

HTML结构
使用一个div作为滑块的容器。

1
<div id="container"></div>

CSS样式
为滑块添加下面的CSS样式。

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
#container .r-slider-line {
 background: #4b5459;
 border-radius: 4px;
}
 
#container .r-slider-fill {
 background: #4b5459;
}
 
#container .r-slider-button {
 box-shadow: inset 0 0 0 4px #c4c8cc;
 border-radius: 100%;
  text-align: center;
}
 
#container .r-slider-label {
 position: relative;
  top: 13px;
  font-size: 20px;
  color: #c4c8cc;
 z-index: 1000;
}
 
#container .r-slider-label:before {
 content: "";
  position: absolute;
  top: -13px;
  left: 5px;
  width: 30px;
  height: 30px;
  background: #4b5459;
 border-radius: 100%;
  z-index: -1;
}

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该滑块插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var mySlider = new slider({
 
    // container element
    container: "#container",
 
    // start/end values
    start: -100,
    end: 100,
 
    // custom step
    step: 1,
 
    // initial value
    value: 0
     
});

配置参数
该滑块插件的可用配置参数有:

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
var mySlider = new slider({
 
    // container element
    container: "#container",
 
    // start/end values
    start: -100,
    end: 100,
 
    // min/max values
    min: -50,
    max: 80,
 
    // custom step
    step: 1,
 
    // initial value
    value: 0,
 
    // shows value on drag
    showValue: true,
 
    // always shows value
    fixValue: true,
 
    // shows labels
    pinStep: 10,
 
    // custom label step
    labelStep: 40,
 
    // disables drag
    changable: false,
 
    // custom styles
    style: {
      line_width: 0
    },
 
    // for toggle switch
    text: ["ON", "OFF"],
     
    // callback
    ondrag: function(){}
 
});
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论