[原创]基于JQUERY的新版Slider滑动条控件

花生米AJAX-UI系列之:基于JQUERY的Slider滑动条控件0.1版 JQUERY原版中的SLIDER在FF下有些卡，且一些功能不像EXT的那么完善，现自创一个SLIDER，具有EXT的完善功能和JQUERY的速度。 特点： 可定义滑动条是水平方向还是垂直方向，最大值及最小值，以及初始值； 可定义滑动条是否显示刻度条，以及刻度条的宽度； 可定义滑动条是否将游标后面的被选区域填充的视觉效果； 可定义是否使用SNAP模式，以及该SNAP模式下每一个步进的大小； 在游标被按下和被拖动时，是否用QUICKTIP显示当前正变化的值，以及QUICKTIP中值的单位，都可自定义； 可以选择控件中INPUT变量的值，在游标被拖动时动态改变，还是在游标被释放后改变； 可自定义当控件中INPUT变量的值被改变时，要触发的事件； 经测试，兼容IE6--IE8，Firefox,chrome浏览器，在非IE浏览器下更加美观:)。 ------------------------------------------------------- /*SLIDER滑动条定义、义--GooSlider类*/ //sliderDiv :要被绑定的已被JQUERY封装的DOM对象，必须要有其ID //property :JSON变量，SLIDER的详细参数设置,详细格式参见下文 function GooSlider(sliderDiv,property) 类内成员变量： this.$div： 被绑定构造为SLIDER控件的JQUERY对象，原型一般为一个DIV this.$id： 被绑定构造为SLIDER控件的DOM的ID this.$maxValue： 滑动条上的最大值 this.$minValue： 滑动条上的最小值 this.$length： 滑动条上游标可滑动的总长度，单位为像素 this.$direction：滑动条的方向，"h"为水平方向，"v"为垂直方向 this.$snapMode： 该属性的存在与否确定了控件是否使用SNAP模式:SNAP模式时，值直接为每次游标步进的实际范围值，与像素无关；可选，默认为非SNAP模式 this.$autoUpdate：控件中INPUT隐藏变量的值，是否在游标被拖动时动态改变，还是在游标被释放后改变，FALSE为在游标被释放后改变 this.$calStep： 是否需求显示刻度？是则传入刻度齿的间距，单位像素；否则传入FALSE或者NULL this.$fill： 用来缓存游标后面的被选区域的填充DIV，对用户来说没多大意义 this.$input： 控件中缓存的INPUT隐藏变量，它保存了控件当前选择的值 this.$tipUnit： 控件中是否要显示QUICKTIP提示，是，则传入提示中显示值的单位（可为空字符串），否则传入NULL ----------------------------------------------------------------------------------- 方法: //(重新)设置刻度的单位值，如果参数为NULL或者0时，则表示取消刻度显示 this.setCalStep(cal) //设置是否填充游标后面的被选区域，如果参数为NULL或者FALSE，则为否 this.setFill(fill) //设定值，并将游标滑动至相关地方 this.setValue(value) //设置是否显示TIP标签,如果参数为NULL或者FALSE，则为否(或者是取消当前控件的TIP显示功能) this.setShowTip(tip) //清掉这个SLIDER对象 this.cleanSlider() //绑定当INPUT的值改变时，触发的事件,FN参数为一个外部函数,如果参数为NULL，则表示取消事件的绑定 this.bindValueChange(fn) //设置游标拖动时是否更新VALUE值，如果参数为NULL或者FALSE，则为否 this.setAutoUpdate(auto) //设置SNAP模式下的步进数值，如果参数为NULL，则表示取消SNAP模式 this.setSnapMode(snap) //获取一个DIV的绝对坐标的功能函数，这个函数独立与GooSlider之外，是一个独立函数！ function getElCoordinate(dom); ------------------------------------------------------------------- 最重要的传参：property，构造函数中要用到的： var property={ inputId:"sId", //控件中隐藏INPUT的ID，不填时，默认为div控件的ID+“input” ("divid_input") inputName:"sName", //控件中隐藏INPUT的Name，可不填 //initValue:500, //控件中隐藏INPUT的初始值，可不填，默认为minValue minValue:0, //最小值 maxValue:1000, //最大值 length:200, //游标可滑动的长度/高度，(单位像素),建议其值能被(maxValue-minValue)整除 direction:"h", //Slider的方向，水平为h，垂直为v snapMode:100, //该属性的存在与否确定了控件是否使用SNAP模式:SNAP模式时，每次游标步进的实际范围值，与像素无关 calStep:20, //该属性的存在与否确定了控件是否有刻度，当使用刻度时，单位刻度的长度（单位像素）,必须能被length整除 fill:true, //是否用颜色填充游标经过的区域 autoUpdate:true, //是否在游标拖动时,实时更新隐藏INPUT的值,默认为FALSE,只在鼠标释放时才更新隐藏INPUT的值 showTip:"ms" //在拖动时是否用TIP显示数值(数值的单位)如果为FALSE或者NULL,则为不显示TIP };