容器節點
maxnumber
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
滑塊移動結束時觸發
onbarmovebegin(index, position)
onbarmoving(index, position)
onbarmoveend(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 的位置陣列
/**
* created by lonelydawn on 2017-11-20.
* easysliderbar - easy slider bar
*/// polyfill
array.prototype.foreach = array.prototype.foreach || function (cb)
}array.prototype.filter = array.prototype.filter || function (cb)
} return arr
}var easysliderbar = function (options)
// remove class, and return the changed classname
var getremovedclass = function (classname, value) ).join(' ')
} return classname
} // get parallel pixel to scale
var getinterval = function ()
// limit bars' moving range
var getvalidleft = function (value) else if (value > track.clientwidth) else
} // add trigger on slidebar
var setbarmove = function (bar, index) )
document.onmousemove = function (e) )
}document.onmouseup = function (e) )
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++)
var type = options.type || 'circle'
// set bars' width and height by type
var trackheight = !isnan(options.trackheight) ? options.trackheight : 10
var barwidth = [type]
var barheight = [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()
return
} // empty container
for (var i = childs.length - 1; i > -1; i--)
// create track
var track = document.createelement('div')
track.classname = 'slider-track'
// create slider bar
var barstack =
for (var counter = 0; counter < barnumber; counter++)
return
}index ? set(barstack[index]) : barstack.foreach(function (item) )
},// return some bars' position. (if index is not defined, return all.)
getbarposition: function (index) )
} }}
.slider-track
.slider-label
.slider-label:after
.slider-label.hidden
.slider-bar
.slider-bar:hover .slider-label
.slider-bar.circle,
.slider-bar.square
.slider-bar.circle
.slider-bar.square
.slider-bar.diamond
.slider-bar.diamond:before
.slider-bar.diamond:after
原始碼奉上,任君 hack 。
github
PHPStrom如何打造專屬IDE
ctrl o 在乙個類中尋找相應方法,直接輸入搜尋 ctrl e 開啟最近瀏覽記錄 ctrl space 開啟語法提示 ctrl y 刪除當前行或選中內容所涉及的行 ctrl r 替換 ctrl f 查詢 ctrl 收縮展開 ctrl 摺疊選中的 的 ctrl 匹配 ctrl x 剪下行,不選中,直...
打造自己的專屬遊戲 傳奇私服搭建
想擁有你知道的專屬遊戲嗎 想當gm嗎 想在遊戲裡最強嗎 教你架設傳奇sf 年輕帥靚正文章教程 需要的兩個檔案.dbc 2000.exe 資料庫 mirserver sf服務端 ok 開始 安裝好資料庫之後把 mirserver 這個檔案放入d盤 因為是預設的路徑 所以放在d盤 在把mirserver...
小鵝通幫你打造「專屬私域流量」
在網路中,每個內容生產者都希望得到 專屬私域流量 小鵝通現在開展免費試用 7 天,幫你打造 專屬私域流量 小鵝通的私域流量,核心業務優勢顯著 據了解,小鵝通滿足客戶 線上化 需求的主要核心能力saas服務產品,擁有獲客轉化 課堂 使用者沉澱三大優勢,全面為商家賦能,幫助企業打通線上線下,連線流量渠道...