一个javascript 滑竿控件

最新推荐文章于 2022-09-19 23:16:57 发布
ddk87869
最新推荐文章于 2022-09-19 23:16:57 发布
阅读量278
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ecalf/archive/2012/11/28/2791876.html
版权
滑杠的取值范围、最大值最小值、小数点位数可以自定义，并可以配置滑动前、后的回调函数

<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>
转载于:https://www.cnblogs.com/ecalf/archive/2012/11/28/2791876.html