金山词霸即划即译设计随笔(四)

原创 2007年09月13日 15:35:00

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

上面提到过,设计该程序时,选择层作为响应用户请求,显示查询结果的媒介。在当前盛行的div+css设计主流中,<div>发挥着举足轻重的作用,尤其是与动态显示/隐藏,拖动有关的客户端特效。综合这些,无非是运用了<div>的两大特性,或者说是优点——displayposition。运用<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"><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跟我交流

星际译王,金山词霸,有道词典,词库下载 2

七国语言词典 (19): [七国语言]英汉机械工程大词典 13213[七国语言]英汉信息大词典 14788[七国语言]英汉数学大词典 12736[七国语言]英汉农业大词典 15560[七国语言]...

黑马程序员 手写山寨版的金山词霸

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流! ----------------------...

金山词霸没落了么?

作为英语小白,金山词霸是我电脑的必备软件。用金山词霸的历史几乎与用电脑的历史是相同的。 之前好多年用的都是金山词霸2005,后来想起作为一个IT业人士,总用盗版似乎不够仗义。我一直比较尊敬金山,因为...

金山词霸生词本生成器

金山词霸除了单词查词功能,大家用得比较多的是金山词霸的生词本功能。 不可否认,金山词霸是个非常棒的英文单词查询工具,但其它功能还是有很多功能不完善。如生词本功能。 每一个人学单词时,学的顺序和内容都...
  • skyhh
  • skyhh
  • 2015年04月06日 11:28
  • 2213

控制其他程序1(金山词霸2009)

基于个人需要,想控制其他程序,获取其他程序接运行结果。 具体来说,现在我想要在我的程序中控制金山词霸查询一个单词,最后能在我的程序中显示查询的结果。   就像把其他程序作为一个函数来调用,首先想...

自定义加载等待动画,仿金山词霸

打开金山词霸,当加载下一页或者切换页面时,数据没有立即加载出来,会出现一个LoadingView 一起看看效果: 分析一下效果图,关键的技术点如下:1.绘制除出9个圆点(圆点的个数可以自己定义...

金山词霸2016.1.3.3 手动去广告方法

该词典的2012版可以通过修改xml文件实现去广告,之前有人发过百度经验了。然而2016版中根本没有xml文件了,故需要新的方法。        先看一看去广告前后的效果对比: 金山词霸的广告主要...

详解如何从安卓金山词霸导出单词本上的单词

因为金山词霸没有带导出功能也没有在线同步功能,所以会比较蛋疼,像我这种读专业书,边查边存的,积累了很多词汇,肯定要导出到电脑才会爽。 我们可以这样,首先在你的sdcard上找到powerword.d...

解决金山词霸2010牛津旗舰版破解词典丢失的方法

金山词霸丢失牛津词典的问题似乎从2009版就开始了,到了金山词霸2010版这个问题依旧没有解决。今天看到winzheng的Anson4朋友给出了一个解决金山词霸2010牛津旗舰版词典丢失的解决办法,贴...
  • bat67
  • bat67
  • 2017年01月14日 15:02
  • 1060

金山词霸抓词机理 -- HOOK消息功能的使用

内容提要 Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口,用它可以截获并处理送给其他应用程序的消息,来完...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: 金山词霸即划即译设计随笔(四)
举报原因:
原因补充:

(最多只允许输入30个字)