在Web开发中，经常会将查询结果显示到列表里，例如：当查询符合某个条件的所有单位或者项目，然后再结果中再选中某一单位或者项目查看其详细信息。类似于这样的应用都会用到查询结果的展现。所以用CSS+javascript写了一个，先来看下最终的样式：
首先，先看下展开之前的样式：
停靠在窗体的左下角。
然后再看下展开之后的样式：
下面我们来看下实现方式：
1. 先建立一个HTML页面，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <META NAME="Author" CONTENT="WUBO"> <META NAME="Keywords" CONTENT="ResultList"> <link rel="stylesheet" rev="stylesheet" href="result.css" type="text/css"> <script type="text/javascript" src="resultList.js" defer="defer"></script> </HEAD> <BODY > <!--结果展示面板--> <div id="resultPanel"> <div id="ResultTitle" style="cursor: pointer;" οnclick="showResultBody()">查询结果</div> <div id="ResultBody" style="display: none;"> <table id="secTable" width="250" cellpadding="0" cellspacing="0" style="font-size:12px;"> <tr align="center"> <td id="cl01" class="result03 result01" οnclick="secBoard(1);" > 结果列表</td> <td id="cl02" class="result03 result02" οnclick="secBoard(2);"> 详细信息</td> </tr> <tr> <td class="border" colspan="2"> <div id="tbx01"> <span οnclick="secBoard2();">测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> </div> <div id="tbx02"> <span>此代码是用来测试结果显示样式；</span> </div> </td> </tr> </table> </div> </div> </BODY> </HTML>2.下面建立一个CSS文件，编写样式，文件名称为result.css：
/*结果展示面板 ---------------------------------------------------------------------*/ body { font-size: 12px; } #resultPanel { position:absolute; left:1px; bottom:1px; } /*表头的样式*/ #ResultTitle { display: block; background-color: #FFCC00; line-height: 25px; border: 1px solid #C37834; margin-bottom: 1px; width:240px; +width:250px; height:25px; padding-left: 10px; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFCC00, endColorStr=#FFFF99, gradientType=0); } /* Switch Tab */ .result01 { background: #FF6600; padding-top:1px; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFCCCC, endColorStr=#FF6600, gradientType=0); } .result02 { background:#FFCC00; margin:1px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; } .result03 { width:60px; height:25px; border:#C37834 1px solid; padding-top:1px; margin:1px; cursor:pointer; } /* Table Border */ .border { background-color: white; border: 1px solid #C37834; border-top: 0px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; } #tbx01 { width:250px; +width:248px; height:240px; overflow-x: hidden; +overflow:auto; } #tbx02 { display: none; width:250px; +width:248px; height:240px; padding:0px; background-color: #FFFFDD; overflow-x: hidden; +overflow:auto; } #tbx01 span { display:block; width:100%; height:25px; line-height:25px; border: #FFCC00 1px solid; padding-left:10px; margin:1px; background: #FFFFDD; cursor:pointer; } #tbx02 span { padding-left:10px; line-height:25px; height: 25px; width:100%; display:block; }3. 最后来建立对应的脚本文件，名称为resultList.js，代码如下：
// 切换选项卡(结果列表|详细信息) function secBoard(n) { for(i=1;i<3;i++) { eval("document.getElementById('cl0"+i+"').className='result03 result02'"); eval("tbx0"+i+".style.display='none'"); } eval("document.getElementById('cl0"+n+"').className='result03 result01'"); eval("tbx0"+n+".style.display='block'"); } // 显示、隐藏查询结果 function showResultBody() { if ($("ResultBody").style.display=="none" || $("ResultBody").style.display=="" ) { $("ResultBody").style.display="block"; } else { $("ResultBody").style.display="none"; } } function $() //document.getElementById { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') { element = document.getElementById(element); } if (arguments.length == 1) { return element; } elements.push(element); } return elements; } //当点击某一项时显示其详细信息 function secBoard2() { $("cl01").className = "result03 result02"; $("cl02").className = "result03 result01"; $("tbx01").style.display = "none"; $("tbx02").style.display = "block"; }终于好了，一个美观的结果列表窗口就构建好了，具体的使用中，当然还要结合其他操作才能构成完成的应用。因为一个查询结果都是从数据库中查询出来动态添加到列表里的，因为最终的结果应该根据对应的数据库查询动态填充。
3117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
