CSS+Javascript构造的查询结果列表窗口
在Web开发中,经常会将查询结果显示到列表里,例如:当查询符合某个条件的所有单位或者项目,然后再结果中再选中某一单位或者项目查看其详细信息。类似于这样的应用都会用到查询结果的展现。所以用CSS+javascript写了一个,先来看下最终的样式:
首先,先看下展开之前的样式:
停靠在窗体的左下角。
然后再看下展开之后的样式:
下面我们来看下实现方式:
1. 先建立一个HTML页面,代码如下:
2.下面建立一个CSS文件,编写样式,文件名称为result.css:
3. 最后来建立对应的脚本文件,名称为resultList.js,代码如下:
终于好了,一个美观的结果列表窗口就构建好了,具体的使用中,当然还要结合其他操作才能构成完成的应用。因为一个查询结果都是从数据库中查询出来动态添加到列表里的,因为最终的结果应该根据对应的数据库查询动态填充。