页面设计小结

        在传统的MVC的开发模式中，我一直比较关注M和C，对于应用层次之间的解耦的好处深有体会，最近受朋友之托做一个小型的网站，对网站的页面设计开始有些着迷，用了一个周末看了一些css、javascript的资料，感觉小有体会。

        其实在页面的开发中，各种技术也有非常明确的分工，如果设计得当、技术运用合理，也可以做到一定的解耦，从而增强页面的兼容性。一般用html来记述内容，css来控制显示，javascript来控制行为。下边以最常见的列表为例。一般用户体验好一些的表格都要相隔行之间显示不同的样式，鼠标停留行要有特别的样式，效果如下图：

Html 代码

1. <table id="list_table">  
2.     <tr>  
3.         <th>商圈名称</th>  
4.         <th width="100">&nbsp;</th>  
5.     </tr>  
6.     <tr>  
7.         <td>商圈1</td>  
8.         <td align="center"><a href="/admin/area/index/12">修改</a>&nbsp;   
9.         <a href="/admin/area/destroy/12">删除</a></td>  
10.     </tr>  
11.     <!-- 其它的和商圈1一样，省略 -->  
12. </table>  

可以看到就是简单的table，没有css，没有javascript，关键是id="list_table"这句话，可以在javascript中方便的找到这一类表格。

接下来是定义css，因为是举例，只列出交换行和鼠标停留行的代码。

css 代码

1. .tr_odd {   
2.     background-color: #dcdcdc;   
3. }   
4.   
5. .tr_hover {   
6.     background-color: #FFD9C3;   
7. }  

但是样式并没有和表格进行关联，所以现在不会有特别的显示效果，接下来就是javascript的工作了。

js 代码

1. // 向html元素中添加样式   
2. function addStyleClass(element, value) {   
3.     if(!element.className) {   
4.         element.className = value;   
5.     } else {   
6.         var newClassName = element.className;   
7.         newClassName+= " ";   
8.         newClassName+= value;   
9.         element.className = newClassName;   
10.     }   
11. }   
12.   
13. // 从html元素中删除样式   
14. function removeStyleClass(element, value) {   
15.     if(element.className) {   
16.         var className = element.className;   
17.         if(className.indexOf(value) != -1) {   
18.             var head = className.substring(0, className.indexOf(value));   
19.             var tail = className.substring(className.indexOf(value) + value.length, className.length -1);   
20.             element.className = head + tail;   
21.         }   
22.     }   
23. }   
24.   
25. // 处理表格的显示效果   
26. function listTableBeautifier() {   
27.     table = document.getElementById('list_table');   
28.     if(table) {   
29.         var odd = false;   
30.         var rows = table.getElementsByTagName('tr');   
31.         for(var i = 1; i < rows.length; i++) {   
32.             if(odd == true) {   
33.                 addStyleClass(rows[i], "tr_odd");   
34.                 odd = false;   
35.             } else {   
36.                 odd = true;   
37.             }   
38.             var className = rows[i].className;   
39.             rows[i].onmouseover = function() {   
40.                 addStyleClass(this, 'tr_hover');   
41.             }   
42.             rows[i].onmouseout = function() {   
43.                 removeStyleClass(this, 'tr_hover');   
44.             }   
45.         }   
46.     }   
47. }  

程序比较简单，就是遍历list_table中的tr(注意是从第二个tr开始，第一行是表头)，并给每一个tr附加样式，并定义onmouseover和onmouseout方法，但是这样并不能达到效果，因为我们需要让这段js在页面元素完全载入之后才进行操作，还需要在js最后加入下边这句话：

js 代码

1. window.onload = function() {   
2.     listTableBeautifier();   
3. }  

个人认为这样实现比直接给表格附加样式和js在设计上要好一些。主要是用到了js的dom处理。