js版sliderBar(滑动条)控件_JavaScript技术_编程技术

The author:(作者)delv
published in(发表于) 2013/12/31 6:35:55
js版sliderBar(滑动条)控件_JavaScript技术_编程技术

支持实时监控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"><br/><HTML><br/><HEAD><br/><TITLE> never Slider Bar </TITLE><br/><META NAME="Generator" CONTENT="EditPlus"><br/><META NAME="Author" CONTENT="never-online, blueDestiny"><br/><META NAME="Keywords" CONTENT="javascript Slider Bar"><br/><META NAME="Description" CONTENT="javascript Slider Bar"><br/><style><br/>body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }<br/>.sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }<br/>.sliderBar { width:20px; background-color:#666666; border:1px solid #333; }<br/>.sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }<br/>.r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }<br/>.r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }<br/>.r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }<br/>.g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }<br/>.g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }<br/>.g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }<br/>.b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }<br/>.b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }<br/>.b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }<br/></style><br/></HEAD><br/><BODY><br/><p><br/><div id="s1"></div><br/><p><br/><div id="d1">r</div><br/><p><br/><div id="s2"></div><br/><p><br/><div id="d2">g</div><br/><p><br/><div id="s3"></div><br/><p><br/><div id="d3">b</div><br/><p><br/><div id="color" class="sliderObj"></div><br/><SCRIPT LANGUAGE="javascript"><br/></SCRIPT><br/><p><br/>power by never-online, blueDestiny, http://www.never-online.net<br/></p><br/></BODY><br/></HTML><br/>

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

If you have any requirements, please contact webmaster。(如果有什么要求，请联系站长)

QQ:154298438
QQ:417480759