前段时间写的,主要是因为页面太小了,隐藏一部分会看起来更好一些...大概嘛,就是这个样子的
本来是想把所有事件都集中到外层的div上处理的,就是注册mouseover和mouseout的事件就完成了,不过发现效果并不好,有两问题,
1:文本输入框的时候,text的得到焦点的时候也应该是触发了mouseover的事件的了,而且ie下的事件机制是冒泡的,所以层并不会隐藏起来,还是可见的,不过当输入过程中鼠标移动出输入框焦点就会失去了.
2:选择下拉列表的时候层就直接隐藏掉了..所以是肯定不行的了...
后来想了一下,其实我们是可以把事件分开的...
1:那个小图片负责将层显示出来.
2.用body的事件将层隐藏掉,也就是body触发onmouseover的时候隐藏掉层的,不过前边说过事件的机制是冒泡的把,那如果一开始小图标的onmouseover事件然后接着冒泡的body的onmouseover事件,那我们做的不就白费了.所以我们要在小图标上阻止事件的冒泡才行window.event.cancelBubble = true;
3:既然隐藏的事件交给了body了,那小图钉的点击动作需要做的事件就是,钉住的时候就把body的mouseover的事件去掉.
非钉住状态的时候把body的mouseover的事件注册上就ok了..
4:为了pageLoag完我们还可以读取小图钉的前一个状态,就是显示与否,pageload完的时候客户端的保存状态应该都是被取消掉的了.所以加了一个<input type="hidden" value="" id="HidLockType" runat="server" />来让服务端可以读取
function ShowSearchDiv()//显示层
{
var DivSearch=document.getElementById("DivSearch");
DivSearch.style.display="";
window.event.cancelBubble = true;//阻止事件冒泡
}
function HidSearchDiv()//隐藏层
{
var DivSearch=document.getElementById("DivSearch");
DivSearch.style.display="none";
}
function SetClassName(sender,setclass)
{
sender.className=setclass;
}
function SetOnLock()//设置钉住状态
{
var HidLockType=document.getElementById("HidLockType");
var sender=document.getElementById("ImgLock");
if(HidLockType.value=="UnLock")
{
HidLockType.value="IsLock";
sender.src="Lock.jpg";
document.body.onmouseover=null;
var DivSearch=document.getElementById("DivSearch");
DivSearch.style.display="";
}
else
{
HidLockType.value="UnLock";
sender.src="UnLock.jpg";
document.body.onmouseover=HidSearchDiv;
}
}
呵呵
照常的例子
最近也开始看ext了,以后也帖点例子上来~^_^
