jQuery仿阿里雲滑動桿購買日期選擇插件

程式碼片段：

js程式碼

<script type="text/javascript">
//滑動插件
;(function($) {
    $.fn.sliderDate = function(setting) {
        var defaults = {
                callback: false //預設回呼函數為false
            }
        //如果setting為空，就取default的值
        var setting = $.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");
var liWid = 50+1; //單一li的寬度

//捲動指定的位置
var sliderToDes = 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);
var pointX = e.pageX - $this.parent().width();
var wid = 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('mousemove mouseup');
var index = Math.ceil(wid/liWid) - 1;
sliderToDes(index);
});
});
        });
    }
})(jQuery);

$(function(){
function a(index){
console.log(index+1);
}
$("#slider-date-1").sliderDate({callback:a});

function b(index){
console.log(index+1);
}
$("#slider-date-2").sliderDate({callback:b});

function c(index){
console.log(index+1);
}
$("#slider-date-3").sliderDate({callback:c});
});
</script>