天乙社区社区首页分析(一)

来源：互联网发布：单代号搭接网络计划编辑：程序博客网时间：2024/04/29 10:42

社区首页的界面文件是main.jsp（可以从action-servlet.xml中login请求结果为success时的跳转和login.java中toUrl的设置得知）。

粗看代码和界面，很显然，main.jsp显示的代码主要有两个iframe组成，前一个iframe显示左边的导航栏，链接是nag.jsp的url。后一个iframe显示右边论坛主界面，链接是in.jsp的url。这里我们先不管导航栏和主界面是如何实现的，先看一下main.jsp这个文件是如何实现布局的。

下面的代码，是我修改main.jsp而成的，是为了方便研究界面代码而做的小实验，可以粘贴到记事本里，后缀改名html，用浏览器直接打开。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>社区首页小实验</title></head><body><script language="JavaScript" type="text/javascript">if(self!=top){  top.location=self.location;}function switchSysBar(){  if (switchPoint.innerHTML=='<'){switchPoint.innerHTML='>'document.getElementById("frmTitle").style.display="none";  }  else{switchPoint.innerHTML='<'document.getElementById("frmTitle").style.display="block";  }}</script><style type="text/css">.td2 { width: 10pt;background-color:#ABBCDC}.switchbarfont { font-family: Tahoma, Verdana; font-size:12px; color:#ffffff; }.navPoint { color: #000000; cursor: hand;font-family: "宋体",Tahoma, Verdana; font-size: 9pt }.div1{background-color:Red;}.div2{background-color:green;}</style><table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%">  <tr><td align="middle" noWrap vAlign="center" id="frmTitle" height="100%" width="20%">  <div class="div1">侧边导航栏</div></td><td class="td2">  <table border="0" cellPadding="0" cellSpacing="0" height="100%"><tr>  <td onclick="switchSysBar()"><font class="switchbarfont">  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <span class="navPoint" id="switchPoint" title="关闭/打开左栏"><</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  屏幕切换</font>  </td></tr>  </table></td><td align="middle"><div class="div2">主界面</div></td>  </tr></table></body></html>

main.jsp的主体部分就是一个一行三列的表格构成，其中中间的一列又嵌套了一个表格。

问题：<span class="navPoint" id="switchPoint" title="关闭/打开左栏"><</span>中的<是什么意思？

“<”在html代码中是特殊字符（尖括号），在html代码中要打<在网页中会相应地显示为”<”。这里span的title属性指的是鼠标在标签体内时显示的提示内容。

问题：为什么中间那条那么窄，而且字还是竖着显示的？

<td class="td2">，中间这一列的样式定义在叫td2的class中。.td2 { width: 10pt;background-color:#ABBCDC}，其中规定了宽度会10pt，所以中间这列会这么窄。由于太窄了，一行只能放下一个字，所以文字会竖着显示，td2中同时规定了这一列的背景色。

问题：下面这段javascript代码的作用？

if(self!=top){top.location=self.location;}

HTML DOM top 属性：top 属性返回最顶层的先辈窗口。该属性返回对一个顶级（在最上层的）窗口的只读引用。如果窗口本身就是一个顶级窗口，top属性存放对窗口自身的引用。如果窗口是一个框架，那么 top属性引用包含框架的顶层窗口。所以这两句代码的意思就是如果当前的窗口不是顶层窗口，则把当前窗口设为顶层窗口。

问题：侧边栏打开/关闭效果是如何实现的？

看switchSysBar()这个javascript函数：先会调换<span>标签中显示的箭头方向，<表示”<”，&gt表示”>”，然后设置最左边导航栏这一列的style.display属性。

display属性设为none，则元素隐藏（不显示），由此实现了侧边栏的关闭效果；设为block，则此元素将显示为块级元素，此元素前后会带有换行符，由此实现了侧边栏的打开效果（此处其实也可以用inline）；inline是display属性的默认值，此时元素会被显示为内联元素，元素前后没有换行符。

其他：

.navPoint { color: #000000; cursor: hand;font-family: "宋体",Tahoma, Verdana; font-size: 9pt }，在样式表中可以通过cursor属性来设置鼠标放在元素上时所显示的样式。

main.jsp的分析到此