slider.md.svn-base

一款开源强大的javascript控件

Class: Slider {#Slider}
=======================

**滑杆组件. 由两部分组成: 游标和滑杆**

### 备注:

- Slider 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE

### 语法:

	var mySlider = new Slider(element, knob[, options]);

### 参数:

1. element - (*element*) 作为滑杆的元素
2. knob    - (*element*) 作为游标的元素
3. options - (*object*)  参见以下可选项:

#### 可选项:

1. snap   - (*boolean*: 默认为 false) 如果为true, 则游标不是平滑移动, 而是步进式的
2. offset - (*number*: 默认为 0) 游标在滑杆两端的位置偏移量
3. range  - (*mixed*: 默认为 false) 数组或布尔值false. 如果是一个数组, 则数组中的值将作为滑杆的上下限值
4. wheel  - (*boolean*: 默认为 false) 游标是否响应鼠标滚轮
5. steps  - (*number*: 默认为 100) 将滑杆划分成的等分数
6. mode   - (*string*: 默认为 horizontal) 滑杆类型(水平/垂直): 'horizontal' 或 'vertical'

### 备注:

- 可选项range允许是一个数值数组(数值可为正数或负数)



Slider 事件: change {#Slider:change}
-----------------------------------------

* (*function*) 每当滑杆值发生变动时都会触发

### 标识:

	onChange(step)

### 参数:

1. step - (*number*) 游标当前值



Slider 事件: onComplete {#Slider:complete}
---------------------------------------------

* (*function*) 停止滑动游标时触发

### 标识:

	onComplete(step)

### 参数:

1. step - (*string*) 游标当前值



Slider 事件: tick {#Slider:tick}
-------------------------------------

* (*function*) 用户开始拖动游标时触发. 这个事件可以用来覆盖游标的默认行为.

### 标识:

	onTick(pos)

### 参数:

1. pos - (*number*) 当前游标相对于滑杆的位置

### 备注:

- Slider最初使用'tick'事件来设置游标的style来将它定位到一个新的位置

### 返回值:

* (*object*) Slider实例

### 示例:

	var mySlider = new Slider('myElement', 'myKnob', {
		range: [-50, 50],
		wheel: true,
		snap: true,
		onStart: function(){
			this.borderFx = this.borderFx || this.element.tween('border').start('#ccc');
		},
		onTick: function(pos){
			this.element.setStyle('border-color', '#f00');
			this.knob.setStyle(this.p, pos);
		},
		onComplete: function(){
			this.element.tween('border').start('#000');
		}
	});



Slider 方法: set {#Slider:set}
--------------------------------

**设置游标当前的位置**

###	语法:

	mySlider.set(step);

###	参数:

1. step - (*number*) 游标滑动至的目标值

###	返回值:

* (*object*) Slider实例

### 示例:

	var mySlider = new Slider('myElement', 'myKnob');
	mySlider.set(0);

	var myPeriodical = (function(){
		if(this.step == this.options.steps) {
			$clear(myPeriodical);
		}
		this.set(this.step++);
	}).periodical(1000, mySlider);

###	备注:

- 参数step值将被自动限制在0到可选项中指定的steps之间