素材网 素材网

jQuery拖动滑块实现日期时间选择代码

下载资源()次

阅读次数()次

发布时间:2015-08-15

jQuery拖动滑块实现日期时间选择代码
分享到:

用法简介:

来源:xw素材网

jQuery拖动滑块实现日期时间选择代码。
文件引用:

<script type="text/javascript">
//滑动插件 by - mantou qq:676015863
;(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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。