menu_js.jsp

使用JSP和Java Bean来构建一个网上书店。本章介绍的例子可以分成两大部分

<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="include.jsp"%>

document.write("<style>#master{LEFT:-220px;POSITION:absolute;z-index:1;}#menu{LEFT:220px;POSITION:absolute; TOP:230px; }#screen{POSITION:absolute; TOP:211px; }#screenlinks{POSITION:absolute; TOP:210px; VISIBILITY:visible; }</style>")
document.write('<style>#screen{filter:Alpha(Opacity=60)}#slink a:link {	color: #000000;	text-decoration: none;}#slink a:visited {	color: #000000;	text-decoration: none;}#slink a:hover {	color: #000000;	text-decoration: underline;}#slink a:active {	color: #000000;	text-decoration: none;}</style>')

var master = new Object("element")
master.curLeft = -220;
master.curTop = 10;

function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop){
clearTimeout(eval(layerName).timer)
if(eval(layerName).curLeft != fromLeft){
     if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft){eval(layerName).curLeft = fromLeft}
else if(eval(layerName).curLeft < fromLeft){eval(layerName).curLeft = eval(layerName).curLeft + paceLeft}
else if(eval(layerName).curLeft > fromLeft){eval(layerName).curLeft = eval(layerName).curLeft - paceLeft}
document.all[layerName].style.left = eval(layerName).curLeft
}
if(eval(layerName).curTop != fromTop){
     if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop){eval(layerName).curTop = fromTop}
else if(eval(layerName).curTop < fromTop){eval(layerName).curTop = eval(layerName).curTop + paceTop}
else if(eval(layerName).curTop > fromTop){eval(layerName).curTop = eval(layerName).curTop - paceTop}
document.all[layerName].style.top = eval(layerName).curTop
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30)
}

function setPace(layerName, fromLeft, fromTop, motionSpeed){
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft))/motionSpeed
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop))/motionSpeed
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop)
}

var expandState = 0
function expand(){
if(expandState == 0){setPace("master", 0, 10, 10);
document.menutop.src = "<%=ConfigBean.getStringValue("systenFolder")%>tools.gif"; expandState = 1;}
else{
setPace("master", -220, 10, 10); 
document.menutop.src = "<%=ConfigBean.getStringValue("systenFolder")%>tools.gif"; expandState = 0;}
}
document.write("<div id=master ><div id=menu onmouseover=javascript:expand() style='padding-left:0px'><table border=0 cellpadding=0 cellspacing=0 width=21><tbody><tr><td><img name=menutop src=<%=ConfigBean.getStringValue("systenFolder")%>tools.gif></td></tr></tbody></table></div><div id=top><table border=0 cellpadding=0 cellspacing=0 width=220><tbody><tr><td><img border=0 height=1 src=/images/menu/menuborder.gif width=180></td></tr></tbody></table></div><div id=screenlinks ><table  border=0 cellpadding=1 cellspacing=1 width=220 height=300 bgcolor=#0066CC><tbody><tr><td bgcolor=#f8f8f8  align=center valign=top >");
document.write("<div><img src='<%=ConfigBean.getStringValue("systenFolder")%>servicemm.gif'></div>");
document.write("<div style='padding-top:15px;line-height:25px;' id='slink'>");

<%
DBRow rows[] = memberMgr.getAllQQClientServiceByType(1);
for ( int i=0; i<rows.length; i++ )
{
%>
document.write("<div style='height:27px;'>");
document.write("<img src='<%=ConfigBean.getStringValue("systenFolder")%>imgs/qq_talk.gif'  align=absmiddle />&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<a href='<%=memberMgr.getServiceLink(rows[i].get("type",0),rows[i].getString("qq"),rows[i].getString("account"),rows[i].getString("email"))%>'><%=rows[i].getString("name")%></a><br>");
document.write("</div>");
<%
}
%>

<%
rows = memberMgr.getAllQQClientServiceByType(2);
for ( int i=0; i<rows.length; i++ )
{
%>
document.write("<div style='height:27px;'>");
document.write("<img src='<%=ConfigBean.getStringValue("systenFolder")%>imgs/msn_talk.gif'  align=absmiddle />&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<a href='<%=memberMgr.getServiceLink(rows[i].get("type",0),rows[i].getString("qq"),rows[i].getString("account"),rows[i].getString("email"))%>'><%=rows[i].getString("name")%></a><br>");
document.write("</div>");
<%
}
%>

<%
rows = memberMgr.getAllQQClientServiceByType(3);
for ( int i=0; i<rows.length; i++ )
{
%>
document.write("<div style='height:27px;'>");
document.write("<img src='<%=ConfigBean.getStringValue("systenFolder")%>imgs/skype.gif'  align=absmiddle />&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<a href='<%=memberMgr.getServiceLink(rows[i].get("type",0),rows[i].getString("qq"),rows[i].getString("account"),rows[i].getString("email"))%>'><%=rows[i].getString("name")%></a><br>");
document.write("</div>");
<%
}
%>

<%
rows = memberMgr.getAllQQClientServiceByType(4);
for ( int i=0; i<rows.length; i++ )
{
%>
document.write("<div style='height:30px;'>");
document.write("<img src='<%=ConfigBean.getStringValue("systenFolder")%>imgs/wangwang_talk.gif'  align=absmiddle />&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<a href='<%=memberMgr.getServiceLink(rows[i].get("type",0),rows[i].getString("qq"),rows[i].getString("account"),rows[i].getString("email"))%>'><%=rows[i].getString("name")%></a><br>");
document.write("</div>");
<%
}
%>



document.write("</div>");
document.write("</td></tr></tbody></table></div></div>");


var sidemenu = document.all.master;

function yuzi(){
sidemenu.style.top = document.body.scrollTop+2
}
setInterval("yuzi()",220);