人气:6179评论:0发布时间:2018-04-12

该主题支持DIY组件,具备更换常规页面及更换模块功能,可灵活的根据自己需求搭配出您需要的样式。 查看详情

基础属性

  • 设计师管理大大
  • 主题IDdmk-209
  • 支持样式自适应
  • 程序名称jQuery仿阿里云滑动杆购买日期选择插件
  • 源码编码
  • 源码语言
  • 移动设备
  • 适用环境

比较早期的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>


  • 1购买前可以试用吗?

    特效代码属于虚拟商品,具有可复制性,可传播性,因此不支持购买前试用。

    但是每一款特效代码都搭建有演示站或高清截图,我们可以保证您购买得到的特效代码和演示或截图一样,并提供售后技术支持!

  • 2购买特效代码:

    在本页点击“立即购买”按钮即可下单,然后根据提示进行付款。

    付款方式:以抵扣积分的方式进行支付。

    积分:可以通过充值、每日签到、发布资源等渠道获取。

  • 3搭建说明:

    搭建一个网站的标配:主机(或服务器)、域名、程序、模板,如有任何疑惑,敬请咨询我们!

    强烈建议:推荐使用阿里云主机,安全可靠,国内第一!先领券再购买,划算!

    只要主机(或服务器)能够运行源码程序,就可以使用。

    强烈建议:推荐使用宝塔服务器面板,一键全能部署及管理,领取3188元礼包在使用!

  • 4版权说明:

    特效代码订单付款后将不支持取消和退款,请认真选购!

    特效代码版权属于发布者所有,请勿将源码进行转售、分发。

    如发现侵权请联系本站客服将配合删除。

  • 购买前可以试用特效代码吗?

    特效代码属于虚拟商品,具有可复制性,可传播性,因此不支持购买前试用。 但是每一款特效代码都搭建有特效代码演示站或高清截图,我们可以保证您购买得到的特效代码和演示或截图一样,并提供售后技术支持!

  • 你多久更新一次特效代码?

    我们特效代码更新的频率通常由用户以及我们团队提供的有意义的新功能需求量来决定。 所以这里没有任何严格的规定。但是,如果由于浏览器更新或系统版本更新而出现任何错误或问题, 我们会尽快更新所有受影响的特效代码,以确保站长和访问者的用户体验。

  • 为什么你的特效代码价格不同?

    在代码质量,性能,安全性,可靠性方面,我们所有的特效代码都是一样的。 但是,我们倾向于采用基于我们每个特效代码提供的功能和灵活性的定价策略。 我们知道,对于个人网站来说,更简单的特效代码应该比通常用于商业的一些稍微高级的特效代码花费更少。

  • 购买后可以退款吗?

    特效代码属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。 大家在使用特效代码的时候请尊重特效代码作者的劳动成果和版权标识!

  • 购买后我得到什么?

    您可以获得特效代码安装文件(.zip),您可以下载并安装在网站上。 部分特效代码还提供了其他一些资源,如文档(设置指南)和演示数据。 一旦您购买了特效代码,您将免费获得特效代码更新权益。

  • 你们的特效代码对服务器有什么要求吗?

    我们的特效代码支持几乎支持市面上所有的服务器,但为了更好的网站推广优化 建议选择linux主机,php版本为5-7。国内推荐阿里云linux主机, 点击了解详情

  • 你会放弃特效代码维护吗?

    目前,我们没有计划放弃任何我们现有的网站特效代码 。 一些较老的和较不受欢迎的特效代码可能会有更长的更新周期, 但是我们承诺,如果特效代码出现任何错误或问题,每个特效代码都会尽快得到更新。


全部评论