jQuery は Alibaba Cloud のスライド バー購入日選択プラグインを模倣します

コードセグメント:

jsコード

<script type="text/javascript">
// スライドプラグイン
;(関数($) {
    $.fn.sliderDate = 関数(設定) {
        var のデフォルト = {
                callback: false //デフォルトのコールバック関数は false です
            }
        //設定が空の場合はデフォルト値を採用します
        var 設定 = $.extend(デフォルト, 設定);
        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 = 関数(インデックス){

//最大値は 11 を超えることはできません
if(インデックス > 11){
インデックス = 11;
}

//最小値を 0 未満にすることはできません
if(インデックス < 0){
インデックス = 0;
}

//背景アニメーション
$sliderBar.animate({
"幅" : liWid*(インデックス+1)
},500);

//コールバックを実行する
if(設定.コールバック){
設定.コールバック(インデックス);
}

};

//クリック - 指定した位置までスクロールします
$sliderDate.on('クリック', "li", function(e) {
//スクロールメソッドを実行
sliderToDes($(this).index());
});

//ドラッグ - 指定した位置までスクロールします
$sliderBtn.on('マウスダウン', 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("幅", wid);
}
}).on('マウスアップ',function(e){
$(this).off('mousemove マウスアップ');
var インデックス = Math.ceil(wid/liWid) - 1;
スライダーToDes(インデックス);
});
});
        });
    }
})(jQuery);

$(関数(){
関数 a(インデックス){
console.log(インデックス+1);
}
$("#slider-date-1").sliderDate({callback:a});

関数 b(インデックス){
console.log(インデックス+1);
}
$("#slider-date-2").sliderDate({callback:b});

関数 c(インデックス){
console.log(インデックス+1);
}
$("#slider-date-3").sliderDate({callback:c});
});
</script>