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

最新推荐文章于 2025-05-02 10:28:22 发布

blackboxwer

最新推荐文章于 2025-05-02 10:28:22 发布

阅读量1k

点赞数

分类专栏：天乙社区分析专栏文章标签： JavaScript 天乙开源社区界面

本文链接：https://blog.youkuaiyun.com/blackboxwer/article/details/10197335

版权

天乙社区分析专栏专栏收录该内容

7 篇文章

订阅专栏

社区首页的界面文件是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 οnclick="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的分析到此