金山词霸即划即译设计随笔（四）

如果说上面的两步是为了获取用户在客户端提交的表单输入的话，那可以姑且称上面是为表示层（GUI）做准备的。下面，我们来设计真正的用户表示层-------结果显示层（div）。

上面提到过，设计该程序时，选择层作为响应用户请求，显示查询结果的媒介。在当前盛行的div+css设计主流中，<div>发挥着举足轻重的作用，尤其是与动态显示/隐藏，拖动有关的客户端特效。综合这些，无非是运用了<div>的两大特性，或者说是优点——display和position。运用<div>的这些特性，可以实现，拖动，动态隐现，动态菜单，树视图等效果。在此，只是抛个砖头。

不多说，把代码贴上来看看：

< div  id ="layer1"  style ="background-color:#99ccff;position:absolute;display:none;" >
< table  style ="border-right: #66ccff 1px solid; border-top: #66ccff 1px solid; border-left: #66ccff 1px solid;
            width:250px;border-bottom: #66ccff 1px solid;" >
             < tr  style ="height:20px;" >
                 < td  style ="width: 72px; background-color: #99ccff" >
                     < span  style ="color: #9933ff; font-family: 华文彩云" > 即划即查 </ span ></ td >
                 < td  align ="right"  style ="background-color: #99ccff" >
                     < span  style ="color: #0099cc" >< span  style ="font-size: 10pt" >< a  id ="more" > 更多... </ a ></ span ></ span >
                     < img  src ="close.gif"  onclick ="layer1.style.display='none';"   /></ td >
             </ tr >
             < tr >
                 < td  colspan ="2"  style ="background-color:#fff;" >
                     < div  id ="content"  style ="padding:5 5 5 5;margin:0 5" ></ div >
                 </ td >
             </ tr >
             < tr  style ="height:20px;" >
                 < td  style ="width: 105px; background-color: gainsboro;border-right:none;" ></ td >
                 < td  align ="right"  style ="background-color: gainsboro;border-left:none;" ></ td >
             </ tr >
         </ table >
</ div >

上面代码也许我写的有些复杂了，其实也很简单。外围一个<div id="layer1">控制查询结果的显示和隐藏：在用户选定某一文本后，开始异步发送请求，服务器端接受这一请求，并查询数据库，返回结果。该层在用户选择文本后显现，等待结果过程中会显示”正在查询，请稍后....“提示，准备完成后，显示结果列表，此时可以在窗体空白处单击鼠标，关闭层的显示，也可以直接单击结果层上的关闭按钮来关闭。

值得注意的是，<div>的显示状态在初始化时是不显示的（display:none）,什么时间显示是在脚本里控制的;<div>的定位属性这里采取了绝对定位，即: position:absolute。绝对是指，相对于浏览器而言，它在窗口中的定位采取绝对坐标控制，但在实际处理过程中，它是依据用户选择文本的坐标位置决定的，简单说，就是光标的瞬时位置；

显示结果时用到了<ul>，下面是对<ul>格式的控制样式：

style type="text/css">    
ul h3 {...} {   
    PADDING: 0;
    MARGIN: 0; 
    FLOAT: left;
    OVERFLOW: hidden;
    width:140px;
    text-overflow: ellipsis;
    font-size:13px;
    color:blue; 
}
ul  {...} {
    PADDING: 0;
    MARGIN: 0;
    line-height:18px;
    table-layout:fixed;
}
li  {...} {
     PADDING: 0;
    MARGIN: 5px;
    OVERFLOW: hidden;
    LIST-STYLE-TYPE:none;
    CLEAR: both;
    WHITE-SPACE: nowrap;
    text-overflow: ellipsis;
    width:210px;
    font-size:12px;
    }
body {...} {
 font-size:13px;
}
a {...} {
text-decoration:none;
}
</style>

 

MSN跟我交流