天乙社区后台管理分析(一)

今天来讲一下后台管理的实现。主要是界面。
首先来看一下跳转到后台管理界面的过程,最开始是在社区首页的右上角点击“管理”选项,这会发出userShow请求,跳转到userShow.jsp,在该界面中再点击右上角的“后台管理”选项,会发出adminMain请求,跳转到adminMain.jsp即后台管理的首页。
adminMain.jsp中主要就是一个frameset,其中左边放adminLeft.jsp,右边放adminIndex.jsp。先来看adminLeft.jsp。为了能更清楚地看到后台管理中的侧边栏是如何实现的,我做了如下的小实验,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 后台管理界面小实验 </title>

  <script type="text/javascript" src="prototype.js"></script>

 </head>

 <body>

  <style type="text/css">

	.table2 { background-color:#ffffff }

	.table3 { background-color:#ebeadd }

	.table4 { background-color:#cfcdaf }

	.item { font-size:14px; color:#000000; background-color:#ffffff; }

	.title { font-size:14px; font-weight:bold; color:#ffffff; cursor:hand; cursor:pointer; }

 </style>

 <script language="javascript" type="text/javascript">

	function showMemu(i) {

	   Element.toggle("t" + i);

	}



	function over(tid)

	{

		tid.style.backgroundColor="#ebeadd";

	}



	function out(tid)

	{

		tid.style.backgroundColor="#ffffff";

	}

 </script>

<!--  <table width="160" border="0" cellspacing="2" cellpadding="0" class="table2">

 	<tr>

 		<td> -->

			<table width="160" border="0" cellspacing="3" cellpadding="0" class="table3">

				<tr>

					<td>

						<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table4">

							<tr>

								<td class="title" height="21">

								1

								</td>

							</tr>

						</table>

					</td>

				</tr>

				<tr>

					<td>

						<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table4">

							<tr>

								<td class="title" height="21" onClick="showMemu(1)">

								2

								</td>

							<tr>

						</table>

						<table width="100%" border="0" cellspacing="1" cellpadding="0" style="display:none" id="t1" class="table4">

							<tr>

								<td class="item" height="21" align="center" onMouseOver="over(this);" onMouseOut="out(this)">

								2.1

								</td>

							</tr>

							<tr>

								<td class="item" height="21" align="center" onMouseOver="over(this);" onMouseOut="out(this)">

								2.2

								</td>

							</tr>

							<tr>

								<td class="item" height="21" align="center" onMouseOver="over(this);" onMouseOut="out(this)">

								2.3

								</td>

							</tr>

						</table>

					</td>

				</tr>

			</table>

		<!-- </td>

		    </tr>

		  <table> -->

 </body>

</html>



其实现了侧边栏的展开效果如下:
天乙社区后台管理分析(一)
其中要注意的是:
1 
侧边栏的框架基本上由三种层次的table标签来构成,第一个层次就是包含整个导航栏的table,第二个层次是包含某一个主题的table,第三个层次是包含某一个主题中所有子项目的table
2 
在每个主题之间以及主题中子项目之间可以看到有间隔,这个间隔的产生并不是table的边框(border)属性产生的效果(可以看到所有tableborder属性都设为0)。而是tablecellspacing属性产生的效果,该属性规定了单元格之间的空间(顺便提一下,cellpadding 属性规定的是单元边沿与单元内容之间的空间)。由于每个table都通过样式表定义的class指定了背景色,单元格间的空隙处显示的是其下面一层table的背景色,所以看起来会像单元格有边框一样。
3 
.title这个class的定义中,cursor属性既指定为hand,又指定为pointer。其实这两个值都是指定鼠标的样式是“手”的样子。写两个是因为handFireFox中不被支持,IE完全支持。而pointerIE5之前的版本中不支持,FireFox支持。
4 
showMemu(i)这个JavaScript函数中,用了Element.toggle方法。在DOMElement对象中并没有toggle方法。这个方法的定义在prototype.js中,作用是切换元素的可见性。所以要让上面的小实验能正确运行,必须要引用prototype.js文件,prototype.js可以在下面的网址中下载:
http://prototypejs.org/download

你可能感兴趣的:(管理)