文档章节

打造专属插件之Easy Slider Bar

lonelydawn
 lonelydawn
发布于 01/11 15:22
字数 1039
阅读 293
收藏 1
点赞 0
评论 5

引用

<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',
        onBarMoveBegin: function (index, position) {
            // do sth
        }
	})
</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初始位置
onBarMoveBegin Function default new Function 滑块移动开始时触发
onBarMoving Function default new Function 滑块移动时触发
onBarMoveEnd Function default new Function 滑块移动结束时触发
  • 当参数 el 非法,slider bar 取消创建
  • 当其他参数非法,取默认值

事件

onBarMoveBegin(index, position)

onBarMoving(index, position)

onBarMoveEnd(index, position)

  • index        index 标示正在移动的滑块下标(适用于存在多个滑块时)

  • position    标示滑块当前所处位置

方法

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 。

 

下载地址

GitHub

© 著作权归作者所有

共有 人打赏支持
lonelydawn
粉丝 41
博文 50
码字总数 52905
作品 0
闵行
前端工程师
加载中

评论(5)

红薯
红薯

引用来自“lonelydawn”的评论

引用来自“红薯”的评论

引用来自“lonelydawn”的评论

引用来自“红薯”的评论

放到码云呗:)

回复@红薯 : 好呀
弄好给我个地址,我看合适的话推荐一下:)

回复@红薯 : 薯大, 地址奉上: https://gitee.com/lonelydawn/MyWidgets/tree/master/slider

好像还比较早期啊,现在只有两个组件,期待进一步完善
lonelydawn
lonelydawn

引用来自“红薯”的评论

引用来自“lonelydawn”的评论

引用来自“红薯”的评论

放到码云呗:)

回复@红薯 : 好呀
弄好给我个地址,我看合适的话推荐一下:)

回复@红薯 : 薯大, 地址奉上: https://gitee.com/lonelydawn/MyWidgets/tree/master/slider
红薯
红薯

引用来自“lonelydawn”的评论

引用来自“红薯”的评论

放到码云呗:)

回复@红薯 : 好呀
弄好给我个地址,我看合适的话推荐一下:)
lonelydawn
lonelydawn

引用来自“红薯”的评论

放到码云呗:)

回复@红薯 : 好呀
红薯
红薯
放到码云呗:)
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ContextMenu 用于创建右键弹......

晨曦之光
2012/03/09
406
0
10 款最新的 jQuery 内容滑块插件

本篇文章介绍10款新鲜、有用的jQuery内容导航插件,肯定是免费的了,希望对你有帮助。 列表如下: jQuery HTML Content Slider More Information on jQuery HTML Content Slider Awkward Sh...

小卒过河
2011/09/15
4.1K
2
28 个很有用的 JQuery Sliders 插件

SlideDeck jQuery plugin SlideDeck Lite 是 SlideDeck Pro 的功能限制版本。很专业。 Automatic Image Slider w/ CSS & jQuery Quicksand Move Elements with Style Nivo – A new jQuery i......

小编辑
2011/09/02
2.9K
3
jquery插件整理篇(三)图片展示插件

(1)imgAreaSelect imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。 imgAreaSelect (2)Easy Slide EasySlide 是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个...

楚广明
2011/12/18
0
0
基于Jquery的图片展示插件--flashSlider

大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如Easy Slider ,写这个插件也主要是在Easy Slider基础上改动的,由于有点像flash图片展示的效果,...

匿名
2010/01/07
12K
0
19 个 jQuery 图片滑动插件和教程

这里介绍的 19 个 jQuery 的图片滑动插件和教程,效果十分精美,风格迥异,你,值得拥有! Create an Image Rotator with Description (CSS/jQuery) Create a Slick and Accessible Slidesho...

红薯
2011/07/07
7.4K
12
2009 年度最佳 jQuery 插件

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesig...

红薯
2009/12/12
2K
0
10款顺手的jQuery 幻灯插件推荐

今天分享的是10款简单易用,十分顺手的10款jquery 幻灯插件,其中大部分都有教程和演示。 具体列表如下: Creating Your Own Slider Plugin View Demo Easy Slider View Demo Slick Accessib...

老枪
2011/06/05
3.3K
6
10个Jquery幻灯片插件教程

当有大量的内容或者图片需要在你的网站或者BLOG上展示的时候,以幻灯片滑动的方式是一个不错的选择,这种效果常用于公司网站或者个人BLOG。常听有人说jquery 比较难学,只要你感兴趣,实现幻...

灵动生活
2010/12/14
0
0
jquery实现的相册怎么处理尺寸不符合要求的图片?

找到很多由jquery实现的相册插件例如easy slider等,但是好像都要必须符合固定的相册尺寸才能完美的展示出来。是不是就要在用户上传图片的时候就把图片按照固定尺寸压成缩略图,不管走不走形...

Diablo.Wu
2011/06/09
700
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微服务架构下的安全认证与鉴权

微服务下常见认证解决方案; OAuth认证与授权; JWT认证介绍; Spring Cloud的OAuth2实现; 单体应用转变为分布式应用 单体应用转变为分布式应用在架构方式上存在较大区别,单体应用下的简单...

Java大蜗牛
24分钟前
0
0
前端面试题汇总

最近在复习,准备找工作了,特此总结一下前端的相关知识。 1.获取浏览器URL中查询字符的参数: function getQuery(name){    var reg = new RegExp("(^|&)"+name+"=([^&]*)"(&|$));...

凛冬来袭
24分钟前
0
0
可持续发展的学习道路

与其要求别人,不如提升自己 内心渴望进步 经常做出改变现有模式,不断学习 寻找资源,整合资源,不断熟练这种模式 渠道很重要 先打开新世界的航路

狮子狗
29分钟前
0
0
apollox-lua开源项目 示例codepen2

今天在示例上增加了几个功能, 首先添加js array的标准库。 所有js array的方法目前都支持了。 添加查看code模式。 点击查看code可以看到生成的lua代码。默认web模式需要把标准库连接进来, ...

钟元OSS
44分钟前
0
0
javascript性能优化之避免重复工作

javascript最重要也最根本的性能优化标准之一是避免工作,避免工作又包括两点,第一,不做不必要的工作,第二,不做重复的已经完成的工作。第一部分可以通过代码重构完成,第二部分不做重复的...

老韭菜
56分钟前
0
0
缓存穿透、并发和雪崩那些事

0 题记 缓存穿透、缓存并发和缓存雪崩是常见的由于并发量大而导致的缓存问题,本文讲解其产生原因和解决方案。 缓存穿透通常是由恶意攻击或者无意造成的;缓存并发是由设计不足造成的;缓存雪...

Java填坑之路
59分钟前
1
0
项目jar包管理构建工具---Maven

一、what is Maven? 我们来寻找一下官网,里面介绍了maven到底是什么?下面一句话就有讲解到:Apache Maven is a software project management and comprehension tool. Based on the conc...

一看就喷亏的小猿
今天
0
0
JVM学习手册(一):查看堆内存使用情况以及排错

平时出现内存溢出以及死锁,一般处理方式都是查看日志,找到抛出异常的代码行,然后本地分析代码,但是这样对于线上排查十分糟糕,这段时间在研究JVM发现了几个比较好的工具和指令. 1.针对频繁GC和...

勤奋的蚂蚁
今天
1
0
17.TCP:传输控制协议

介绍 TCP和UDP使用同一网络层(IP),但TCP提供了面向连接、可靠的传输层服务 TCP传输给IP层的信息单位称为报文段或段 TCP通过如下方式保证可靠性: 应用数据被分割成TCP认为最合适发送的数据...

loda0128
今天
0
0
重装Oracle时出现environment variable "PATH"错误的解决办法

在win7 64位下重新安装oracle 11g,一直报environment variable "PATH"的错误,按说明将path里多余的路径删除,但没办法解决。选择忽略错误继续安装,装一半会报CRC错误,还是安装失败。最好...

良言
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部