天乙社區社區首頁分析(三)

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。