js版sliderBar(滑动条)控件_js

支持实时监控sliderbar的数据，允许有callback回调的函数，有示例

1、可自定样式SetStyle()
2、带有onSroll功能
3、有setSldPoint（设置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己设置sliderBar的最大值（不是sliderbar的长度，而是值）
6、自定义微调功能（setIncrement(10))，默认为5；

代码有点乱，接口不能清晰的看出来，不好意思了，先用着吧

运行代码框

<!DOCTYPE <a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/html" title="html" rel="nofollow" target="_blank">html</a> PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><HTML><HEAD><TITLE> never Slider Bar </TITLE><META NAME=”Generator” CONTENT=”EditPlus”><META NAME=”Author” CONTENT=”never-online, blueDestiny”><META NAME=”Keywords” CONTENT=”<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a> Slider Bar”><META NAME=”Description” CONTENT=”<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/java" title="java" rel="nofollow" target="_blank">java</a>script Slider Bar”><style>body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }.sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }.sliderBar { width:20px; background-color:#666666; border:1px solid #333; }.sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }.r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }.r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }.r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }.g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }.g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }.g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }.b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }.b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }.b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }</style></HEAD><BODY><p><div id=”s1″></div><p><div id=”d1″>r</div><p><div id=”s2″></div><p><div id=”d2″>g</div><p><div id=”s3″></div><p><div id=”d3″>b</div><p><div id=”color” class=”sliderObj”></div><SCRIPT LANGUAGE=”JavaScript”><!–/*===============================================================//// Module : never SliderBar// Script by : never-online, blueDestiny// Updated : 2006-5-12// Copyright : Miracle technology all reserved// Website : <a href="https://www.gaodaima.com/go.html?url=http://www.never-online.net//" rel="nofollow">http://www.never-online.net//</a> Email : <a href="mailto:blueDestiny@126.com" rel="nofollow" >blueDestiny@126.com</a>// Blog : <a href="https://www.gaodaima.com/go.html?url=http://blog.csdn.net/blueDestiny//" rel="nofollow">http://blog.csdn.net/blueDestiny//</a> 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.ob<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/js" title="js" rel="nofollow" target="_blank">js</a>tyle = “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<callbackArg.length; i++) callbackArguments[i] = callbackArg[i]; callbackArguments.push(instance.getSldPoint()); callback.apply(this,callbackArguments); } else { return; }}};neverSliderBar.prototype.handleObjBefore=function() { with(this){}};neverSliderBar.prototype.handleObjAfter=function() { with(this){}};neverSliderBar.prototype.handleBtnClick=function(direction) { with(this){ direction = direction.toLowerCase(); sldPoint=instance.getSldPoint(); if(direction == ‘l’) { instance.setSldPoint(this.sldPoint-sldIncrement); } else if (direction==’r’) { instance.setSldPoint(this.sldPoint+sldIncrement); } else { return alert(‘not valid argument ‘ +direction); } instance.applyArg(); instance.getSldPoint();}};neverSliderBar.prototype.handleSldDragStart=function() { with(this){ sldBar.setCapture(); sldMoved = true; sldBar.onlosecapture = function(){sldMoved=false;}; sldPoint = event.clientX-sldBarOffset.l;}};neverSliderBar.prototype.handleSldDrag=function() { with(this){ if(!sldMoved) return; var p = event.clientX-sldPoint; if (p <= sldObjOffset.l) { sldBar.style.left = sldObjOffset.l; } else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) { sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w; } else sldBar.style.left = p; instance.applyArg(); instance.getSldPoint();}};neverSliderBar.prototype.handleSldDragEnd=function() { with(this){ sldBar.releaseCapture(); sldMoved=false;}};function Offset(e) { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { t:t, l:l, w:w, h:h }}var r=new neverSliderBar(“s1”,callback,’ <b>neverSliderBar</b> ‘);r.sldMax=255;r.setBtnStyle(“r-sliderBtn”);r.setBarStyle(“r-sliderBar”);r.setObjStyle(“r-sliderObj”);r.init();r.setSldPoint(100);var g=new neverSliderBar(“s2”,callback,’ <b>neverSliderBar</b> ‘);g.sldMax=255;g.setStyle(“g-sliderBar”,”g-sliderBtn”,”g-sliderObj”);g.init();g.setSldPoint(150);var b=new neverSliderBar(“s3”,callback,’ <b>neverSliderBar</b> ‘);b.sldMax=255;b.setBtnStyle(“b-sliderBtn”);b.setBarStyle(“b-sliderBar”);b.setObjStyle(“b-sliderObj”);b.setIncrement(10);b.init();b.setSldPoint(“200”);callback(‘ <b>neverSliderBar</b> ‘);function callback(s) { var $=document.getElementById; var color_r=r.getSldPoint(); var color_g=g.getSldPoint(); var color_b=b.getSldPoint(); $(“color”).style.backgroundColor=”rgb(” +color_r+ “,” +color_g+ “,” +color_b+ “)”; $(“d1”).innerHTML=s+color_r; $(“d2”).innerHTML=s+color_g; $(“d3”).innerHTML=s+color_b;}//–></SCRIPT><p>power by never-online, blueDestiny, <a href="https://www.gaodaima.com/go.html?url=http://www.never-online.net</p></BODY></HTML&gt" rel="nofollow">http://www.never-online.net</p></BODY></HTML&gt</a>;

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

http://www.gaodaima.com/?p=28082

欢迎大家阅读《js版sliderBar(滑动条)控件_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：js版sliderBar(滑动条)控件_js

http://www.gaodaima.com/?p=28082

Hi，您需要填写昵称和邮箱！