这是一款基于jquery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jquery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，十分方便。效果图如下：
在线预览    源码下载
html代码：
年 年 年 个月 个月 个月 个月 个月 个月 个月 个月 个月 年年 年年 年年
年 年 年 个月 个月 个月 个月 个月 个月 个月 个月 个月 年年 年年 年年
年 年 年 个月 个月 个月 个月 个月 个月 个月 个月 个月 年年 年年 年年

css代码：
ul, li { padding: ; margin: ; list-style-type: none; } .clearfix:after { display: block; content: ; clear: both; } .slider-date { height: px; line-height: px; background: #eee; display: inline-block; position: relative; } .slider-date .slider-bg li { position: relative; float: left; width: px; border-left: solid px #ddd; font-size: px; text-align: center; } .slider-date .slider-bg span { display: none; } .slider-date .slider-bg li:first-child { border-left: none; } .slider-date .slider-bar { position: absolute; top: -px; left: ; overflow: hidden; height: px; width: px; } .slider-date .slider-bar ul { margin-top: px; background: #bfe; color: #fff; height: px; width: px; } .slider-date .slider-bar-btn { line-height: px; text-align: center; position: absolute; top: -px; right: px; display: block; width: px; height: px; background: #dacd; color: #fff; } .slider-date .slider-bar-btn i { display: inline-block; margin: px px; width: px; height: px; background: #cde; }
js代码：
//滑动插件 by - mantou qq: ; (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 = + ; //单个li的宽度 //滚动指定的位置 var slidertodes = function (index) { //最大不能超过 if (index > ) { index = ; } //最小不能小于 if (index && wid < ) { $sliderbar.css(width, wid); } }).on('mouseup', function (e) { $(this).off('mousemove mouseup'); var index = math.ceil(wid / liwid) - ; slidertodes(index); }); }); }); } })(jquery); $(function () { function a(index) { console.log(index + ); } $(#slider-date-).sliderdate({ callback: a }); function b(index) { console.log(index + ); } $(#slider-date-).sliderdate({ callback: b }); function c(index) { console.log(index + ); } $(#slider-date-).sliderdate({ callback: c }); });
以上代码很简单吧，希望大家能够喜欢。