js版sliderBar(滑动条)控件

　js版sliderBar(滑动条)控件

作者：BlueMiracle　时间： 2006-06-19　文档类型：原创　来自：蓝色理想

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

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

相关文章

JS页内查找关键词的高亮显示

作者文章

模仿IE自动完成功能

模仿combox(select)控件

js版幻灯片效果

站点最新

站点最新列表

悟道web标准:前端性能优化

纯中文域名".中国"今日提交申请

世界之窗3.0皮肤设计大赛结果公布

使用jQuery制作滑动动画效果的层

如何设计网页横幅

Plump 图标设计

Subrat Nayak图标设计

百度知道推出文档分享服务

CSS Sprites(CSS雪碧):要还是不要?

UIRSS三周年纪念日推出V2公测版

栏目最新

栏目最新列表

Firefox的Jetpack扩展案例分析

阿里妈妈UED谈CSS Sprites技术

Photoshop中设计绿色时尚Web网站

操作Dom节点实现间歇滚动新闻

浏览器15年历史回顾

如何创建Firefox的Jetpack扩展

全透视:CSS Z-index 属性

用PS 3D工具绘制甜麦圈包装袋

悟道Web标准:让W3C标准兼容终端

悟道WEB标准:统一思想,遵循标准