js版sliderBar(滑动条)控件

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">  </SCRIPT> <p> power by never-online, blueDestiny, http://www.never-online.net </p> </BODY> </HTML>

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

作者：BlueMiracle 来源：蓝色理想

上一篇教程：没有了

下一篇教程： javascript 动态添加表格行