当前页面: 开发资料首页 → Javascript 专题 → js版sliderBar(滑动条)控件
js版sliderBar(滑动条)控件
摘要: js版sliderBar(滑动条)控件
支持实时监控sliderbar的数据，允许有callback回调的函数，有示例
1、可自定样式SetStyle()
2、带有onSroll功能
3、有setSldPoint（设置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己设置sliderBar的最大值（不是sliderbar的长度，而是值）
6、自定义微调功能（setIncrement(10))，默认为5；
代码有点乱，接口不能清晰的看出来，不好意思了，先用着吧
运行代码框
<textarea class=fm id=code style="WIDTH: 510px; HEIGHT: 172px" rows=12 cols=81> HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head>
r
g
b
<script LANGUAGE="JavaScript"> /*=============================================================== // // Module : never SliderBar // Script by : never-online, blueDestiny // Updated : 2006-5-12 // Copyright : Miracle technology all reserved // Website : http://www.never-online.net // Email : blueDestiny@126.com // Blog : http://blog.csdn.net/blueDestiny // Comment : if you using never SliderBar please hold // these copyrights. // // compatible : only for IE // History : none // ================================================================*/ function neverSliderBar(id,callback) { with(this) { this.$ = document.getElementById || document.all; this.sldID = id; this.sldObj = null; this.instance = this; this.barStyle = "sliderBar"; this.objStyle = "sliderObj"; this.btnStyle = "sliderBtn"; this.sldBar = null; this.sldBtnL = null; this.sldBtnR = null; this.sldPoint = null; this.sldMoved = false; this.sldClicked = false; this.callback = callback; this.sldObjOffset = null; this.sldBarOffset = null; this.callbackArg = Array.prototype.slice.call(arguments,2); this.sldMax = 100; this.sldIncrement = 5; this.sldPoint = 0; //instance.init.call(this,id); }}; neverSliderBar.prototype.setObjStyle=function(classname) { with(this) { objStyle=classname; }}; neverSliderBar.prototype.setMaxPoint=function(maxpoint) { with(this) { sldMax=maxpoint; }}; neverSliderBar.prototype.setBtnStyle=function(classname) { with(this) { btnStyle=classname; }}; neverSliderBar.prototype.setBarStyle=function(classname) { with(this) { barStyle=classname; }}; neverSliderBar.prototype.setStyle=function() { with(this) { if (arguments[0]) barStyle=arguments[0]; if (arguments[1]) btnStyle=arguments[1]; if (arguments[2]) objStyle=arguments[2]; }}; neverSliderBar.prototype.setIncrement=function(increment) { with(this) { if (isNaN(parseInt(increment))) return; sldIncrement = parseInt(increment); }}; neverSliderBar.prototype.getSldPoint=function() { with(this) { sldBarOffset = Offset(sldBar); sldObjOffset = Offset(sldObj); var sldObjwidth = sldObjOffset.w-sldBarOffset.w; var sldBarwidth = sldBarOffset.l-sldObjOffset.l; var sldLocation = parseInt(sldBarwidth/sldObjwidth*sldMax); return sldLocation; }}; neverSliderBar.prototype.setSldPoint=function(point) { with(this) { if (isNaN(parseInt(point))) return; if (point<0) point=0; if (point>sldMax) point=sldMax; var sldObjwidth = sldObjOffset.w-sldBarOffset.w; var sldBarwidth = sldBarOffset.l-sldObjOffset.l; sldPoint = parseInt(point); var p = parseInt(sldPoint*sldObjwidth/sldMax)+sldObjOffset.l+1; sldBar.style.left = p; instance.getSldPoint(); }}; neverSliderBar.prototype.init=function() { with(this) { if ($(sldID + '__BtnL') && $(sldID + '__BtnR') && $(sldID + '__Bar')) { sldBtnL = $(sldID + '__BtnL'); sldBar = $(sldID + '__Bar'); sldBtnR = $(sldID + '__BtnR'); } else { sldBtnL = document.createElement("BUTTON"); sldBtnL.id = sldID + '__BtnL'; sldBar = document.createElement("DIV"); sldBar.id = sldID + '__Bar'; sldBtnR = document.createElement("BUTTON"); sldBtnR.id = sldID + '__BtnR'; document.body.appendChild(sldBtnL); document.body.appendChild(sldBar); document.body.appendChild(sldBtnR); } //------------------------------------------------------------------- sldObj = $(sldID); sldObj.className = objStyle; sldBarOffset = Offset(sldBar); sldObjOffset = Offset(sldObj); //------------------------------------------------------------------- sldBtnL.value = "<<"; sldBtnL.className = btnStyle; sldBtnL.style.position = "absolute"; //------------------------------------------------------------------- sldBtnR.value = ">"; sldBtnR.className = btnStyle; sldBtnR.style.position = "absolute"; //------------------------------------------------------------------- sldBar.className = barStyle; sldBar.style.position = "absolute"; sldBar.style.top = sldObjOffset.t; sldBar.style.height = sldObjOffset.h; sldBar.style.left = sldObjOffset.l; instance.fixed(); //------------------------------------------------------------------- sldObj.onmousedown = function() {instance.handleObjBefore()}; sldObj.onmouseup = function() {instance.handleObjAfter()}; //------------------------------------------------------------------- sldBtnL.onmousedown = function() {instance.handleBtnClick('l')}; sldBtnR.onmousedown = function() {instance.handleBtnClick('r')}; sldBtnL.onfocus = function() {this.blur()}; sldBtnR.onfocus = function() {this.blur()}; //------------------------------------------------------------------- sldBar.onmousedown = function() {instance.handleSldDragStart()}; sldBar.onmousemove = function() {instance.handleSldDrag()}; sldBar.onmouseup = function() {instance.handleSldDragEnd()}; }}; neverSliderBar.prototype.fixed=function() { with(this) { sldBarOffset = Offset(sldBar); sldObjOffset = Offset(sldObj); var sldBtnLOffset = Offset(sldBtnL); sldBtnL.style.left = sldObjOffset.l-sldBtnLOffset.w; sldBtnL.style.top = sldObjOffset.t; sldBtnL.style.height = sldObjOffset.h; //------------------------------------------------------------------- sldBtnR.style.left = sldObjOffset.l+sldObjOffset.w; sldBtnR.style.top = sldObjOffset.t; sldBtnR.style.height = sldObjOffset.h; //------------------------------------------------------------------- sldBar.style.top = sldObjOffset.t; sldBar.style.height = sldObjOffset.h; //------------------------------------------------------------------- var p = sldBarOffset.l; if (p < sldObjOffset.l) sldBar.style.left=sldObjOffset.l; var w = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w; if (p > w) sldBar.style.left = w; window.setTimeout(function(){instance.fixed()},10) }}; neverSliderBar.prototype.applyArg=function() { with(this) { if (typeof(callback)=='string') callback=eval(callback); if (typeof(callback)=='function') { var callbackArguments = []; for(var i=0; i
power by never-online, blueDestiny, http://www.never-online.net
</body> </textarea><input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
</td> </tr> </table>↑返回目录
前一篇: javascript 动态添加表格行
后一篇: 兼容低版本IE的JScript5.5实现