一个javascript 滑竿控件
滑杠的取值范围、最大值最小值、小数点位数可以自定义，并可以配置滑动前、后的回调函数
<style>
body{
font: 12px ,Arial;
}
/*slider strat*/
.SliderMain{
background:url(http://pic002.cnblogs.com/images/2012/368483/2012112803494021.gif) no-repeat;
width:181px;
height:8px;
position:relative;
display:inline-block;
zoom:1;
}
.SliderRange{
background:url(http://pic002.cnblogs.com/images/2012/368483/2012112803495452.gif) no-repeat;
width:0px;
height:5px;
position:absolute;
top:1px;
left:1px;
}
.sliderHandle{
background:url(http://pic002.cnblogs.com/images/2012/368483/2012112803500853.gif) no-repeat;
width:12px;
height:19px;
position:absolute;
left:0px;
top:-5px;
font-size:0;
margin-left:-5px;
}
/*slider end*/
/* ===== 无图片样式=================
.SliderMain{
background:#E0E0E0;
width:181px;
height:8px;
position:relative;
display:inline-block;
border-radius:2px;
zoom:1;
}
.SliderRange{
background:#FF9600;
width:0px;
height:5px;
position:absolute;
top:1px;
left:1px;
}
.sliderHandle{
background:#D6D3D6;
border-radius:4px/2px;
width:12px;
height:19px;
position:absolute;
left:0px;
top:-5px;
font-size:0px;
margin-left:-5px;
}
*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div style="border: 1px solid black; width: 500px; height: 80px; padding: 20px;">
<div id="SliderRange" class="SliderMain">
<div class="SliderRange"> </div>
<div class="sliderHandle"> </div>
</div>
<div><input id="test" type="text" /></div>
</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
var mySlider = new Slider('SliderRange',-50,50)
.setCallback(function(){
$("#test").val(this.getValue());
})
.setMinAllow(-40)
.setMaxAllow(40)
.setDecimal(2)
.setValue(20);
});
//=============滑竿=================
function Slider(id,min,max){ //by aleck
this.min=parseFloat(min)||0; //最小值
this.max=parseFloat(max)||100;//最大值
this.maxAllow = null; //允许选定的最大值
this.minAllow = null; //允许选定的最小值
this.value = null; //当前值
this.decimal = 0; //小数位数
this.locked = true; //锁定游标
this.startPoint = 0; //游标滑动的起点 px
this.distance = 0; //游标滑动偏移量 px
this.curPos = 0;//当前游标偏移位置 px
this.afterMoves=[]; //滑动时回调函数，可多个
this.beforeMoves=[]; //滑动前的回调函数
this.dom = document.getElementById(id); //滑竿DOM
this.init();
}
Slider.prototype={
init:function(){ //初始化
var host = this;
host.SliderRange = $(host.dom); //滑竿总长度
host.SliderSet = host.SliderRange.children("div:first"); //滑竿选定值长度
host.SliderSet.css('width',host.curPos+"px"); //当前选定值长度
host.SliderHandel = host.SliderRange.children("div:last");//游标
host.SliderHandel.css("left",host.curPos+"px"); //当前游标位置
host.silderLength = parseFloat(host.SliderRange.css("width")); //滑竿最大长度 px
host.scale = (host.max-host.min)/host.silderLength; //滑竿比例尺
host.minAllow = host.fixValue(host.minAllow==undefined?host.min:host.minAllow);
host.maxAllow = host.fixValue(host.maxAllow==undefined?host.max:host.maxAllow);
host.value = host.fixValue(host.value==undefined?host.minAllow:host.value);
host.SliderHandel.mousedown(function(e){
host.lock(false);
host.startPoint = e.clientX;
host.distance = 0;
host.curPos = parseFloat(host.SliderHandel.css("left"));
function m_move(e){//鼠标移动回调函数
if(host.locked){ return ;}
host.distance = e.clientX-host.startPoint;
host.startPoint = e.clientX;
host.move();
}
function m_up(e){ //鼠标弹起回调函数
host.lock(true);
$(document).unbind('mousemove',m_move)
.unbind('mouseup',m_up);
document[document.all?"onselectstart":"onmousedown"]=null;
}
//防止拖拽时选中附近文字
document[document.all?"onselectstart":"onmousedown"]= function(){return false;}
$(document).mousemove(m_move)
.mouseup(m_up);
});
return host;
},
setBeforeMoves:function(){
var host = this;
for(var i=0;i<arguments.length;i++){
if(arguments[i].constructor===Function){
host.beforeMoves.push(arguments[i]);
}
}
return host;
},
setCallback:function(){//设置滑动时的回调函数
var host = this;
for(var i=0;i<arguments.length;i++){
if(arguments[i].constructor===Function){
host.afterMoves.push(arguments[i]);
}
}
return host;
},
move:function(){ //移动游标
var host = this;
for(var i=0;i<host.beforeMoves.length;i++){
host.beforeMoves[i].call(host);
}
host.updateCurPos();
host.SliderHandel.css("left",host.curPos+"px");
host.SliderSet.css('width',host.curPos+"px");
for(var i=0;i<host.afterMoves.length;i++){
host.afterMoves[i].call(host);
}
return host;
},
updateCurPos:function(){ //修正偏移后的游标位置
var host = this;
var newValue = host.min+host.scale*(host.curPos+host.distance);
if(newValue>=host.maxAllow){
newValue = host.maxAllow;
host.curPos = ((host.maxAllow-host.min)/(host.max-host.min))*host.silderLength;
}else if(newValue<=host.minAllow){
newValue = host.minAllow;
host.curPos = ((host.minAllow-host.min)/(host.max-host.min))*host.silderLength;
}else{
host.curPos += host.distance;
}
host.value = host.fixValue(newValue);
return host;
},
setValue:function(num){ //设置滑竿的值
var host = this;
if(!host.isNum(num)){ return host; }
var oldValue = host.getValue();
host.value = host.numInRange(host.minAllow,host.maxAllow,num);
host.distance = (host.value-oldValue)/host.scale;
host.move();
host.value = host.fixValue(host.value);
return host;
},
getValue:function(){ //获取滑竿的值
var host = this;
return host.value;
},
setMaxAllow:function(num){ //设置允许的最大值
var host = this;
num = (num==undefined)?host.max:num;
if(!host.isNum(num)){ return host; }
host.maxAllow = host.fixValue(host.numInRange(host.min,host.max,num));
return host;
},
setMinAllow:function(num){//设置允许的最小值
var host = this;
num = (num==undefined)?host.min:num;
if(!host.isNum(num)){ return host; }
host.minAllow = host.fixValue(host.numInRange(host.min,host.max,num));
return host;
},
setMinMax:function(min,max){ //设置最大值和最小值，如果只传入一个，将使用一个默认的min或max配对设置
var host = this;
if(!arguments.length){ return host; }
min = (min==undefined)?host.min:min;
max = (max==undefined)?host.max:max;
if(!host.isNum(min)||!host.isNum(max)){ return host;}
min=Math.min(parseFloat(min),parseFloat(max));
max=Math.max(parseFloat(min),parseFloat(max));
host.scale = (max-min)/host.silderLength;
host.min = host.fixValue(min);
host.max = host.fixValue(max);
return host;
},
isNum:function(num){ //校验数字
var host = this;
return typeof(parseFloat(num))==='number'?true:false;
},
numInRange:function(min,max,num){ //在允许范围内取值
var host = this;
return [min,max,parseFloat(num)].sort(function(a,b){return a-b;})[1];
},
fixValue:function(num){//根据设置的小数点位数修正数据
host = this;
return parseFloat(num).toFixed(host.decimal||0);
},
setDecimal:function(num){//设置小数点
var host = this;
if(!host.isNum(num)){ return host; }
host.decimal = parseFloat(num).toFixed(0);
return host;
},
lock:function(frag){ //锁定、解锁游标
var host = this;
if(arguments[0]!=undefined){
host.locked=!!frag;
}
return host;
},
destroy:function(){//销毁控件
host = this;
host.dom.parentNode.removeChild(host.dom);
host = null;
return host;
}
}
// ]]></script>
