never sliderbar(js版简单的滑动条控件)

 

源自:Leave For Back (个人网站) 标签:web开发

web滑动条,web滚动条,js滚动条,滑动条控件,js Sliderbar

已经再次更新:
支持实时监控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 : [email protected] // 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.never-online.net </p> </BODY> </HTML>  
<!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      : [email protected]
//    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.never-online.net
</p>
</BODY>
</HTML>

你可能感兴趣的:(JavaScript,function,null,callback,div,border)