HTML5 是一种适用于 Web 的复杂编程平台，具有强大的功能，比如 canvas元素、">CSS3 和一个事件模型。HTML5 提供了您实现自己的组件所需的所有基础功能。
本文延续本系列的 第 1 期中关于滑块组件的讨论。您将学习如何合并事件监听器，如何创建滑块手柄的动画，以及如何将滑块本身注入现有的 DOM 树中。具体而言，您将学习如何：
对滑块使用备用控件 实现对注册和触发变更监听器的支持 使用 CSS3 过渡为 HTML 元素创建动画 将内容注入 DOM 树中 使用元素属性自定义专有组件
备用滑块控件
图 1显示了来自 第 1 部分的使用滑块组件的简单应用程序的一个变体。该变体使用链接代替按钮，以递增和递减滑块的值。对于这些控件，可使用任何生成鼠标单击事件的元素。
图 1. 使用链接代替按钮
用户也可单击滑块的滑轨或拖动它的手柄来更改它的值。第 1 部分中的 “拖动手柄” 一节解释了滑块如何简化其拖动。在本文的 “为滑块手柄创建动画” 一节中，您将看到在用户单击滑块的滑轨时，滑块如何通过 CSS3 过渡来调整手柄的位置。
清单 1显示了 图 1中所示的应用程序的 HTML。
清单 1. 包含链接而不是按钮的滑块应用程序的 HTML
<html> <head> ... <head> <body> <div id='slider-component'> <div id='controls'> <a href='#'class='slider-control' id='decrement'>-</a> <a href='#'class='slider-control' id='increment'>+</a> <div id='slider'> <!-- slider goes here--> </div> </div> <div id='readout'>0</div> </div> </body> <script type="text/javascript" src="lib/slider.js"></script> <script type="text/javascript" src="sliderExample.js"></script> </html>
清单 1中的 HTML 简单易懂。两个链接和两个滑块位于一个 controls DIV中，后者位于一个 slider-component DIV中。当用户单击某个链接时，应用程序的 JavaScript 就会处理单击事件，如 清单 2中所示。
清单 2. 链接单击事件
var slider = new COREHTML5.Slider('black', 'cornflowerblue', 0), ... document.getElementById('decrement').onclick=
function (e) { slider.knobPercent -= 0.1; slider.redraw(); updateReadout(); } document.getElementById('increment').onclick= function (e) { slider.knobPercent += 0.1; slider.redraw(); updateReadout(); }
清单 2中的事件处理函数递增和递减滑块的值（存储在滑块的 knobPercent属性中），重新绘制滑块，并更新 readout元素。
滑块的值发生更改时，应用程序会使用附加到滑块的一个更改监听器来更新 readout元素，如 清单 3中所示。
清单 3. 滑块更改事件
var readoutElement = document.getElementById('readout'); function updateReadout() { if (readoutElement) readoutElement.innerHTML = slider.knobPercent.toFixed(2); } slider.addChangeListener(updateReadout);
请注意，readout 元素是可选的；如果该元素不存在，那么 updateReadout()方法不会执行任何操作。
下一节将会介绍滑块如何实现对更改监听器的支持。
图 1中所示的应用程序使用了滑块的 appendTo()方法，将滑块附加到 DOM：
slider.appendTo('slider'); // Append the slider to the DOM element with an ID of slider slider.draw();
本文将在 “将滑块附加到 DOM 元素” 一节中讨论该方法的实现。