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，内容自己定义，
加上事件，onclick=setMyValue(1,1);向右，微距为1 onclick=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;
}
div.content h4 {
 color:#000;
 margin-left:10px;
 text-align:left;
}

2.slider.css

.imageSlider1 { margin:0;padding:0; height:20px; width:600px; background-image:url("images/scrollbg.gif"); }
.imageBar1    { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); }

.imageSlider2 { margin:0;padding:0; height:20px; width:600px; background-image:url("images/horizBg.png"); }
.imageBar2    { margin:0;padding:0; height:20px; width:18px; background-image:url("images/horizSlider.png"); }

.winSlider    { margin:0;padding:0; height:15px; width:600px; background-color:#eee; border:2px solid #EAE6DD; }
.winBar       { margin:0;padding:0; height:15px; width:10px; border:2px outset buttonhighlight; background-color:#D4D0C8; }

3.js

if (typeof getElementById!="function") {
  var getElementById = function (id) {
    if   (typeof(id)=="object") return id;
    if   (document.getElementById(id)) { return document.getElementById(id); }
    else { throw new Error(id +" argument error, can not find /"" +id+ "/" element"); }
  }
}

function getElCoordinate (e) {
  var t = e.offsetTop;
  var l = e.offsetLeft;
  var w = e.offsetWidth;
  var h = e.offsetHeight;
  while (e=e.offsetParent) {
    t += e.offsetTop;
    l += e.offsetLeft;
  }; return {
    top: t,
    left: l,
    width: w,
    height: h,
    bottom: t+h,
    right: l+w
  }
}

var neverModules     = window.neverModules  || {};
neverModules.modules = neverModules.modules || {};

neverModules.modules.slider = function (cfg) {
  if ((typeof cfg)!="object")
  throw new Error("config argument is not a object, error raise from slider constructor");

  this.targetId  = cfg.targetId;
  this.hints     = cfg.hints?cfg.hints:"";
  this.sliderCss = cfg.sliderCss?cfg.sliderCss:"";
  this.barCss    = cfg.barCss?cfg.barCss:"";
  this.min       = cfg.min?cfg.min:0;
  this.max       = cfg.max?cfg.max:100;
  this.onstart   = function(){};
  this.onchange  = function(){};
  this.onend     = function(){};

  this._defaultInitializer.apply(this);
}

neverModules.modules.slider.prototype = {
  _defaultInitializer: function () {
    this._bar     = null;
    this._slider  = null;
    this._wrapper = null;
    this._target  = getElementById(this.targetId);
    if (this.min>this.max){var x=this.min;this.min=this.max;this.max=x;}
    this._value   = this.min;
  },

  create: function () {
    this._createSlider();
  },

  dispose: function () {
    //virtual function
  },

  createBar: function () { with(this) {
    //0.10 can not create mutilple bar
    //this interface is for next version
    //by never-online
    var _self = this;
    _bar = document.createElement("DIV");
    _wrapper.appendChild(_bar);
    _bar.title = hints;
    _bar.id = targetId + "_bar";
    _bar.className = barCss;
    _bar.style.position  = "absolute";
    _bar.onmousedown = function (evt) { _self._initMoveSlider(evt); }
  }},

  setValue: function (n) { with(this) {
    if (!_bar) return; n = _Number(Number(n)); n = n>max?max:n<min?min:n;
    _bar.style.left = Math.round((n-min)*((_slider.offsetWidth-_bar.offsetWidth)/(max-min)))+"px";
    _value = n; fireChange(); fireEnd();
  }},

  getValue: function () {
    return this._value;
  },

  fireStart: function () {
    this.onstart.call(this);
  },

  fireChange: function () {
    this.onchange.call(this);
  },

  fireEnd: function () {
    this.onend.call(this);
  },

  _createSlider: function () { with(this) {
    _wrapper = document.createElement("DIV");
    _target.appendChild(_wrapper);
    _wrapper.id = targetId + "_wrapper";
    _wrapper.style.position = "relative";

    _slider = document.createElement("DIV");
    _wrapper.appendChild(_slider);
    _slider.id = targetId + "_slider";
    _slider.className = sliderCss;
    _slider.style.position  = "absolute";

    createBar(); var _self = this;
    _slider.onclick = function (evt) { _self._moveTo(evt); }
  }},

  _moveTo: function (evt) { with(this) {
    evt = evt?evt:window.event;
    var x = evt.clientX-getElCoordinate(_slider).left-Math.round(_bar.offsetWidth/2); x = _coordsX(x);
    _bar.style.left = x+"px"; _value = Math.round(x/((_slider.offsetWidth-_bar.offsetWidth)/(max-min))+min);
    fireChange(); fireEnd();
  }},

  _coordsX: function (x) { with(this) {
    x = _Number(x);
    x = x<=_slider.offsetLeft?_slider.offsetLeft:x>=_slider.offsetLeft+_slider.offsetWidth-_bar.offsetWidth?_slider.offsetLeft+_slider.offsetWidth-_bar.offsetWidth:x;
    return x; 
  }},
 
  _coordsY: function (y) { with(this) {

  }},
 
  _Number: function (n) {
    return isNaN(n)?0:n;
  },

  _initMoveSlider: function (evt) { with(this) {
    evt  = evt?evt:window.event; var _self = this;
    _bar.slider_x = evt.clientX-_bar.offsetLeft;
    fireStart();
    document.onmousemove = function (evt) { _self._changeHandle(evt); }
    document.onmouseup   = function (evt) { _self._endHandle(evt);    }
  }},

  _changeHandle: function (evt) { with(this) {
    evt = evt?evt:window.event; var x = evt.clientX-_bar.slider_x;
    x = _coordsX(x);
    _bar.style.left = x+"px"; _value = Math.round(x/((_slider.offsetWidth-_bar.offsetWidth)/(max-min))+min);
    fireChange();
  }},

  _endHandle: function (evt) { with(this) {
    //Release event
    document.onmousemove = null;
    document.onmouseup   = null;
    fireEnd();
  }}
}
４．例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
  <head>
    <title>  </title>
    <style type="text/css" media="all" title="Default">
      @import "main.css";
      @import "slider.css";
    </style>
    <meta http-equiv="ImageToolbar" content="no" />
    <meta name="author" content="never-online, BlueDestiny"/>
    <meta name="keywords" content="never modules, js slider|slider, js framework, BlueDestiny, never-online"/>
    <meta name="description" content="BlueDestiny, never-online"/>
        <meta name="creator.name" content="never-online, BlueDestiny" />
    <script type="text/javascript" src="slider_extras.js"></script>
  </head>
  <body >
    <div id="header">
      <h1> neverModules - slider </h1>
      by never-online -  - updated: 03.01.2006
      <hr />
    </div>
    <div class="wrapper">
      <div class="content">
        <h4> cross-browser </h4>
        IE 6.0 - Opera 9.0 - - Mozilla 1.5.0
        </ul>
      </div>
      <div class="content">
        <h4> Example list </h4>
        <div id="sliderDetail" style="font-weight:bolder;"></div>
        <input value="40" id="jumpValue">
        <input type="button"
        onclick="var a=getElementById('jumpValue').value;sliderImage1.setValue(a);sliderImage2.setValue(a);winSlider.setValue(a)"
        value="MoveToValue"/>
        <div style="height:100px; margin:10px; ">
          <div id="sliderDemo1" style="height:40px;"></div>
          <div id="sliderDemo2" style="height:40px;"></div>
          <div id="sliderDemo3" style="height:40px;"></div>
        </div>
        <script type="text/javascript">
        //<![CDATA[
          var sliderImage1 = new neverModules.modules.slider(
          {targetId: "sliderDemo1",
          sliderCss: "imageSlider1",
          barCss: "imageBar1",
          min: 0,
          max: 20,
          hints: "move the slider"
          });
          sliderImage1.onstart  = function () {
            getElementById("sliderDetail").innerHTML = "onstart: sliderImage1 Start value is " +sliderImage1.getValue();
          }
          sliderImage1.onchange = function () {
            getElementById("sliderDetail").innerHTML = "onchange: sliderImage1 Current value is " +sliderImage1.getValue();
          };
          sliderImage1.onend = function () {
            getElementById("sliderDetail").innerHTML += ", onend: The end the sliderImage1 value is " +sliderImage1.getValue();
          }
          sliderImage1.create();
          sliderImage1.setValue(sliderImage1.max/2);
          //--------------------------------------------------------------------------------
          var sliderImage2 = new neverModules.modules.slider(
          {targetId: "sliderDemo2",
          sliderCss: "imageSlider2",
          barCss: "imageBar2",
          min: 16,
          max: 1024,
     ckValue:16,
          hints: "move the slider"
          });
          sliderImage2.onstart  = function () {
            getElementById("sliderDetail").innerHTML = "onstart: sliderImage2 Start value is " +sliderImage2.getValue();
          }
          sliderImage2.onchange = function () {
            getElementById("sliderDetail").innerHTML = "onchange: sliderImage2 Current value is " +sliderImage2.getValue();
          };
          sliderImage2.onend = function () {
            getElementById("sliderDetail").innerHTML += ", onend: The end the sliderImage2 value is " +sliderImage2.getValue();
          }
          sliderImage2.create();
          //--------------------------------------------------------------------------------
          var winSlider = new neverModules.modules.slider(
          {targetId: "sliderDemo3",
          sliderCss: "winSlider",
          barCss: "winBar",
          min: 0,
          max: 10000,
          hints: "move the slider"
          });
          winSlider.onstart  = function () {
            getElementById("sliderDetail").innerHTML = "onstart: winSlider Start value is " +winSlider.getValue();
          }
          winSlider.onchange = function () {
            getElementById("sliderDetail").innerHTML = "onchange: winSlider Current value is " +winSlider.getValue();
          };
          winSlider.onend = function () {
            getElementById("sliderDetail").innerHTML += ", onend: The end the winSlider value is " +winSlider.getValue();
          }
          winSlider.create();
          winSlider.setValue(5000);
        //]]>
        </script>
      </div>
      <div class="content">
        <h4> Download source </h4>
        click <a href="neverModules-slider.rar">here</a> to download this file, if the file is unavailable, pls email me, BlueDestiny[at]126.com, or Go >
      </div>
      <div class="content">
        <h4> History </h4>
        2006 - 01: slider beta<br/>
        2007 - 03: slider 0.10<br/>
      </div>
      <div class="content">
        <h4> Known bug </h4>
       
      </div>
    </div>
    <div id="footer">
      neverModules - slider @ Power By never-online.net
      <script type="text/javascript" src=" http://js.users.51.la/493582.js"></script>
    </div>
  </body>
</html>