打造专属插件之Easy Slider Bar
时间:2022-04-27
本文章向大家介绍打造专属插件之Easy Slider Bar,主要内容包括引用、方法、源码、index.css、下载地址、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
引用
<link rel="stylesheet" type="text/css" href="./index.css">
<div id="slider"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
var sb = new EasySliderBar({
el: 'slider'
})
</script>
参数
Name |
Type |
Constraint |
Comment |
---|---|---|---|
el |
String |
required |
容器节点 |
max |
Number |
default 100 |
上限 |
min |
Number |
default 0 |
下限 |
scale |
Integer |
default 0 |
小数位数 |
trackHeight |
Integer |
default 10 |
轨道高度 |
type |
enum['circle', 'square', 'diamond'] |
default 'circle' |
slider bar类型 |
barNumber |
Integer |
default 1 |
slider bar数量 |
positions |
Array |
default [min...] |
slider bar初始位置 |
- 当参数 el 非法,slider bar 取消创建
- 当其他参数非法,取默认值
方法
Name |
Parameter |
Return |
Comment |
---|---|---|---|
setBarPosition |
pos, index |
void |
设置 index 指定的 slider bar 的位置为 pos,如果index === undefined,则设置所有 slider bar 的位置为 pos |
getBarPosition |
index |
Number | Array |
获取 index 指定的 slide rbar 的位置,如果index === undefined,则返回所有 slider bar 的位置数组 |
源码
index.js
/**
* Created by lonelydawn on 2017-11-20.
* EasySliderBar - Easy slider bar
*/
// Polyfill
Array.prototype.forEach = Array.prototype.forEach || function (cb) {
for (var i = 0; i < this.length; i++) {
cb(this[i], i)
}
}
Array.prototype.filter = Array.prototype.filter || function (cb) {
var arr = []
for (var i = 0; i < this.length; i++) {
if (cb[this[i], i]) {
arr.push(this[i])
}
}
return arr
}
var EasySliderBar = function (options) {
// Add class, and return the changed className
var getPushedClass = function (className, value) {
return typeof className === 'string' && typeof value === 'string'
? className.split(' ').concat(value).join(' ') : className
}
// Remove class, and return the changed className
var getRemovedClass = function (className, value) {
if (typeof className === 'string' && typeof value === 'string') {
return className.split(' ').filter(function (item) {
return item !== '' && item !== value
}).join(' ')
}
return className
}
// Get parallel pixel to scale
var getInterval = function () {
return track.clientWidth / (max - min)
}
// Limit bars' moving range
var getValidLeft = function (value) {
if (value < 0) {
return 0
} else if (value > track.clientWidth) {
return track.clientWidth
} else {
return value
}
}
// Add trigger on slidebar
var setBarMove = function (bar, index) {
bar.onmousedown = function (e) {
var start = (e || window.event).clientX
var left = Math.floor((bar.position - min) * getInterval())
bar.label.className = getRemovedClass(bar.label.className, 'hidden')
// Execute callback
onBarMoveBegin({
index: index,
position: Number(bar.position)
})
document.onmousemove = function (e) {
var movingLeft = getValidLeft(left + (e || window.event).clientX - start)
var movingPosition = (min + movingLeft / getInterval()).toFixed(scale)
bar.label.innerHTML = movingPosition
bar.style.left = movingLeft - barOffset + 'px'
onBarMoving({
index: index,
position: Number(movingPosition)
})
}
document.onmouseup = function (e) {
bar.position = (min + getValidLeft(left + (e || window.event).clientX - start) / getInterval()).toFixed(scale)
bar.label.className = getPushedClass(bar.label.className, 'hidden')
// Execute callback
onBarMoveEnd({
index: index,
position: Number(bar.position)
})
document.onmousemove = null
document.onmouseup = null
bar.releaseCapture && bar.releaseCapture()
}
bar.setCapture && bar.setCapture()
return false
}
}
var el = options.el
var scale = options.scale || 0
var min = !isNaN(options.min) ? options.min : 0
var max = !isNaN(options.max) ? (options.max > min ? options.max : min + 100) : 100
var barNumber = options.barNumber || 1
var positions = Object.prototype.toString.call(options.positions) === '[object Array]' ? options.positions : []
for (var i = 0; i < barNumber; i++) {
positions[i] = positions[i] && positions[i] >= min && positions[i] <= max ? positions[i] : min
}
var type = options.type || 'circle'
// Set bars' width and height by type
var trackHeight = !isNaN(options.trackHeight) ? options.trackHeight : 10
var barWidth = {
square: trackHeight * 2,
circle: trackHeight * 3,
diamond: 20
}[type]
var barHeight = {
square: trackHeight * 3,
circle: trackHeight * 3,
diamond: trackHeight
}[type]
var barOffset = barWidth / 2
var labelWidth = (30 + 7 * scale) || 30
var labelOffset = labelWidth / 2 - barOffset
// Get customized callback
var onBarMoveBegin = options.onBarMoveBegin || new Function()
var onBarMoving = options.onBarMoving || new Function()
var onBarMoveEnd = options.onBarMoveEnd || new Function()
var wrapper = document.getElementById(el)
if (!wrapper) {
return
}
// Init wrapper height
wrapper.style.padding = barOffset + 5 + 'px'
wrapper.style.height = trackHeight + 'px'
// Empty container
var childs = wrapper.childNodes
for (var i = childs.length - 1; i > -1; i--) {
wrapper.removeChild(childs[i])
}
// Create track
var track = document.createElement('div')
track.className = 'slider-track'
wrapper.appendChild(track)
// Create slider bar
var barStack = []
for (var counter = 0; counter < barNumber; counter++) {
var bar = document.createElement('div')
bar.className = 'slider-bar ' + type
bar.position = positions[counter]
bar.style.width = barWidth + 'px'
bar.style.height = barHeight + 'px'
bar.style.top = (trackHeight - barHeight) / 2 + 'px'
bar.style.left = Math.floor((positions[counter] - min) * getInterval()) - barOffset + 'px'
setBarMove(bar, counter)
// Create slider bar label
var label = document.createElement('div')
label.className = 'slider-label hidden'
label.style.width = labelWidth + 'px'
label.style.left = -labelOffset + 'px'
label.innerHTML = positions[counter].toFixed(scale)
bar.label = label
// Create DOM structure
bar.appendChild(label)
track.appendChild(bar)
barStack.push(bar)
}
return {
// Set some bars' position. (If index is not defined, set all.)
setBarPosition: function (pos, index) {
var set = function (bar) {
if (pos >= min && pos <= max) {
bar.position = pos
bar.style.left = Math.floor((pos - min) * getInterval()) - barOffset + 'px'
bar.label.innerHTML = Number(pos).toFixed(scale)
}
}
index ? set(barStack[index]) : barStack.forEach(function (item) {
set(item)
})
},
// Return some bars' position. (If index is not defined, return all.)
getBarPosition: function (index) {
return index >= 0 ? barStack[index].position : barStack.map(function (item) {
return item.position
})
}
}
}
index.css
.slider-track {
width: 100%;
height: 100%;
position: relative;
border-radius: 100px;
font-family: Roboto;
background-color: #e4e7ed;
}
.slider-label {
padding: 3px 0;
position: absolute;
top: -40px;
color: #fff;
font-size: 12px;
text-align: center;
border-radius: 5px;
background-color: #303133;
transition: all 300ms linear;
}
.slider-label:after {
width: 0px;
height: 0px;
border: 6px transparent solid;
border-top-color: #303133;
position:absolute;
top: 100%;
left: calc(50% - 6px);
content:""
}
.slider-label.hidden {
display: none;
}
.slider-bar {
position: absolute;
box-sizing: border-box;
}
.slider-bar:hover .slider-label {
display: block;
}
.slider-bar.circle,
.slider-bar.square {
border: 2px solid #409EFF;
background-color: #FFF;
}
.slider-bar.circle {
border-radius: 50%;
}
.slider-bar.square {
border-radius: 3px;
}
.slider-bar.diamond {
background-color: #409EFF;
}
.slider-bar.diamond:before {
width: 0px;
height: 0px;
border: 10px transparent solid;
border-bottom-color: #409EFF;
position:absolute;
bottom: 100%;
left: 0;
content:""
}
.slider-bar.diamond:after{
width: 0px;
height: 0px;
border: 10px transparent solid;
border-top-color: #409EFF;
position:absolute;
top: 100%;
left: 0;
content:""
}
源码奉上,任君 Hack 。
下载地址
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 11个JavaScript代码重构最佳实践
- Android编程实现类似天气预报图文字幕垂直滚动效果的方法
- Android 中 Tweened animation的实例详解
- Android 媒体开发之MediaPlayer状态机接口方法实例解析
- Android读取资源文件的方法
- Android 基于IntentService的文件下载的示例代码
- Android开发之底图局部加载移动的方法示例
- Ubuntu18.04下解决Qt出现qt.qpa.plugin:Could not load the Qt platform plugin “xcb“问题
- ExpandableListView实现手风琴效果
- 组复制性能 | 全方位认识 MySQL 8.0 Group Replication
- Android 中View.onDraw(Canvas canvas)的使用方法
- Android API编程之Assets文件操作示例
- Android自制精彩弹幕效果
- RollViewPager无限轮播使用方法详解
- ubuntu16.04 升级内核的方法步骤