金山词霸即划即译设计随笔(四)
来源:互联网 发布:windows的搜索功能 编辑:程序博客网 时间:2024/06/06 09:34
如果说上面的两步是为了获取用户在客户端提交的表单输入的话,那可以姑且称上面是为表示层(GUI)做准备的。下面,我们来设计真正的用户表示层-------结果显示层(div)。
上面提到过,设计该程序时,选择层作为响应用户请求,显示查询结果的媒介。在当前盛行的div+css设计主流中,<div>发挥着举足轻重的作用,尤其是与动态显示/隐藏,拖动有关的客户端特效。综合这些,无非是运用了<div>的两大特性,或者说是优点——display和position。运用<div>的这些特性,可以实现,拖动,动态隐现,动态菜单,树视图等效果。在此,只是抛个砖头。
不多说,把代码贴上来看看:
<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>格式的控制样式:
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跟我交流
- 金山词霸即划即译设计随笔(四)
- 金山词霸即划即译设计随笔(一)
- 金山词霸即划即译设计随笔(二)
- 金山词霸即划即译设计随笔(三)
- 金山词霸即划即译设计随笔(五)
- 金山词霸即划即译设计随笔(六)
- 设计模式随笔(四):生成器(Builder)
- 随笔(四)
- 随笔(四)
- 随笔日记(四)
- dx10 学习随笔(四)
- sass教程随笔(四)
- 测试实习随笔(四)
- 手绘随笔:随笔(四)
- 随笔四
- (五) 类型设计(随笔)
- 设计模式 随笔(一)
- 设计模式 随笔(二)
- 我的股票: 2007/09/13 净值:1.91
- 学习笔记-ArcSDE中空间索引
- c # foreach 各参数
- SNMP网络管理协议
- 蓦然回首的刹那
- 金山词霸即划即译设计随笔(四)
- JSTL配置详细解决方法
- 走向彼岸
- EVC4.0+AdoCe3.1访问Access数据库全攻略(附带说明及例程)
- 达内CEO:中美开发三大不同,中国程序员更难做
- 关于PDU模式发送短信,千万可别被误导
- VS2005 专业教程 上一个 经典的源码
- C#示例 自动更新程序
- 双击dataGridView后的数据传递示例