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

时间 2019-11-16

标签社区首页分析繁體版

原文原文链接

今天继续分析社区首页中侧边导航栏，也就主要是nag.jsp。
先看一下nag.jsp的主要框架，显然，主要由三个div构成，以下：
第一个div：bnag0 是社区首页和我的中心。
（水平线）
第二个div：bnag1 是我的珍藏和版块(论坛)列表
第三个div：bnag2 退出社区

为了更好地理解这个框架，我修改其代码作了一个小实验，如要是研究侧边栏的导航树是如何实现的，代码以下：
javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title> nag导航栏小实验</title>
  <style type="text/css">
	 .nag ul {
		font-family: Verdana, Tahoma, "宋体";
		font-size: 14px;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	.nag ul li {
		margin-top: 5px;
		margin-right: 0px;
		margin-bottom: 5px;
		margin-left: 0px;
		background-color:white;
		width:100px
	}
	.nagbody {
		background-color: #F2F2FB;
	}
  </style>
  <script language="JavaScript" type="text/javascript">
	function loadUserCenter() {
	  var obj = document.getElementById("userCenterDiv");
	  var imgObj = document.getElementById("imgUserCenterSet");
	  if (obj.style.display == "none") {
		obj.style.display = "block";
		imgObj.src="images/collapse.gif";
	  }
	  else {
		obj.style.display = "none";
		imgObj.src="images/expand.gif";
	  }
	}
  </script>
 </head>
 <body class="nagbody">
  <div class="nag" id="bnag0">
    <ul style="background-color:blue">
      <li>
		<img id="imgIn" src="images/signalnode.gif" alt="" width="25" height="15" border="0" align="absmiddle"/>社区首页
      </li>
      <li><a  href="javascript:loadUserCenter();"><img id="imgUserCenterSet" src="images/expand.gif" alt="" width="25" height="15" border="0" align="absmiddle"/>我的中心</a></li>
		<div id="userCenterDiv" class="nag" style="display:none">
				<ul style="background-color:red">
				  <li><img id="imgSignSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>修改签名</li>
				  <li><img id="imgNickNameSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>修改昵称</li>
				  <li><img id="imgUserConfig" src="images/node.gif" alt="" border="0" align="absmiddle"/>我的参数</li>
				  <li><img id="imgFriendSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>编辑好友</li>
				  <li><img id="imgNote" src="images/node.gif" alt="" border="0" align="absmiddle"/>悄悄话</li>
				  <li><img id="imgBookMark" src="images/node.gif" alt="" border="0" align="absmiddle"/>书签管理</li>
				  <li><img id="imgFace" src="images/node.gif" alt="" border="0" align="absmiddle"/>编辑头像</li>
				  <li><img id="imgUserDetailSet" src="images/node.gif" alt="" border="0" align="absmiddle"/>我的资料</li>
				  <li><img id="imgCpasswd" src="images/node.gif" alt="" border="0" align="absmiddle"/>修改密码</li>
				  <li><img id="imgboardSaveManage" src="images/node.gif" alt="" border="0" align="absmiddle"/>珍藏管理</li>
				</ul>
		</div>
    </ul>
  </div>
 </body>
</html>

其中用到的图片为放在与上述代码所在文件同目录的image文件夹中，所用到的图片
collapse.gif: expand.gif: node.gif: signalnode.gif:
咱们也能够修改社区首页分析(二)中的小实验代码，把其中的第一个div，改成iframe以下：
<iframe id="nagFrame" name="nagFrame" frameBorder="0" scrolling="auto" src="nag导航栏小实验.html" class="iframe1"></iframe>
来把两个小实验结合起来，显示效果以下：
本次小实验：

与上次的结合后：

为了便于研究样式中padding，margin等属性产生的影响，在这里设置了<ul> <div>的背景色以及<li>的宽度。
对于上述代码：
首先导航树中的+，-图样就是图片，展开折叠仍是用display属性来实现的，如修改签名等我的中心的操做放在usercenterdiv中，其display一开始是为none，onclick是loadUserCenter方法，其中进行了usercenterdiv的display属性的切换和我的中心前的图片的更换。这就是展开吧和折叠效果的实现。

代码中css样式表的表的写法及其属性学习：
.nag ul li中的margin-top规定的是该元素中的ul中的li元素的上边距，margin-bottom,margin-right和margin-left相似。注意这种css样式表写法规定的不是赋该样式的元素自己，而是该元素的子元素。好比这里使用样式nag的是usercenterdiv而样式做用于的对象是其子元素ul元素中的子元素li元素。

问题：.nag ul中规定了属性margin和padding，magin和padding的区别？
这里magin是指ul与其四周元素的间距：外边距（即四周要留出空白的距离），包括和其父容器。w3c上的定义是元素边框和内容区之间的区域，可是这里所说的元素的内容区还不太明确。
padding是指ul自己就做为父元素，与其内容（包括其内部的子元素和文本）要保持的内边距。
为了测试这两个属性咱们能够修改上述代码中定义的样式，好比把nag ul中的margin或padding改成50px看看，来体会二者的不一样。
元素的width属性指的是元素内容区的宽度，并不包括元素的内边距，外边距和边框。而background-color所指定的元素背景色会覆盖内边距的区域。因此若是想以颜色来划份内容区可能会偏多，但除此以外关于元素内容区的定义，我仍是不清楚。
若是把边距只设为一个值，理论上上下左右的边距都会是这个值，但若没法同时知足，直观地来看，html彷佛会优先知足上边和左边的边距值。

html中把每一个元素所占的区域当作一个方块。
html中的元素，在没有设置width和height属性的状况下，默认为高度包裹内容，宽度填充父元素
为何和第一个小实验结合之后（看上面第二张效果图），左边的导航栏会在iframe中这样显示，只占那么恰好的一条，且不会出现滚动条？
由于在iframe中规定了精确的宽度为135px，而且在上述代码中的div ul等标签中都没有定义width属性，也就是默认的填充父容器。但页面在iframe中显示时，它们的父容器就是iframe，宽度填充父容器，因此看起来页面的宽度刚刚吻合iframe的宽度，不会出现滚动条。

问题：树中父元素和子元素（好比我的中心和其下面的条目）之间缩进的距离是如何产生的？
一开始我觉得是样式表中的margin，padding等设置产生了这一缩进间距。其实不是，那段缩进是由图片自己形成的！node.gif的左边原本就有一段空白的部分，并非因为设置边距形成的，由于你能够看到上面效果图中li元素所占的那个块和它的父元素之间并无间距。

问题：<a>属性 href="javascript:;"是什么意思？
href 属性的值能够是任何有效文档的相对或绝对 URL，包括片断标识符和 JavaScript 代码段。
这里本该要写的是点击连接后要执行的JavaScript 表达式、方法和函数的列表，可是因为后面指定了onclick的方法因此这里:后什么也没有。事实上去掉href属性或者去掉onclick属性且指定href属性为"javascript:loadUserCenter();"均可以达到一样的效果。

问题：<base target="mainFrame"/>这句什么意思？
为页面上的全部连接规定默认目标即规定点击连接后产生的页面在mainFrame中打开，而mainFrame指的就是在main.jsp中定义的iframe，这样就产生了社区首页中在左边导航栏点击条目，在右边主界面部分显示内容的效果。
另外<base>的href属性用来规定默认的基本URL，规定之后，浏览器将再也不使用当前文档的 URL，而使用指定的基本 URL 来解析全部的相对 URL。

问题：<img>中的alt属性是干吗的？
设置图像的替代文本，当图像没法显示时会显示图像的替代文本。这里设置为空字符串。

下面简要分析一下我的珍藏和版块列表是如何进行显示的：
大致思路就是用<s:iterator>从值栈中取出action对象的属性进行迭代，配合<ul>来在页面上输出我的珍藏的列表和版块的列表。
我的珍藏用到的是Nag类的boardSaveList属性，在Nag.java文件中能够看到boardSaveList的值经过BoardService的findBoardsInIDs方法获得。
版块列表用到的是Nag类的boardList和boardMap属性，其中boardList属性是全部版块对应的board对象的list。boardMap是键值对集合，其中键是每一个board的id，值是该id对应的board的子board的list。
要注意的是这里onclick属性的赋值中，loadChild中参数的写法：
因为这里要传递的参数在ognl上下文中，因此采用<s:property>标签来输出参数，又由于参数（参数是字符串型的）要加引号而外面又有引号了，因此用单引号代替。不知道可不能够ognl表达式%{}来代替<s:property>标签？能够作小实验试试！

关于Nag.java中所使用到的服务的内部代码，在这里就不深刻分析了。
侧边导航栏分析到此。

css