蓝色理想 - 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 全部选择提示：你可先修改部分代码，再按运行]

经典论坛讨论帖：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2571587

出处：蓝色理想
责任编辑：moby

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

作者文章

模仿IE自动完成功能
模仿combox(select)控件
js版幻灯片效果

站点最新

站点最新列表

登封门户网站设计比赛初评结果

抠图—背景橡皮擦工具的使用

解决Fla文件编译SWF后体积过大

中文排版CSS心得

抠图—套索工具和魔术棒工具篇

Discuz!安装系列教程

兼容低版本IE的JScript5.5实现

拯救《NewWebPick》意见征集

月亮图腾教程Ⅱ—月亮的脸

js版sliderBar(滑动条)控件

栏目最新

栏目最新列表

抠图—背景橡皮擦工具的使用

解决Fla文件编译SWF后体积过大

中文排版CSS心得

抠图—套索工具和魔术棒工具篇

Discuz!安装系列教程

兼容低版本IE的JScript5.5实现

月亮图腾教程Ⅱ—月亮的脸

js版sliderBar(滑动条)控件

JS代码格式化和语法着色

!important在ie7.0的hack方法