开始编码
话题有点扯远，ok，在对UI有了清晰的认识后我们就可以使用js来输出html了。
我们使用jSlider来命名这个slider插件(为了避免插件冲突，插件命名时也应十分考究，这里我就俗一回)。
$.extend($.fn, {
///<summary>
/// apply a slider UI
///</summary>
jSlider: function(setting) {
}
});
在插件开发中比较标准的方式是将元数据独立出来并开放API，比如这里的setting参数传入值，有时候为了减少代码编写量，我习惯于直接在插件内赋值：
var ps = $.extend({
renderTo: $(document.body),
enable: true,
initPosition: ‘max’,
size: { barWidth: 200, sliderWidth: 5 },
barCssName: ‘defaultbar’,
completedCssName: ‘jquery-completed’,
sliderCssName: ‘jquery-jslider’,
sliderHover: ‘jquery-jslider-hover’,
onChanging: function() { },
onChanged: function() { }
}, setting);
规范的做法：
$.fn.jSlider.default = {
renderTo: $(document.body),
enable: true,
initPosition: ‘max’,
size: { barWidth: 200, sliderWidth: 5 },
barCssName: ‘defaultbar’,
completedCssName: ‘jquery-completed’,
sliderCssName: ‘jquery-jslider’,
sliderHover: ‘jquery-jslider-hover’,
onChanging: function() { },
onChanged: function() { }
};
$.extend({},$.fn.jSlider.default,setting);
ok, 下面描述下我所定义的这些API的作用：
renderTo: jSlider的载体、容器，可以是一个jQuery对象，也可以是选择器。
enable: jSlider插件是否可用，true时end-user可拖拽，否则禁止。
initPosition: jSlider的初始值，‘max’或者‘min’，亦即 slider的value值，1或者0。
size: jSlider的参数，包括2个值barWidth – bar的长度， sliderWidth – slider的长度。
barCssName: bar的样式名称，便于end-user自行扩展样式。
completedCssName: completed的样式名称。
sliderCssName: slider的样式名称。
sliderHover: slider聚焦时的样式名称。
onChanging: slider被拖拽时触发的事件。
onChanged: slider拖拽结束时触发的事件。
此时我们需要将renderTo强制转换成jQuery对象(兼容使用selector的情况)：
ps.renderTo = (typeof ps.renderTo == ‘string’ ?
$(ps.renderTo) : ps.renderTo);
然后将html tree输出到render:
/* ———->
html tree:
<div> —->sliderbar
<div> </div> —-> completed bar
<div> </div> —-> slider
</div>
<———–*/
var sliderbar = $(‘<div><div> </div><div> </div></div>’)
.attr(‘class’, ps.barCssName)
