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版幻灯片效果


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule