19-讨论

11.4.3　讨论

将滑块绑定到一个文本输入框是选择之一；另一种选择是将其绑定到一个选择列表，并使用选择列表的选项作为数值。

我们以客房预订为例，用户在系统中输入最小床位数。最大床位数为6；因此，滑块是个不错的选择。使用渐进增强，可以用一个滑块，将其变化反馈到 <select> 元素，对其加以改进：

<select name="minbeds" id="minbeds">
　　 <option>1</option>
　　 <option>2</option>
　　 <option>3</option>
　　 <option>4</option>
　　 <option>5</option>
　　 <option>6</option>
</select>
var select = $("#minbeds");
var slider = $('<div id="slider"></div>').insertAfter(select).slider({
　　 min: 1,
　　 max: 6,
　　 range: "min",
　　 value: select[0].selectedIndex + 1,
　　　　　slide: function(event, ui) {
　　 select[0].selectedIndex = ui.value−1;
}
});
$("#minbeds").click(function() {
　　 slider.slider("value", this.selectedIndex + 1);
});

现有标记没有任何语义含义，因此不使用它，而是动态生成 <div> 并将其插入DOM，紧接在 <select> 之后。

因为只有一个值，所以用 value 选项代替 values 选项。直接用选择列表的DOM属性 selectedIndex 初始化该选项。属性从0开始，所以加上1。

当按键或者通过鼠标拖动手柄更新滑块时，通过设置 selectedIndex 属性更新选择列表，设置的值从传递给每个 ui 事件的 ui 对象中读取。在初始化时加上的偏移值1现在要减去。

尽管只有一个手柄，但还是设置了 range 选项。该选项的参数可以是字符串，也可以是布尔值：设置为 min 显示从滑块起始位置到手柄位置的范围；设置为 max 显示从滑块终点到手柄之间的范围。这有助于形象地表示旅馆客房的最小床位数。

最后，为选择列表绑定了一个单击事件，在用户直接修改选择列表的时候更新滑块。还可以隐藏选择列表，但是需要添加另一种形式的标签，显示选中的数字值。

插件还支持两种例子中未介绍的选项：

• 设置 animate: true ，在单击滑块某个位置的时候，手柄以动画的形式移动到目标位置。
• 设置 orientation: vertical 显示垂直滑块，代替默认的水平滑块。

还有其他一些事件，提供更细粒度的控制：

• start 在滑动开始时调用。
• stop 在滑动停止时调用。
• change 在滑动停止且滑块值变化的时候调用；这个事件在滑块变动触发高代价操作（如向服务器发送请求、更新图形等）时特别有用。当然，它会使滑块的行为更不明显，因为滑动的时候没有实时的反馈。