slider控件制作

 一．基本原理

1.如果有最小刻度，该怎么处理？
因为有接口setValue(n)
你可以在onfinish(onend)里得得值getValue();
再进行判断即可，简单的代码如下：
设最小刻度值为16
oSlider.onend = function () {
var currentValue = oSlider.getValue();
var offsetDir = currentValue>Math.round(oSlider/2)?1:0;
var minValue = 16;
setValidateValue(currentValue, offsetDir, minValue);
function setValidateValue(n,x,v) {
if (n%v==0 || n>slider.max || n<slider.min) {
oSlider.setValue(n);
} else { x==1?++n:--n; }
setValidateValue(n, x,v);
}
}

2、如何加微距调整？
只要在两旁边加上一个容器，用DIV或者BUTTON，内容自己定义，
加上事件，οnclick=setMyValue(1,1);向右，微距为1 οnclick=setMyValue(1,2)
function setMyValue(v, dir) {
dir==1?oSlider.setValue(oSlider.getValue()+v):oSlider.setValue(oSlider.getValue()-v);
}

特性：
1、兼容IE 6.0 - Opera 9.0 - - Mozilla 1.5.0
2、触发的事件添加 onstart, onchange, onfinish
3、将添加利用该控件和AJAX结合来进行翻页，如：腾讯的文章评论还有新浪样式的文章评论的风格。
4、精确度的BUG已经修改完毕。
5、DEMO里有三个例子，都是利用CSS来改动样式，无需在程序里添加。
6、增加直接移动的效果，即可以用鼠标直接点击移动到坐标。

接口说明。
构造函数：neverModules.modules.slider(config)
config对象为：
config = {
targetId: "sliderDemo1",//目标容器
sliderCss: "imageSlider",//slider的CSS类
barCss: "imageBar",//bar的CSS类
min: 1,//最小值，默认为0
max: 20,//最小值，默认为100
hints: "move the slider"//提示信息
}

创建方法：
oSlider.create();

取得当前值的方法：
oSlider.getValue();

设置当前值的方法：
oSlider.setValue();

句柄：
onstart - 开始时触发
onchange - 值改变时触发
onend - 完毕时触发 (如果要做类似腾讯的文章评论还有新浪样式的文章评论的风格的话，在这里加入事件利用AJAX获取好数据即可，例子将会在不久后推出）

dispose方法可以由用户自己编写。

二．原代码

１．main.css

body {
 color: windowtext;
 background: appworkspace;
 font-family: Arial;
 font-size:9pt;
 line-height:150%;
}
h1, h2, h3, h4 {
 color:#fff;
 font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
}
div#header {
 text-align:center;
 color:#eee;
}
div#header a {
 color:#fff;
 font-weight:bold;
}
div#footer {
 margin-top:10px;
 text-align:center;
 color:#eee;
 font-size:8pt;
}
div#operator {
 margin:20px 0 20px 0;
}
div#operator ul, div#operator li {
 margin:0;
 padding:0;
}
div#operator li {
 display:inline;
 list-style-type:none;
 margin-right:5px;
 margin-left:5px;
 border:1px solid #000;
 padding:5px;
 color:#000;
 background-color:#eee;
 cursor:hand;
 cursor:pointer;
}
hr {
 margin:10px 0 10px 0;
}
div.wrapper {
 text-align:center;
}
div.content {
 border:1px solid #333;
 background-color:buttonface;
 color:#000;
 padding:10px;
 margin:10px 0 10px 0;
 font-size:10pt;
 line-height:150%;
 text-align:left;
 width:80%;
 margin-left: auto;
 margin-right: auto;
 -moz-box-sizing:border-box;
}