快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

注册万博体育官网在哪里_酒文化网进入



因为日历与日期选择器险些是同一回事,日历部分的解说我就不重复了,没有看过的同伙可以参看我这篇博文。不过日期选择器有一个难点,便是若何防止在IE6中被下拉开选择框挡住的问题。不只这天期选择器,所有弹出层都有这个问题。这个问题着实网上都有现成的谜底注1,最盛行的做法便是使用iframe元素了注2。 iframe已IE6与IE7中有数的能遮住select的windowless元素,我们的日期选择器的容器也是windowless元素,windowless元素可以经由过程z-index改变它们的层叠顺序。那么就先iframe挡住日期选择器可能呈现的位置,然后再让日期选择器上呈现就行了。因为是这部分代码是专为IE筹备,我们也用了IE createElement() 的一个特殊用法,在创建元素的同时也创建其样式与属性,即:

var iframe = document.createElement("");//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是行不通。这里我吃了不少苦头,大年夜家得留意了。

为了方便我解说, 我先把日期选择器的代码贴出来,它是基于我上一篇博文改动而来,还处于毛坯状态,我们一点点来改进吧。

看你能不能盖住我

看你能不能盖住我

看你能不能盖住我

看你能不能盖住我

看你能不能盖住我

#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:nul注册万博体育官网在哪里l,//用于输入日期的文本域的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 ");//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--;

(month12)&&(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+= '<< <'+ year+'年'+month+'月'+date

+'日> >>';

for(var i = 0;i '+weeks[i]+'';

}

for(i = 0;i ' :(''+arr[i].split('-')[2]+'')

}

}

这样不只看起来代码少很多,而且效率成几何级前进。另,留意两个地方,我们改写了重绘的措施,不是全部删除,而是保留div容器,然后设置其 innerHTML为空,这样我们最初就只需创建一个DOM,着实元素都是用字符串拼接天生。在日历头部,我们把tt等元素整个放进nobr,这是由于在firefox3.5中,align为center的元素在频繁创建与删除时,内容会发生谋略差错,导致折行征象……下面便是绑定事故,我们从新定义redrawCalendar措施;

redrawCalendar : 注册万博体育官网在哪里function(year,month,date){

(month12)&&(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; i12)&&(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+= '<< <'+ year+'年'+month+'月'+date

+'日> >>';

for(var i = 0;i '+weeks[i]+'';

}

for(i = 0;i ' :(''+arr[i].split('-')[2]+'')

}

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.clientHe注册万博体育官网在哪里ight + textfield.offsetTop)+ 'px';

if(/msie|MSIE 6/.test(navigator.userAgent)){

var iframe = $.CE("");//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框

test

">

hellohellohellohellotest

注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。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: