zoukankan html css js c++ java

移动端类似IOS的滚动年月控件（需要jQuery和iScroll）

http://www.cnblogs.com/ccblogs/p/5260949.html

一. 效果图

二. 功能介绍

　　支持滚动和点击选择年月。（目前只支持设置年月的最大最小值，不支持整体的最大最小值）

三. 代码

　　1. 在你的html中添加如下代码：

　　　　直接加载<body>里面，这里是插件渲染html的地方。

<div id="datePlugin"></div>

　　2. 在你的html中添加输入框：

　　　　可以是直接的一个输入框，也可以是input-group样式的。

　　　　我这里使用的时input-group，html是由JS加载的。

'<div class="item item-buydate input-group">' +
'<span class="input-group-span no-border-right" id="buydate-span">申购成交时间</span>' +
'<input class="txt-input txt-buydate no-border-left text-right" type="text" placeholder="请选择申购日期" readonly>' +
'</div>';

　　3. 调用方法：

$('.item-buydate').date({ title: '申购成交时间' });

　　4. JS源代码：

(function($) {
  $.fn.date = function(options) {
    var that = $(this);
    var docType = $(this).is('input');
    var nowdate = new Date();
    var indexY = 1,
      indexM = 1;
    var initY = parseInt((nowdate.getYear() + '').substr(1, 2));
    var initM = parseInt(nowdate.getMonth() + '') + 1;
    var yearScroll = null,
      monthScroll = null;
    $.fn.date.defaultOptions = {
      title: '请选择年月',
      beginyear: 2000, //日期--年--份开始
      endyear: nowdate.getFullYear(), //日期--年--份结束
      beginmonth: 1, //日期--月--份结束
      endmonth: 12, //日期--月--份结束
      curdate: false, //打开日期是否定位到当前日期
      mode: null, //操作模式（滑动模式）
      event: "click", //打开日期插件默认方式为点击后后弹出日期
      isShowByDefault: false,
      isSetFinancialDefaultDateValue: false
    }
    var opts = $.extend(true, {}, $.fn.date.defaultOptions, options);
    if (opts.isSetFinancialDefaultDateValue) {
      if (opts.beginyear < opts.endyear) {
        initY = ((opts.endyear - 1) + '').substr(2, 2);
      } else if (opts.beginyear = opts.endyear) {
        initY = (opts.endyear + '').substr(2, 2);
      }
    }
    if (opts.isShowByDefault) {
      showDatePicker()
    }
    that.bind(opts.event, showDatePicker);

    function showDatePicker() {
      createUL();
      init_iScrll();
      extendOptions();
      that.blur();
      refreshDate();
      bindButton();
    }

    function refreshDate() {
      yearScroll.refresh();
      monthScroll.refresh();
      resetInitDete();
      yearScroll.scrollTo(0, initY * 40, 100, true);
      monthScroll.scrollTo(0, initM * 40 - 40, 100, true);
    }

    function resetIndex() {
      indexY = 1;
      indexM = 1;
    }

    function resetInitDete() {
      if (opts.curdate) {
        return false;
      } else if (that.val() === '') {
        if (that.children('input').val() === '') {
          return false;
        }
        initY = parseInt(that.children('input').val().substr(2, 2));
        initM = parseInt(that.children('input').val().substr(5, 2));
      } else {
        initY = parseInt(that.val().substr(2, 2));
        initM = parseInt(that.val().substr(5, 2));
      }
    }

    function bindButton() {
      resetIndex();
      $("#yearwrapper ul li").unbind('click').click(function() {
        if ($(this).hasClass("placeholder")) {
          return false;
        }
        var target = $(this).prev('li');
        yearScroll.scrollToElement(target[0]);
        indexY = $(this).attr('data-params');
        $("#dateconfirm").removeClass("disabled");
      });
      $("#monthwrapper ul li").unbind('click').click(function() {
        if ($(this).hasClass("placeholder")) {
          return false;
        }
        var target = $(this).prev('li');
        monthScroll.scrollToElement(target[0]);
        indexM = $(this).attr('data-params');
        $("#dateconfirm").removeClass("disabled");
      });
      $("#dateshadow").unbind('click').click(function() {
        $("#datePage").hide();
        $("#dateshadow").hide();
      });
      $("#dateconfirm").unbind('click').click(function() {
        if ($(this).hasClass('disabled')) {
          return false;
        }
        if (indexY !== undefined && indexY !== '') {
          indexY = parseInt(parseFloat(indexY).toFixed(0));
        }
        if (indexM !== undefined && indexM !== '') {
          indexM = parseInt(parseFloat(indexM).toFixed(0));
        }
        var datestr = $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1) + "-" +
          $("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1);
        if (docType) {
          that.val(datestr);
          that.trigger('input');
        } else {
          that.children('input').val(datestr);
          that.children('input').trigger('input');
        }
        $("#datePage").hide();
        $("#dateshadow").hide();
      });
      $("#datecancle").click(function() {
        $("#datePage").hide();
        $("#dateshadow").hide();
      });
    }

    function extendOptions() {
      $("#datePage").show();
      $("#dateshadow").show();
    }
    //日期滑动
    function init_iScrll() {
      var oldIndexY = parseInt(indexY.toFixed(0));
      var oldIndexM = parseInt(indexM.toFixed(0));
      var strY = $("#yearwrapper ul li:eq(" + oldIndexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + oldIndexY + ")").html().length - 1);
      var strM = $("#monthwrapper ul li:eq(" + oldIndexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + oldIndexM + ")").html().length - 1);
      yearScroll = new iScroll("yearwrapper", {
        snap: "li",
        vScrollbar: false,
        onScrollMove: function() {
          $("#dateconfirm").addClass("disabled");
        },
        onScrollEnd: function() {
          indexY = (this.y / 40) * (-1) + 1;
          $("#dateconfirm").removeClass("disabled");
        }
      });
      monthScroll = new iScroll("monthwrapper", {
        snap: "li",
        vScrollbar: false,
        onScrollMove: function() {
          $("#dateconfirm").addClass("disabled");
        },
        onScrollEnd: function() {
          indexM = (this.y / 40) * (-1) + 1;
          $("#dateconfirm").removeClass("disabled");
        }
      });
    }

    function createUL() {
      CreateDateUI();
      $("#yearwrapper ul").html(createYEAR_UL());
      $("#monthwrapper ul").html(createMONTH_UL());
    }

    function CreateDateUI() {
      var str = '<div id="dateshadow"></div>' +
        '<div id="datePage" class="page">' +
        '<section>' +
        '<div id="datetitle">' + opts.title + '</div>' +
        '<div id="datemark"></div>' +
        '<div id="datescroll">' +
        '<div id="yearwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '<div id="monthwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '</div>' +
        '</section>' +
        '<footer id="dateFooter">' +
        '<div id="setcancle">' +
        '<ul>' +
        '<li id="dateconfirm">确定</li>' +
        '<li id="datecancle">取消</li>' +
        '</ul>' +
        '</div>' +
        '</footer>' +
        '</div>'
      $("#datePlugin").html(str);
    }

    function createYEAR_UL() {
      var str = '<li class="placeholder">&nbsp;</li>';
      for (var i = opts.beginyear; i <= opts.endyear; i++) {
        str += '<li data-params="' + (i - opts.beginyear + 1) + '">' + i + '年</li>';
      }
      return str + '<li class="placeholder">&nbsp;</li>';
    }

    function createMONTH_UL() {
      var str = '<li class="placeholder">&nbsp;</li>';
      for (var i = opts.beginmonth; i <= opts.endmonth; i++) {
        if (i < 10) {
          j = "0" + i;
        } else {
          j = i;
        }
        str += '<li data-params="' + (i - opts.beginmonth + 1) + '">' + j + '月</li>';
      }
      return str + '<li class="placeholder">&nbsp;</li>';
    }
  }
})(jQuery);

　　5. CSS样式：

body,
div,
ul,
li,
h1 {
  padding: 0;
  margin: 0;
  font-family: Microsoft YaHei, Arail, sans-serif;
}

ul,
li {
  list-style: none;
  list-style-type: none;
}

#dateshadow {
  display: none;
  position: absolute;
   100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.5;
}

#datePage {
  border-radius: 5px;
  position: absolute;
  top: 20%;
  margin: 0 auto;
  vertical-align: middle;
   80%;
  height: 238px;
  background: #FFFFFF;
  z-index: 9999999;
}

#datetitle {
  text-align: center;
  color: #666666;
  padding: 20px 10px 12px;
  line-height: 18px;
  font-size: 18px;
}

#datescroll {
  background: #F8F8F8;
  margin: 10px 18px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  height: 120px;
  text-align: center;
  line-height: 40px;
}

.page {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
   100%;
  height: 100%;
  overflow: hidden;
}

#datescroll div {
  float: left;
  margin-top: 15px;
}

#yearwrapper {
  position: absolute;
  margin-left: 16%;
  left: 0;
  top: 45px;
  bottom: 60px;
   32%;
}

#monthwrapper {
  position: absolute;
  margin-left: 28%;
  left: 26%;
  top: 45px;
  bottom: 60px;
   32%;
}

#yearwrapper ul li,
#monthwrapper ul li {
  color: #333333;
  font-size: 14px;
}

#setcancle ul {
  text-align: center;
  line-height: 30px;
}

#setcancle ul li {
  border-radius: 3px;
  float: left;
   32%;
  height: 30px;
  list-style-type: none;
  font-size: 14px;
}

#dateconfirm {
  position: absolute;
  background: #8e6dd1;
  right: 12%;
  color: #FFFFFF;
}

#dateconfirm.disabled {
  background: #dbdddd!important;
}

#datecancle {
  position: absolute;
  background: #dbdddd;
  left: 12%;
  color: #FFFFFF;
}

#datemark {
  left: 10%;
   80%;
  height: 30px;
  position: absolute;
  top: 104px;
  background: #eeeeee;
}

#datescroll_datetime {
  display: none;
  background: #F8F8F8;
   94%;
  margin: 10px 3%;
  margin-top: 10px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  height: 120px;
  text-align: center;
  line-height: 40px;
}

#yearwrapper ul,
#monthwrapper ul {
   100%;
}

#dateFooter {
   100%;
  background: #fff;
  height: 44px;
  bottom: 0px;
  position: absolute;
}

查看全文

相关阅读:
1014 Waiting in Line (30)（30 point(s)）
1013 Battle Over Cities (25)（25 point(s)）
1012 The Best Rank (25)（25 point(s)）
1011 World Cup Betting (20)（20 point(s)）
1010 Radix (25)（25 point(s)）
1009 Product of Polynomials (25)（25 point(s)）
1008 Elevator (20)（20 point(s)）
1007 Maximum Subsequence Sum (25)（25 point(s)）
1006 Sign In and Sign Out (25)（25 point(s)）
1005 Spell It Right (20)（20 point(s)）

原文地址：https://www.cnblogs.com/libin-1/p/6043018.html