jQuery仿阿里云滑动杆购买日期选择插件

比较早期的jQuery仿阿里云滑动杆购买日期选择插件，滑动式服务器购买日期选择代码。可以让用户快速选择产品的购买时长，非常便捷实用。

js代码
<scripttype="text/javascript">
//滑动插件
;(function($){
$.fn.sliderDate=function(setting){
vardefaults={
callback:false//默认回调函数为false
}
//如果setting为空，就取default的值
varsetting=$.extend(defaults,setting);
this.each(function(){
//插件实现代码
//var$sliderDate=$(".slider-date");
var$sliderDate=$(this);
var$sliderBar=$sliderDate.find(".slider-bar");
var$sliderBtn=$sliderDate.find(".slider-bar-btn");
varliWid=50+1;//单个li的宽度//滚动指定的位置
varsliderToDes=function(index){//最大不能超过11
if(index>11){
index=11;
}//最小不能小于0
if(index<0){
index=0;
}//背景动画
$sliderBar.animate({
"width":liWid*(index+1)
},500);//执行回调
if(setting.callback){
setting.callback(index);
}};//点击-滚动到指定位置
$sliderDate.on('click',"li",function(e){
//执行滚动方法
sliderToDes($(this).index());
});//拖动-滚动到指定位置
$sliderBtn.on('mousedown',function(e){
var$this=$(this);
varpointX=e.pageX-$this.parent().width();
varwid=null;//拖动事件
$(document).on('mousemove',function(ev){
wid=ev.pageX-pointX
if(wid>20&&wid<620){
$sliderBar.css("width",wid);
}
}).on('mouseup',function(e){
$(this).off('mousemovemouseup');
varindex=Math.ceil(wid/liWid)-1;
sliderToDes(index);
});
});
});
}
})(jQuery);$(function(){
functiona(index){
console.log(index+1);
}
$("#slider-date-1").sliderDate({callback:a});functionb(index){
console.log(index+1);
}
$("#slider-date-2").sliderDate({callback:b});functionc(index){
console.log(index+1);
}
$("#slider-date-3").sliderDate({callback:c});
});
</script>



下载

2023-11-22 23:25 上传

点击文件名下载附件
售价: 3 金币  [记录]  [购买]