基于Ｊａｖａｓｃｒｉｐｔ的可编辑下拉列表框的设计与实现.docVIP

基于Ｊａｖａｓｃｒｉｐｔ的可编辑下拉列表框的设计与实现 　　摘要:该文从用户的角度对下拉列表框存在的问题进行了分析,介绍了可编辑下拉列表框的基本设计思路,阐述了基于Javascript的可编辑下拉列表框的的实现过程,并就如何精确定位控件相对位置提出了基于offset算法的可行性解决方案。 　　关键词:可编辑下拉框;Javascript;offset算法 　　中图分类号:TP311 文献标识码:A 文章编号:1009-3044(2009)15-3935-02 　　 　　The Design and Implementation of Teaching-Outline Management System Based on Web 　　LIN Feng, LI Ying-hui 　　(Department of Information Technology, Zhejiang EconomicTrade Polyteching, Hangzhou 310018, China) 　　Abstract: This paper firstly analyzes the question of drop-down listbox from the perspective of users , secondly introduces basic design ideas of the editable drop-down listbox, and then expounds the editable drop-down list box to the realization of the process based on javascript, Finally puts forward the feasibility of Solutions about how to control the relative position of precise positioning of the control based on offset algorithm. 　　Key words: editable drop-down listbox; Javascript; offset algorithm 　　 　　1 引言 　　 　　在基于WEB的网站项目开发中,经常会使用下拉列表框来提供一组固定选项供用户选择。例如在用户注册页面中,“安全提问”下拉列表框一般会为用户提供一些诸如“你的职业”等问题,以提高用户信息安全,但有时用户会觉得这些问题并不是自己最喜欢的或者最容易记住的,他更希望能自己来设置安全问题。也就是说在很多时候用户希望的是一个能供选择但也能输入自定义内容的下拉列表框,然而在实际上诸如像.NET、JDK等开发工具本身并没有此类现成的组件可供选择,因此开发一个可编辑的下拉列表框组件具有一定的实用价值。 　　 　　2设计思路 　　 　　从实质上看,可编辑的下拉列表框其实就是下拉列表框(listbox)+文本框(input)的组合。因此,如何把listbox和input在外观上合二为一以及如何实现两者之间value值的互换是可编辑下拉列表框在设计时应该要考虑的两个主要问题。首先,对于第一个问题,可以通过初始化的方法将listbox列表框与input文本框 重叠,并使用clip:rect方法对listbox进行显示区域的切割,使文本框正好嵌入在列表框的边框内;而对于第二个问题的处理相对比较容易,可以通过onchange事件触发机制,即当用户选定了下拉列表框的选项时,将listbox选择的文本值填入到input文本框并进行赋值。 　　由于在实际中,下拉列表框的位置和大小往往是不固定的或者是可变的,因此如何精确定位控件的相对位置是设计中最大的难题。通过多次分析和实践,本文采用了基于offsetParent、offsetTop、offsetLeft、offsetWidth和offsetHeight的基本算法来实现控件定位。其基本思路如下:首先让下拉列表框作为文本框的offsetParent;其次将文本框的offsetTop、offsetLeft和offsetHeight设置为下拉列表框的offsetTop、offsetLeft和offsetHeight;最后将文本框的offsetWidth设置为下拉列表框的offsetWidth-16。即通过offset的系列运算,使文本框能较好的嵌入在下拉列表框内并随着下拉列表框的移动而移动。 　　可编辑下拉列表框的程序设计流程如图1所示。 　　 　　3 编程实现 　　 　　3.1 功能模块的程序设计 　　考虑到程序的执行效率、通用性及跨平台性,本文使用用户端脚本语言Jav