支持实时监控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 = Off