仿新浪微博圆满的时间组件升级版
仿新浪微博完美的时间组件升级版
本博客没有华丽的布局,只求朴实的js的代码,只为js代码爱好者提供,一周大概会出1-2篇js前沿代码的文章.只是代码,不说技术.
这个时间组件以前发过一次,上次那个很烂,这次有时间了,把这个升级了,性能更好,完美兼容所有浏览器,ie6下拉select档不住的问题
也解决了.总之,差不多也算一个完美的时间组件,
突然发现下面的代码里面有个运行代码可以看在线demo,就再最下面
然后贴出源码,只有一点简单的说明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} body, button, input, select, textarea { font: 12px/1.125 Arial,Helvetica,sans-serif; } /*日期控件*/ .pc_caldr{border:1px solid #ccc;background-color:#fff;z-index:10;width:175px;height:auto;position:absolute;color:#000;padding:5px;} .pc_caldr .selector{height:24px;_padding:2px 0 2px;padding:2px 0 0;} .pc_caldr .selector .month,.pc_caldr .selector .year{float:left;font-size:12px;width:80px;border:1px solid #CCC;height:19px;} .pc_caldr .selector .year{width:84px;margin-left:10px;} .pc_caldr .weeks,.pc_caldr .days{list-style:none;width:100%!important;margin:0;padding:0;} .pc_caldr .weeks{height:18px;margin-bottom:2px;background:#b6d1f9;color:#fff;font-size:12px;} .pc_caldr .days{height:auto;font-size:12px;font-family:Arial;} .pc_caldr .weeks li,.pc_caldr .days li{float:left;height:20px;line-height:20px;text-align:center;width:25px;} .pc_caldr .days li{background-color:none;} .pc_caldr .days li a{display:block;text-decoration:none;height:100%;color:#43609c;transition:transform .5s;-moz-transition:-moz-transform .5s;-webkit-transition:-webkit-transform .5s;-o-transition:-o-transform .5s;padding:1px;} .pc_caldr .days li a:link,.pc_caldr .days li a:visited,.pc_caldr .days li a:hover{text-decoration:none;} .pc_caldr .days li a strong{font-weight:400;} .pc_caldr .days li a:hover{background-color:#5d94e6;color:#fff;transform:rotate(180deg) scale(1.5);-moz-transform:rotate(360deg) scale(1.5);-webkit-transform:rotate(360deg) scale(1.5);-o-transform:rotate(360deg) scale(1.5);} .pc_caldr .weeks li,.pc_caldr .days li,.pc_caldr .days li a{text-align:center;} /*文本框*/ .tiemin{width:120px;border:1px solid #f00;} .inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} .ie6iframe {background: none repeat scroll 0 0 #FFFFFF;left: -1px;filter:alpha(opacity=0);position: absolute;top: 0;z-index: -1;width:100%;height:150px;} </style> </head> <body> <div style="height: 200px;"> </div> <input type="text" class="tiemin" readonly="readonly" /> <div style="height: 200px;"> </div> <span style="width: 200px;" class="inline-block"></span> <input type="text" class="tiemin" readonly="readonly" /> <div style="width: 300px; height: 100px; margin-left: 210px;"> <select> <option>挡住它nothing</option> </select> </div> <script type="text/javascript"> var nothingTime = (function ($) { var cache = { obj: null, calendar: null, disappear: function () { //隐藏时间块 cache.calendar.css("display", "none"); }, isLeap: function (year) { //闰年 return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); }, isValid: function (d) { //是否在今天以前 return (d.getTime() - (new Date()).getTime() < 0) ? true : false; }, td: new Date(), createData: function (year, month) { var n1 = new Date(year, month, 1), firstday = n1.getDay(), mdays = [31, 28 + this.isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], ul = document.createElement("ul"), li; ul.className = "days"; $("#calendar").find(".days").remove(); for (var i = firstday;i--;) { //建立前面无效的几天 ul.appendChild(document.createElement("li")); } for (var j = 1; j <= mdays[month]; j++) { if (this.isValid(new Date(year, month, j))) { //今天以前的日子 li = document.createElement("li"); li.innerHTML = "<a href='javascript:void(0)'>" + j + "</a>"; ul.appendChild(li); } else { li = document.createElement("li"); li.innerHTML = j; ul.appendChild(li); } } this.calendar[0].appendChild(ul); }, change: function () { //给下拉列表绑定时间 var a = $("#calendar .month"), b = $("#calendar .year"); a.change(function () { cache.createData(b.attr("value"), $(this).attr("value")); }); b.change(function () { cache.createData($(this).attr("value"), a.attr("value")); }); cache.calendar.delegate(".days a", "click", function () { var day = b.attr("value") + "-" + (parseInt(a.attr("value")) + 1) + "-" + this.innerHTML; cache.obj.val(day); cache.disappear(); }); }, bodyClickDisappear: function () { setTimeout(function () { $("body").bind("click", cache.disappear); }, "200"); }, calendarClick: function () { cache.calendar.click(function (e) { e.stopPropagation(); }); } }, CreateTime = function (obj) { cache.obj = obj; var of = cache.obj.offset(); if (document.getElementById("calendar")) { } else { var se = "<div class='selector'><select class='month'><option value='0'>一月</option><option value='1'>二月</option><option value='2'>三月</option><option value='3'>四月</option><option value='4'>五月</option><option value='5'>六月</option><option value='6'>七月</option><option value='7'>八月</option><option value='8'>九月</option><option value='9'>十月</option><option value='10'>十一月</option><option value='11'>十二月</option></select><select class='year'><option value='2011'>2011</option><option value='2012'>2012</option></select></div><ul class='weeks'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>"; $("<div>", { id: "calendar", html: se, "class": "pc_caldr" }).appendTo(document.body); cache.calendar = $("#calendar"); if (/msie 6\.0/i.test(navigator.userAgent)) { var iframe = document.createElement("iframe"); iframe.className = "ie6iframe"; cache.calendar[0].appendChild(iframe); } cache.change(); cache.bodyClickDisappear(); cache.calendarClick(); } cache.createData(cache.td.getFullYear(), cache.td.getMonth()); cache.calendar.find(".year").attr("value", cache.td.getFullYear()); cache.calendar.find(".month").attr("value", cache.td.getMonth()); cache.calendar.css({ left: of.left, top: of.top + cache.obj.height() + 2, display: "block" }); }; return function (obj) { CreateTime(obj); }; })(jQuery); //使用方法 $("input.tiemin").focus(function (e) { nothingTime($(this)); }).click(function (e) { e.stopPropagation(); }); </script> </body> </html>
OK,这个时间组件到此为止,下篇我应该讲点如何跟上js代码的脚步,ECMAScript5,我会试着模仿里面的方法,然后在ie6 7 8中运行,这样,前沿的js方法
我们照样不误.