CSS+Javascript构造的查询结果列表窗口

    在Web开发中,经常会将查询结果显示到列表里,例如:当查询符合某个条件的所有单位或者项目,然后再结果中再选中某一单位或者项目查看其详细信息。类似于这样的应用都会用到查询结果的展现。所以用CSS+javascript写了一个,先来看下最终的样式:

    首先,先看下展开之前的样式:

未展开前样式

停靠在窗体的左下角。

    然后再看下展开之后的样式:

展开后的结果列表展开之后的详细信息

    下面我们来看下实现方式:    

1. 先建立一个HTML页面,代码如下:

    2.下面建立一个CSS文件,编写样式,文件名称为result.css:

   3. 最后来建立对应的脚本文件,名称为resultList.js,代码如下:

   终于好了,一个美观的结果列表窗口就构建好了,具体的使用中,当然还要结合其他操作才能构成完成的应用。因为一个查询结果都是从数据库中查询出来动态添加到列表里的,因为最终的结果应该根据对应的数据库查询动态填充。

posted @ 2008-06-12 23:12  DeveloperBo  阅读(402)  评论(0编辑  收藏  举报