页面设计小结

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

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

Html 代码

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

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

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

css 代码

.tr_odd {
    background-color: #dcdcdc;
}

.tr_hover {
    background-color: #FFD9C3;
}

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

js 代码

// 向html元素中添加样式
function addStyleClass(element, value) {
    if(!element.className) {
        element.className = value;
    } else {
        var newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    }
}

// 从html元素中删除样式
function removeStyleClass(element, value) {
    if(element.className) {
        var className = element.className;
        if(className.indexOf(value) != -1) {
            var head = className.substring(0, className.indexOf(value));
            var tail = className.substring(className.indexOf(value) + value.length, className.length -1);
            element.className = head + tail;
        }
    }
}

// 处理表格的显示效果
function listTableBeautifier() {
    table = document.getElementById('list_table');
    if(table) {
        var odd = false;
        var rows = table.getElementsByTagName('tr');
        for(var i = 1; i < rows.length; i++) {
            if(odd == true) {
                addStyleClass(rows[i], "tr_odd");
                odd = false;
            } else {
                odd = true;
            }
            var className = rows[i].className;
            rows[i].onmouseover = function() {
                addStyleClass(this, 'tr_hover');
            }
            rows[i].onmouseout = function() {
                removeStyleClass(this, 'tr_hover');
            }
        }
    }
}

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

js 代码

window.onload = function() {
    listTableBeautifier();
}

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