基本原理分析
Windows关机效果分析
使用Windows系统的用户在关机的时候出现的界面只允许用户选择关机注销或取消动作而桌面上的程序都不能使用并且屏幕呈现灰色状态
本例将仿照这种高亮显示的效果在网页上实现
在网页上运用这种关机效果有什么好处呢？首先由于单击某一链接后将用户此时不可用的操作隐藏在后台将可用的操作放在屏幕最上层并高亮显示可以避免用户的误操作其次将信息高亮显示也可以提醒用户应该注意的事项
网页中实现关机效果分析
在网页中实现这种效果的原理很简单创建两个图层一个为遮盖层覆盖整个页面并且显示为灰色另一个图层作为高亮显示的部分在遮盖层的上方这可通过设置图层的zindex属性来设置当取消关机效果后只需将这两个图层元素在页面中删除即可
以下代码实现显示关机效果
<html>
<head>
<title>htmlclass=wordstyle>asp?typeid=snap_preview_added=no>AjaxLightBoxSample</title>
<styletype=text/htmlclass=wordstyle>asp?typeid=snap_preview_added=no>CSS>
#lightbox{/*该层为高亮显示层*/
BORDERRIGHT:#fffpxsolid;
BORDERTOP:#fffpxsolid;
DISPLAY:block;
ZINDEX:;/*设置该层在网页的最上端设置足够大*/
BACKGROUND:#fdfce;/*设置背景色*/
LEFT:%;
MARGIN:pxpxpxpx;
BORDERLEFT:#fffpxsolid;
WIDTH:px;
BORDERBOTTOM:#fffpxsolid;
POSITION:absolute;
TOP:%;
HEIGHT:px;
TEXTALIGN:left
}
#overlay{/*该层为覆盖层*/
DISPLAY:block;
ZINDEX:;/*设置高亮层的下方*/
FILTER:alpha(opacity=);/*设置成透明*/
LEFT:px;
WIDTH:%;
POSITION:absolute;
TOP:px;
HEIGHT:%;
BACKGROUNDCOLOR:#;
mozopacity:;
opacity:
}
</style>
</head>
<body>
<!该层为覆盖层>
<divid=overlay></div>
<!该层为高亮显示层>
<divid=lightbox></div>
</body>
</html>
需要注意的是在IE浏览器中如果有<select>标记则该标记不能被覆盖层覆盖但在其他浏览器中则可以覆盖
在使用IE浏览器时要先将网页中的<select>元素隐藏起来如以下代码可以用于隐藏页面所有的<select>元素
selects = documentgetElementsByTagName(select);
for(i=;i<selectslength;i++){
selects[i]stylevisibility=visibility;
}
代码实现
客户端代码
客户端的页面上有两个链接用户单击链接后向服务器端发送请求并将返回信息显示到高亮层上客户端的网页文件代码如下所示
<html>
<head>
<title>AJAXLightBox</title>
<!本例使用的css样式表文件>
<LINKtype=text/cssrel=stylesheet>
<!prototype类文件>
<scripttype=text/htmlclass=wordstyle>asp?typeid=snap_preview_added=no>htmlclass=wordstyle>javascriptsrc=js/prototypejs></script>
<!本例使用的htmlclass=wordstyle>javascript代码>
<scripttype=text/htmlclass=wordstyle>javascriptsrc=lightboxjs></script>
</head>
<body>
<DIVid=container>
<UL>
<LI><Aclass=lbOnclass=wordstyle>jsp?id=one>One</A>
</LI>
<LI><Aclass=lbOnclass=wordstyle>jsp?id=two>Two</A>
</LI>
</UL>
</div>
</body>
</html>
另外还需要设置该页面所使用CSS样式lightboxcss样式表文件代码如下所示
#lightbox{
BORDERRIGHT:#fffpxsolid;
BORDERTOP:#fffpxsolid;
DISPLAY:none;
ZINDEX:;
BACKGROUND:#fdfce;
LEFT:%;
MARGIN:pxpxpxpx;
BORDERLEFT:#fffpxsolid;
WIDTH:px;
BORDERBOTTOM:#fffpxsolid;
POSITION:absolute;
TOP:%;
HEIGHT:px;
TEXTALIGN:left
}
UNKNOWN{
POSITION:fixed
}
#overlay{
DISPLAY:none;
ZINDEX:;FILTER:alpha(opacity=);
LEFT:px;
WIDTH:%;
POSITION:absolute;
TOP:px;
HEIGHT:%;
BACKGROUNDCOLOR:#;mozopacity:;opacity:
}
UNKNOWN{
POSITION:fixed
}
done#lightbox#lbLoadMessage{
DISPLAY:none
}
done#lightbox#lbContent{
DISPLAY:block
}
loading#lightbox#lbContent{
DISPLAY:none
}
loading#lightbox#lbLoadMessage{
DISPLAY:block
}
done#lightboxIMG{
WIDTH:%;HEIGHT:%
}
客户端脚本
由于浏览器对图层的支持不同所以首先要确定客户端浏览器的类型以下代码可用于判断客户端的浏览器和html class=wordstyle>asp
snap_preview_added=no>操作系统
vardetect=navigatoruserAgenttoLowerCase();
varOSbrowserversiontotalthestring;
functiongetBrowserInfo(){
if(checkIt(konqueror)){
browser=Konqueror;
OS=htmlclass=wordstyle>asp?typeid=snap_preview_added=no>Linux;
}
elseif(checkIt(safari))browser=Safari
elseif(checkIt(omniWeb))browser=OmniWeb
elseif(checkIt(opera))browser=Opera
elseif(checkIt(Webtv))browser=WebTV;
elseif(checkIt(icab))browser=iCab
elseif(checkIt(msie))browser=InternetExplorer
elseif(!checkIt(compatible)){
browser=NetscapeNavigator
version=detectcharAt();
}
elsebrowser=Anunknownbrowser;
if(!version)version=detectcharAt(place+thestringlength);
if(!OS){
if(checkIt(linux))OS=Linux;
elseif(checkIt(x))OS=Unix;
elseif(checkIt(mac))OS=Mac
elseif(checkIt(win))OS=Windows
elseOS=anunknownoperatingsystem;
}
}
functioncheckIt(string){
place=detectindexOf(string)+;
thestring=string;
returnplace;
}
下面看一下网页加载时需要添加的方法有关网页加载和初始化方法代码如下
//网页加载调用initialize和getBrowserInfo方法
Eventobserve(windowloadinitializefalse);
Eventobserve(windowloadgetBrowserInfofalse);
//未加载时清空缓存
Eventobserve(windowunloadEventunloadCachefalse);
//初始化方法
functioninitialize(){
//调用该方法为该页添加覆盖层和高亮显示层
addLightboxMarkup();
//为每个可高亮显示的元素创建lightbox对象
lbox=documentgetElementsByClassName(lbOn);
for(i=;i<lboxlength;i++){
valid=newlightbox(lbox[i]);
}
}
//使用Dom方法创建覆盖层和高亮层
functionaddLightboxMarkup(){
bod=documentgetElementsByTagName(body)[];
overlay=documentcreateElement(div);
overlayid=overlay;
lb=documentcreateElement(div);
lbid=lightbox;
lbclassName=loading;
lbinnerHTML=<divid=lbLoadMessage>+
<p>Loading</p>+
</div>;
bodappendChild(overlay);
bodappendChild(lb);
}
封装lightbox类
初始化数据时为每个可高亮显示的链接创建了lightbox对象该类的代码具体实现如下
varlightbox=Classcreate();
lightboxprototype={
yPos:
xPos:
//构造方法ctrl为创建该对象的元素
initialize:function(ctrl){
//将该元素的链接赋值给ntent
ntent=ctrlhref;
//为该元素添加onclick事件activate方法
Eventobserve(ctrlclickthisactivatebindAsEventListener(this)false);
ctrlonclick=function(){returnfalse;};
}
//当单击链接时
activate:function(){
if(browser==InternetExplorer){//判断为IE浏览器
thisgetScroll();
thisprepareIE(%hidden);
thissetScroll();
thishideSelects(hidden);//隐藏所有的<select>标记
}
//调用该类中的displayLightbox方法
thisdisplayLightbox(block);
}
prepareIE:function(heightoverflow){
bod=documentgetElementsByTagName(body)[];
bodstyleheight=height;
bodstyleoverflow=overflow;
htm=documentgetElementsByTagName(html)[];
htmstyleheight=height;
htmstyleoverflow=overflow;
}
hideSelects:function(visibility){
selects=documentgetElementsByTagName(select);
for(i=;i<selectslength;i++){
selects[i]stylevisibility=visibility;
}
}
getScroll:function(){
if(selfpageYOffset){
thisyPos=selfpageYOffset;
}elseif(documentdocumentElement&&documentdocumentElementscrollTop){
thisyPos=documentdocumentElementscrollTop;
}elseif(documentbody){
thisyPos=documentbodyscrollTop;
}
}
setScroll:function(xy){
windowscrollTo(xy);
}
displayLightbox:function(display){
//将覆盖层显示
$(overlay)styledisplay=display;
//将高亮层显示
$(lightbox)styledisplay=display;
//如果不是隐藏状态则调用该类中的loadInfo方法
if(display!=none)thisloadInfo();
}
//该方法发送Ajax请求
loadInffunction(){
//当请求完成后调用本类中processInfo方法
varmyAjax=newAjaxRequest(
ntent
{method:getparameters:onComplete:thisprocessInfobindAsEventListener(this)}
);
}
//将返回的文本信息显示到高亮层上
processInffunction(response){
//获得返回的文本数据
varresult=responseresponseText;
//显示到高亮层
info=<divid=lbContent>+result+</div>;
//在info元素前插入一个元素
newInsertionBefore($(lbLoadMessage)info)
//改变该元素的classname的值
$(lightbox)className=done;
//调用本类中actions方法
thisactions();
varctrl=$(lightbox);
//为高亮层添加事件处理方法reset
Eventobserve(ctrlclickthisresetbindAsEventListener(this)false);
ctrlonclick=function(){returnfalse;};
}
//恢复初始状态
reset:function(){
//隐藏覆盖层
$(overlay)styledisplay=none;
//清空返回数据
$(lbContent)innerHTML=;
//隐藏高亮层
$(lightbox)styledisplay=none;
}
//Searchthroughnewlinkswithinthelightboxandattachclickevent
actions:function(){
lbActions=documentgetElementsByClassName(lbAction);
for(i=;i<lbActionslength;i++){
Eventobserve(lbActions[i]clickthis[lbActions[i]rel]bindAsEventListener(this)false);
lbActions[i]onclick=function(){returnfalse;};
}
}
}
提示由于该对象比较复杂读者可以仔细参阅代码的注释部分
服务器端代码
服务器端首先获得查询中的id值如果该值为null或为空则设置为默认值然后
判断该值并且返回相应的一段字符串信息处理请求的getInfohtml class=wordstyle>jsp页面代码如下
<%@pagelanguage=javaimport=javautil*%>
<%
//获得请求中id的值
StringimgID=requestgetParameter(id);
if(imgID==null||imgIDequals())//如果为null或为空
imgID=one;//设定为默认值
if(imgIDequals(one))//如果为one
{
%>
<hid=cartitle>PorscheCarreraGT</h>
<p>TheCarreraGThasalitreVinternalcombustionenginethatproduces
SAEhorsepower(kW)Porscheclaimsitwillacceleratefromto
km/h(mph)insecondsandhasamaximumspeedofkm/h(mph)
Withhpthecarweighskg(lb)TheCarreraGTisonly
offeredwithasixspeedmanualtransmissionincontrasttoitsrivalthe
FerrariEnzothatisonlyofferedwithsequentialmanualtransmissionAlso
theCarreraGTissignificantlylessexpensivethantheFerrariEnzoThe
FerrariEnzoispricedaround$totheCarreraGTs$The
CarreraGTisknownforitshighqualityandreliabilitywhichmakesitoneof
thebestsupercarsever
<%}else{//否则
%>
<hid=cartitle>FerrariTestarossa</h>
<p>TheFerrariTestarossaisanVmidenginedsportscarmadebyFerrari
Thenamewhichmeans"redhead"comesfromtheredpaintedcylinderheadson
theflatengineTheenginewastechnicallya?Venginesinceitshared
flatplanecrankshaftpinswithopposingcylindersOutputwashp(
kW)andthecarwonmanycomparisontestsandadmirersitwasfeaturedon
thecoverofRoad&TrackmagazineninetimesinjustfiveyearsAlmost
TestarossasTRsandMswereproducedmakingthisoneofthe
mostcommonFerrarimodelsdespiteitshighpriceandexoticdesign
<%}%>
htmlclass=wordstyle>aspxsnap_preview_added=spasnap_icon_added=spaac
t_suffixicon_trigger=falsetext_trigger=trueparent_link_icon=false>
class=wordstyle>
