一步步教你实现跨游览器的日期选择器
由于日历与日期选择器几乎是同一回事,日历部分的讲解我就不重复了,没有看过的朋友可以参看我这篇博文。不过日期选择器有一个难点,就是如何防止在IE6中被下拉开选择框盖住的问题。不但是日期选择器,所有弹出层都有这个问题。这个问题其实网上都有现成的答案注1,最流行的做法就是利用iframe元素了注2。iframe已IE6与IE7中罕有的能遮住select的windowless元素,我们的日期选择器的容器也是windowless元素,windowless元素可以通过z-index改变它们的层叠顺序。那么就先iframe盖住日期选择器可能出现的位置,然后再让日期选择器上出现就行了。由于是这部分代码是专为IE准备,我们也用了IE createElement() 的一个特殊用法,在创建元素的同时也创建其样式与属性,即:
var iframe = document.createElement("<iframe id='calendar_mask' style='left:"+l +";width:220px;filter:mask();position:absolute;top:"+t +"height:160px;z-index:1;'></iframe>");//z-index不能为负数
讲解一下这段代码。id是为了后面我们销毁此元素准备的,width与height应该和日期选择器的尺寸差不多,大点也没所谓,就是不能小于它(防止select像幽灵一样穿墙而出!),top与left是为了准确定位于我们要填写的文本域的下方,为了应用这两个属性,我们就必须把其设置为定位元素,filter:mask()滤镜的作用是让iframe透明,通常大家都是用filter:alpha(opacity=0),没有什么差别。最后讲讲z-index了。这里IE有个bug——定位元素会产生一个新的stacking context注3,而不管你有没有显式地定义其z-index,并且从z-index的值为0开始。因此网上许多教程都以讹传讹,把z-index设为-1是行不通。这里我吃了不少苦头,大家得注意了。
为了方便我讲解, 我先把日期选择器的代码贴出来,它是基于我上一篇博文修改而来,还处于毛坯状态,我们一点点来改进吧。
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>跨游览器的JS日历</title> <link rel="stylesheet" type="text/css" id="css" href="dateselector.css"> <script type="text/javascript" src="dateselector.js"></stript> </head> <body bgcolor="gray"> <div style="margin:40px;background:#D7FFF0;width:500px;height:400px"> <form > <input id="datepicker" value="1990-1-1" title="日历在俺右边" /><br /> <select> <option>看你能不能挡住我</option> <option>看你能不能挡住我</option> <option>看你能不能挡住我</option> <option>看你能不能挡住我</option> <option>看你能不能挡住我</option> </select> </form> </div> </body> </html>
#jcalendar { width:210px; background:#E0ECF9; border:1px solid #479AC7; float:left; } #jcalendar span { float:left; width:210px; height:20px; background:#479AC7; color:#f90; font-weight:bolder; text-align:center; } #jcalendar .week { background:#D5F3F4; color:gray; } #jcalendar .current { background:#369; color:#fff; } #jcalendar a { display:block; float:left; width:30px; height:20px; color:#000; line-height:20px; text-align:center; text-decoration:none; } #jcalendar tt { color:#000040; } #jcalendar .weekend { color:#f00 !important; } #jcalendar a.day:hover { background:#99C3F6; }
var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } //******************************************** var Jcalendar = Class.create(); Jcalendar.prototype = { initialize:function(options){ this.setOptions(options); var $ = new Date(); this.drawCalendar($.getFullYear(),$.getMonth() + 1,$.getDate()); }, setOptions: function(options) { this.options = {//默认属性集中写在这里。 id:'jcalendar_'+ new Date().getTime(), text_id:null,//用于输入日期的文本域的ID parent_id:null//指定父节点 }; extend(this.options, options || {}); }, fillArray : function(year,month){ var f = new Date(year, month -1 ,1).getDay(), //求出当月的第一天是星期几 dates = new Date(year, month , 0).getDate(),//上个月的第零天就是今个月的最后一天 arr = new Array(42);//用来装载日期的数组,日期以‘xxxx-xx-xx’的形式表示 for(var i = 0; i < dates ; i ++ ,f ++){ arr[f] = year +'-'+ month +'-'+ (i+1) ; } return arr; }, addToDom:function(calendar){ var parent = document.getElementById(this.options.parent_id) ||document.getElementsByTagName('body')[0]; parent.insertBefore(calendar,null); }, drawCalendar : function(year,month,date){ var $ = document,$$ = 'createElement',calendar = this.getHandle(), weeks = "日一二三四五六".split(''),//日历第二行的内容,显示星期几 a = $[$$]('a'),//日历的a元素,用于克隆 tt = $[$$]("tt"),//日历页眉的tt元素,用于克隆 thead = $[$$]('span'),//日历页眉 fragment = $.createDocumentFragment(),//减少DOM刷新页面的次数 arr = this.fillArray(year,month),//保存当月的日期 tts = [],//用于保存tt元素的引用 text_id = this.options.text_id,//用于输入日期的文本域的ID ths = this;//用于保存Jcalendar对象的实例的引用 if(calendar) { calendar.innerHTML = ''; }else{ calendar = $[$$]('div');//日历的容器元素 this.addToDom(calendar);//把日历加入DOM树中 calendar.setAttribute('id', this.getId());//设置ID } for(var i = 0;i<4;i++){//循环生成出个时间按钮。 var clone = tt.cloneNode(true);//比重新createElement快 clone.onclick = (function(index){ return function(){//在闭包里绑定事件 ths.redrawCalendar(year,month,date,index) } })(i); tts[i] = clone;//保存引用 if(i==2) thead.appendChild($.createTextNode(year+"年"+month+"月"+date+"日")); thead.appendChild(clone); } tts[0].innerHTML = '<<'; tts[1].innerHTML = ' <'; tts[2].innerHTML = '> '; tts[3].innerHTML = '>>'; fragment.appendChild(thead); for(i = 0;i <7;i++){ var th = a.cloneNode(true); th.innerHTML = weeks[i]; th.className = 'week'; fragment.appendChild(th); } for(i = 0;i <42;i++){ var td = a.cloneNode(true); if(arr[i] == undefined ){ fragment.appendChild(td); }else{ var html = arr[i].split('-')[2]; td.innerHTML = html; td.className = 'day'; td.href = "javascript:void(0)";//为ie6准备的 (date && html == date)&&(td.className += ' current') ; (i%7 == 0 || i%7 == 6)&&(td.className += ' weekend') ; td.onclick = (function(i){ return function(){ text_id &&($.getElementById(text_id).value = i); calendar.style.display = 'none'; if(/msie|MSIE 6/.test(navigator.userAgent)){ var mask = document.getElementById("calendar_mask"); mask.parentNode.removeChild(mask); } } })(arr[i]); fragment.appendChild(td); } } calendar.appendChild(fragment); }, getId:function(){//返回id return this.options.id; }, getHandle:function(){//返回其容器,用于重设样式(显示或隐藏,定位等等) return document.getElementById(this.getId()); }, listenTo:function(id){//对文本域进行监听 id = id || this.options.text_id; if(id && document.getElementById(id)){ var calendar = this.getHandle(), textfield = document.getElementById(id) calendar.style.display = 'none'; textfield.onfocus = function(){ textfield.style.position = 'relative'; var l = textfield.offsetLeft + 'px', t = (textfield.clientHeight + textfield.offsetTop)+ 'px'; if(/msie|MSIE 6/.test(navigator.userAgent)){ var iframe = document.createElement("<iframe id='calendar_mask' style='left:"+l +";width:300px;filter:mask();position:absolute;"+";top:"+t +"height:160px;z-index:1;'></iframe>");//z-index不能为负数 textfield.parentNode.insertBefore(iframe,textfield); } with(calendar.style){ position="absolute"; display = 'block'; zIndex = 100; left = l; top = t; } }; } }, redrawCalendar : function(year,month,date,index){ switch(index){ case 0 ://preyear year--; break; case 1://premonth month--; (month < 1) &&(year--,month = 12) ; break; case 2://nextmonth month++; (month > 12)&&(year++,month = 1) ; break; case 3://nextyear year++; break; } this.drawCalendar(year,month,date); } } window.onload = function(){ new Jcalendar({ id:'jcalendar', text_id:'datepicker' }).listenTo(); };
代码很长,去掉铺助函数,其主体部分还有146行,虽然有的一行就是定义一个变量,但变量太多也很影响效率,这是Pure DOM生成html元素的通病,虽然我们用了cloneNode与DocumentFragment提高渲染速度了……在IE过去最伟大的日子(IE5),它创造了一系列非常高效的方法——insertAdjacentElement, insertAdjacentHTML, insertAdjacentText, innerHTML, outerHTML, outerText, innerText, 还有上面createElement的那种方便用法……最常用的是innerHTML,几乎成为事实的标准,其他方法,最新的opera,chrome,safari都支持了!我们现在就是用innerHTML来改写我们的类。为了方便,我们还为document.ceateElement等操作DOM的方法定义了几个快捷方式,把它们弄成类的原型方法……
Jcalendar.prototype = { ID:function(id){ return document.getElementById(id) }, TN:function(tn){ return document.getElementsByTagName(tn) }, CE:function(s){ return document.createElement(s) }, //******************其他原型方法******************
这样drawCalenda就可以精简为:
drawCalendar : function(year,month,date){ var $ = this,T='getElementsByTagName', calendar = $.getHandle(),//日历的容器 weeks = "日一二三四五六".split(''),//日历第二行的内容,显示星期几 arr = $.fillArray(year,month),//保存当月的日期 text_id = $.options.text_id;//用于输入日期的文本域的ID if(calendar) { calendar.innerHTML = ''; }else{ calendar = $.CE('div'); $.addToDom(calendar);//把日历加入DOM树中 calendar.setAttribute('id', $.options.id);//设置ID } calendar.innerHTML+= '<span><nobr><tt><<</tt><tt> <</tt>'+ year+'年'+month+'月'+date +'日<tt>> </tt><tt>>></tt></nobr></span>'; for(var i = 0;i <7;i++){ calendar.innerHTML += '<a class="week">'+weeks[i]+'</a>'; } for(i = 0;i <42;i++){ calendar.innerHTML += (!arr[i]) ? '<a> </a>' :('<a href="javascript:void(0)" title="' +arr[i]+ '" class="day'+ ((arr[i].split('-')[2] == date)? ' current':'') + ((i%7 == 0 || i%7 == 6)? ' weekend':'')+ '"><kbd>'+arr[i].split('-')[2]+'</kbd></a>') } }
这样不但看起来代码少很多,而且效率成几何级提高。另,注意两个地方,我们改写了重绘的方法,不是整个删除,而是保留div容器,然后设置其innerHTML为空,这样我们最初就只需创建一个DOM,其实元素都是用字符串拼接生成。在日历头部,我们把tt等元素全部放进nobr,这是因为在firefox3.5中,align为center的元素在频繁创建与删除时,内容会发生计算错误,导致折行现象……下面就是绑定事件,我们重新定义redrawCalendar方法;
redrawCalendar : function(year,month,date){ (month < 1) &&(year--,month = 12) ; (month > 12)&&(year++,month = 1) ; this.drawCalendar(year,month,date); }
var tts = calendar[T]("tt"); tts[0].onclick = function(){ $.redrawCalendar(year-1,month,date);} tts[1].onclick = function(){ $.redrawCalendar(year,month-1,date);} tts[2].onclick = function(){ $.redrawCalendar(year,month+1,date);} tts[3].onclick = function(){ $.redrawCalendar(year+1,month,date);} var dates = calendar[T]("kbd"),j = dates.length; while (--j >= 0) { dates[j].onclick = function(){ var title = this.parentNode.getAttribute("title"); text_id &&($.ID(text_id).value = title); calendar.style.display = 'none'; if(/msie|MSIE 6/.test(navigator.userAgent)){ var mask = $.ID("calendar_mask"); mask.parentNode.removeChild(mask); } } }
现在绑定事件需要先在DOM树中找出其元素,由于可恨的IE6不支持getElementsByClassName,浪费了我们在a元素上的那么多类。为了得到表示日期的a元素(上面的title暗藏着我们需要赋给文本域),我们在a元素中内套一个kbd元素,这样我们就可以在它们上面绑定单击事件,然后向上查代其父节点的title属性值了!由于kbd为内联元素,我们需要很精确地点击在数字上才能触发事件,我们可以为它们添加一个样式扩大其点击范围。
#jcalendar kbd{ display:block; font:normal 12px/20px "Comic Sans MS", "Microsoft YaHei", sans-serif; }
我们观察redrawCalendar与drawCalendar,参数都一样,而redrawCalendar只是对其年月进行一些纠错计算而已,因此redrawCalendar是没有必要的!最后行为层代码修改如下:
var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Jcalendar = Class.create(); Jcalendar.prototype = { initialize:function(options){ this.setOptions(options); var $ = new Date(); this.drawCalendar($.getFullYear(),$.getMonth() + 1,$.getDate()); }, setOptions: function(options) { this.options = {//默认属性集中写在这里。 id:'jcalendar_'+ new Date().getTime(), text_id:null,//用于输入日期的文本域的ID parent_id:null//指定父节点 }; extend(this.options, options || {}); }, ID:function(id){return document.getElementById(id) }, TN:function(tn){ return document.getElementsByTagName(tn) }, CE:function(s){ return document.createElement(s)}, getHandle:function(){ return this.ID(this.options.id); }, fillArray : function(year,month){//fill Array var f = new Date(year, month -1 ,1).getDay(), //求出当月的第一天是星期几 dates = new Date(year, month , 0).getDate(),//上个月的第零天就是今个月的最后一天 arr = new Array(42); //用来装载日期的数组,日期以‘xxxx-xx-xx’的形式表示 for(var i = 0; i < dates ; i ++ ,f ++){ arr[f] = year +'-'+ month +'-'+ (i+1) ; } return arr; }, addToDom:function(calendar){//add to dom tree var parent = this.ID(this.options.parent_id) || this.TN('body')[0]; parent.insertBefore(calendar,null); }, drawCalendar : function(year,month,date){ (month < 1) &&(year--,month = 12) ; (month > 12)&&(year++,month = 1) ; var $ = this,T='getElementsByTagName', calendar = $.getHandle(),//日历的容器 weeks = "日一二三四五六".split(''),//日历第二行的内容,显示星期几 arr = $.fillArray(year,month),//保存当月的日期 text_id = $.options.text_id;//用于输入日期的文本域的ID if(calendar) { calendar.innerHTML = ''; }else{ calendar = $.CE('div'); $.addToDom(calendar);//把日历加入DOM树中 calendar.setAttribute('id', $.options.id);//设置ID } calendar.innerHTML+= '<span><nobr><tt><<</tt><tt> <</tt>'+ year+'年'+month+'月'+date +'日<tt>> </tt><tt>>></tt></nobr></span>'; for(var i = 0;i <7;i++){ calendar.innerHTML += '<a class="week">'+weeks[i]+'</a>'; } for(i = 0;i <42;i++){ calendar.innerHTML += (!arr[i]) ? '<a> </a>' :('<a href="javascript:void(0)" title="' +arr[i]+ '" class="day'+ ((arr[i].split('-')[2] == date)? ' current':'') + ((i%7 == 0 || i%7 == 6)? ' weekend':'')+ '"><kbd>'+arr[i].split('-')[2]+'</kbd></a>') } var tts = calendar[T]("tt"); tts[0].onclick = function(){ $.drawCalendar(year-1,month,date); } tts[1].onclick = function(){ $.drawCalendar(year,month-1,date); } tts[2].onclick = function(){ $.drawCalendar(year,month+1,date); } tts[3].onclick = function(){ $.drawCalendar(year+1,month,date); } var dates = calendar[T]("kbd"),j = dates.length; while (--j >= 0) { dates[j].onclick = function(){ var title = this.parentNode.getAttribute("title"); text_id &&($.ID(text_id).value = title); calendar.style.display = 'none'; if(/msie|MSIE 6/.test(navigator.userAgent)){ var mask = $.ID("calendar_mask"); mask.parentNode.removeChild(mask); } } } }, listenTo:function(id){//对文本域进行监听 var $ = this; id = id || $.options.text_id; if(id && $.ID(id)){ var calendar = $.getHandle(), textfield = $.ID(id); calendar.style.display = 'none'; textfield.onfocus = function(){ textfield.style.position = 'relative'; var l = textfield.offsetLeft + 'px', t = (textfield.clientHeight + textfield.offsetTop)+ 'px'; if(/msie|MSIE 6/.test(navigator.userAgent)){ var iframe = $.CE("<iframe id='calendar_mask' style='left:"+l +";width:300px;filter:mask();position:absolute;"+";top:"+t +"height:160px;z-index:1;'></iframe>");//z-index不能为负数 textfield.insertAdjacentElement('afterEnd',iframe); } with(calendar.style){ position="absolute"; display = 'block'; zIndex = 100; left = l; top = t; } }; } } } ; window.onload = function(){ new Jcalendar({ id:'jcalendar', text_id:'datepicker' }).listenTo(); };
注1五种解决方法如下
- 修改select,不用标准select,而是自己用其他html元素模拟
- 修改你的div,使用iframe。
- 在div被显示的时候或者到达select所在位置时隐藏select
- 在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。
- Object对象的优先度较高,可以挡住select框
<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT> <select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>
注2微软吃饱饭没有事做,把所有DHTML元素(许多都是IE私有的,如htc,ActiveXObject)分为两大类,windowed element与windowless element。
windowed element
- object元素
- ActiveX 控件
- Plug-ins
- Scriptlet控件
- select 元素
- IE5.1与IE4.0中的iframe元素
windowless element
- Windowless 的 ActiveX 控件
- IE5.5以后的iframe
- 大多数 DHTML 元素,如a,div,form,button,span,address……
windowed 元素会无视其容器,渲染在所有windowless元素之上。这是因为所有windowless元素都是渲染在一个MSHTML 平面上,而windowed元素都是一个个单独地渲染于独自的MSHTML平面上。也就是说,windowed元素独占一个MSHTML平面,windowless元素共用一个MSHTML平面。我们可以使用z-index改变同一个平面上的元素的层叠顺序,但是不能跨平面操纵它们。而所有windowed元素所在的平面都是位于那一个windowless元素平面的顶部!我们可以通过下面的方法找到MSHTML的踪迹:动态生成一个iframe,什么也不设置,打开IE8的开发人员工具,就像看到它所在的MSHTML。
![](https://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_MSHTML.jpg)
在IE5中(IE4.0,iframe没有z-index属性不可用),iframe是windowed元素,如果iframe元素的z-index大于select的,那么它就位于select之上。如果它们都没有指定z-index或z-index相同,那么后出现的元素位于前面元素之上。
在IE5.5中,iframe变成了windowless元素,但它还是保留了windowed元素的某些特征,也就是说它既可以通过z-index来调整它与select的层叠顺序,也可以通过z-index也调整它与windowless元素(如div)的层叠顺序。换言之,它是个跨MSHTML平面的特殊元素,因此我就可以利用iframe元素做蒙板,用它来盖住select,然后再用div来盖住它。
注3根据W3C标准,每一个定位元素都归属于一个stacking context(与IE的MSHTMNL相仿)。根元素形成root stacking context,而其他的stacking context则由定位元素产生(此定位元素的z-index被定义一个非auto的z-index值),我们称之为local stacking context。定位子元素会以这个local stacking context为参考,用相同的规则设置此元素里面的子孙元素的stacking context。当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。当任何一个元素层叠另一个包含在不同stacking context元素时,则会以stacking context的层叠级别(stack level)来决定显示的先后情况。也就是说,在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定。IE浏览器似乎给body元素默认了一个相对定位属性(position: relative)