来自 关于计算机 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

基于jQuery滑动杆实现购买日期选择效果,贴近用

分享一款贴近Jquery日期、时间选择插件。这是一款双日历jQuery日期选择时间插件pickerDateRange。效果图如下:

这是一款基于jQuery的滑动杆购买日期选择插件,它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用,它可以帮助你的用户快速选择产品的购买日期,十分方便。效果图如下:

图片 1

图片 2

在线预览    源码下载

在线预览    源码下载.rar)

Js代码

html代码:

var dateRange = new pickerDateRange('date_demo3', { 
    aRecent7Days: 'aRecent7DaysDemo3', //最近7天 
    isTodayValid: false, 
    //startDate : '2013-04-14', 
    //endDate : '2013-04-21', 
    //needCompare : true, 
    //isSingleDay : true, 
    //shortOpr : true, 
    defaultText: ' 至 ', 
    inputTrigger: 'input_trigger_demo3', 
    theme: 'ta', 
    success: function (obj) { 
     $("#dCon_demo3").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate); 
    } 
   }); 
<center>
  <div class="slider-date" id="slider-date-">
   <!--底层-->
   <ul class="slider-bg clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>年</li>
    <li>年</li>
    <li>年</li>
   </ul>
   <!--互动层-->
   <div class="slider-bar">
    <ul class="slider-bg clearfix">
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>年年</li>
     <li>年年</li>
     <li>年年</li>
    </ul>
    <!--滑块按钮-->
    <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>
   </div>
  </div>
  <br />
  <br />
  <div class="slider-date" id="slider-date-">
   <!--底层-->
   <ul class="slider-bg clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>年</li>
    <li>年</li>
    <li>年</li>
   </ul>
   <!--互动层-->
   <div class="slider-bar">
    <ul class="slider-bg clearfix">
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>年年</li>
     <li>年年</li>
     <li>年年</li>
    </ul>
    <!--滑块按钮-->
    <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>
   </div>
  </div>
  <br />
  <br />
  <div class="slider-date" id="slider-date-">
   <!--底层-->
   <ul class="slider-bg clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>年</li>
    <li>年</li>
    <li>年</li>
   </ul>
   <!--互动层-->
   <div class="slider-bar">
    <ul class="slider-bg clearfix">
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>个月</li>
     <li>年年</li>
     <li>年年</li>
     <li>年年</li>
    </ul>
    <!--滑块按钮-->
    <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>
   </div>
  </div>
 </center>

选项及事件使用说明

css代码:

datepicker提供了丰富的选项设置事件方法调用,笔者先将经常用到的相关属性和方法整理成表格,方便查询和使用。

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;
    }

图片 3

js代码:

图片 4

//滑动插件 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 < ) {
       index = ;
      }
      //背景动画
      $sliderBar.animate({
       "width": liWid * (index + )
      }, );
      //执行回调
      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 > && 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 });
  });

图片 5

以上代码很简单吧,希望大家能够喜欢。

图片 6

您可能感兴趣的文章:

  • jquery做个日期选择适用于手机端示例
  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
  • 贴近用户体验的Jquery日期、时间选择插件
  • jQuery插件datepicker 日期连续选择
  • Jquery日期选择datepicker插件用法实例分析
  • JQuery EasyUI 日期控件如何控制日期选择区间
  • jQuery之日期选择器的深入解析
  • 基于jQuery的日期选择控件
  • datePicker——日期选择控件(with jquery)
  • jquery仿苹果的时间/日期选择效果

以上就是本文给大家分享有关贴近用户体验的Jquery日期、时间选择插件,希望大家喜欢。

您可能感兴趣的文章:

  • jquery做个日期选择适用于手机端示例
  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
  • 基于jQuery滑动杆实现购买日期选择效果
  • jQuery插件datepicker 日期连续选择
  • Jquery日期选择datepicker插件用法实例分析
  • JQuery EasyUI 日期控件如何控制日期选择区间
  • jQuery之日期选择器的深入解析
  • 基于jQuery的日期选择控件
  • datePicker——日期选择控件(with jquery)
  • jquery仿苹果的时间/日期选择效果

本文由六合联盟网发布于关于计算机,转载请注明出处:基于jQuery滑动杆实现购买日期选择效果,贴近用

关键词: