移动端类似IOS的滚动年月控件（需要jQuery和iScroll）
生活随笔
收集整理的這篇文章主要介紹了
移动端类似IOS的滚动年月控件（需要jQuery和iScroll）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
http://www.cnblogs.com/ccblogs/p/5260949.html
一. 效果圖
?
二. 功能介紹
支持滾動和點擊選擇年月。（目前只支持設(shè)置年月的最大最小值，不支持整體的最大最小值）
?
三. 代碼
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. 調(diào)用方法：
$('.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(), //日期--年--份結(jié)束beginmonth: 1, //日期--月--份結(jié)束endmonth: 12, //日期--月--份結(jié)束curdate: false, //打開日期是否定位到當(dāng)前日期mode: null, //操作模式（滑動模式）event: "click", //打開日期插件默認(rèn)方式為點擊后后彈出日期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"> </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"> </li>';}function createMONTH_UL() {var str = '<li class="placeholder"> </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"> </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;width: 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;width: 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;width: 100%;height: 100%;overflow: hidden; }#datescroll div {float: left;margin-top: 15px; }#yearwrapper {position: absolute;margin-left: 16%;left: 0;top: 45px;bottom: 60px;width: 32%; }#monthwrapper {position: absolute;margin-left: 28%;left: 26%;top: 45px;bottom: 60px;width: 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;width: 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%;width: 80%;height: 30px;position: absolute;top: 104px;background: #eeeeee; }#datescroll_datetime {display: none;background: #F8F8F8;width: 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 {width: 100%; }#dateFooter {width: 100%;background: #fff;height: 44px;bottom: 0px;position: absolute; }總結(jié)
以上是生活随笔為你收集整理的移动端类似IOS的滚动年月控件（需要jQuery和iScroll）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ISCC2014-reverse
- 下一篇： LXD 2.0 系列（十二）：调试，及给