支持實時監控sliderbar的數據，允許有callback回調的函數，有示例
1、可自定樣式SetStyle()
2、帶有onSroll功能
3、有setSldPoint（設置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己設置sliderBar的最大值（不是sliderbar的長度，而是值）
6、自定義微調功能（setIncrement(10))，默認為5；
代碼有點亂，接口不能清晰的看出來，不好意思了，先用著吧
<!DOCTYPE HTML 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="javascript Slider Bar">
<META NAME="Description" CONTENT="javascript 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??? : 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<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, http://www.QingGui.com
</p>
</BODY>
</HTML>
?