基于Ｊａｖａｓｃｒｉｐｔ的可編輯下拉列表框的設(shè)計與實現(xiàn)

摘要:該文從用戶的角度對下拉列表框存在的問題進行了分析，介紹了可編輯下拉列表框的基本設(shè)計思路，闡述了基于Javascript的可編輯下拉列表框的的實現(xiàn)過程，并就如何精確定位控件相對位置提出了基于offset算法的可行性解決方案。

關(guān)鍵詞:可編輯下拉框;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的網(wǎng)站項目開發(fā)中，經(jīng)常會使用下拉列表框來提供一組固定選項供用戶選擇。例如在用戶注冊頁面中，“安全提問”下拉列表框一般會為用戶提供一些諸如“你的職業(yè)”等問題，以提高用戶信息安全，但有時用戶會覺得這些問題并不是自己最喜歡的或者最容易記住的，他更希望能自己來設(shè)置安全問題。也就是說在很多時候用戶希望的是一個能供選擇但也能輸入自定義內(nèi)容的下拉列表框，然而在實際上諸如像.NET、JDK等開發(fā)工具本身并沒有此類現(xiàn)成的組件可供選擇，因此開發(fā)一個可編輯的下拉列表框組件具有一定的實用價值。

2設(shè)計思路

從實質(zhì)上看，可編輯的下拉列表框其實就是下拉列表框(listbox)+文本框(input)的組合。因此，如何把listbox和input在外觀上合二為一以及如何實現(xiàn)兩者之間value值的互換是可編輯下拉列表框在設(shè)計時應(yīng)該要考慮的兩個主要問題。首先，對于第一個問題，可以通過初始化的方法將listbox列表框與input文本框 重疊，并使用clip:rect方法對listbox進行顯示區(qū)域的切割，使文本框正好嵌入在列表框的邊框內(nèi);而對于第二個問題的處理相對比較容易，可以通過onchange事件觸發(fā)機制，即當用戶選定了下拉列表框的選項時，將listbox選擇的文本值填入到input文本框并進行賦值。

由于在實際中，下拉列表框的位置和大小往往是不固定的或者是可變的，因此如何精確定位控件的相對位置是設(shè)計中最大的難題。通過多次分析和實踐，本文采用了基于offsetParent、offsetTop、offsetLeft、offsetWidth和offsetHeight的基本算法來實現(xiàn)控件定位。其基本思路如下:首先讓下拉列表框作為文本框的offsetParent;其次將文本框的offsetTop、offsetLeft和offsetHeight設(shè)置為下拉列表框的offsetTop、offsetLeft和offsetHeight;最后將文本框的offsetWidth設(shè)置為下拉列表框的offsetWidth-16。即通過offset的系列運算，使文本框能較好的嵌入在下拉列表框內(nèi)并隨著下拉列表框的移動而移動。

可編輯下拉列表框的程序設(shè)計流程如圖1所示。

3 編程實現(xiàn)

3.1 功能模塊的程序設(shè)計

考慮到程序的執(zhí)行效率、通用性及跨平臺性，本文使用用戶端腳本語言Javascript來實現(xiàn)。程序中主要設(shè)計了五個功能函數(shù)，即combox(var1，var2)，init()，change()，find()以及getL(var)與getT(var)。其中，init()是最核心的功能函數(shù)，它主要是用來構(gòu)造文本框?qū)ο蠹扒懈钕吕斜砜蛴玫?而combox(var1，var2)函數(shù)是用來建立轉(zhuǎn)換下拉列表框?qū)ο蟮模╲ar1，var2兩個參數(shù)，var1表示新生成的對象變量，var2表示原下拉框的name?？删庉嬒吕斜砜虻脑敿毚a如下:

＜script language=\"javascript\"＞

/* 建立要轉(zhuǎn)換的下拉列表框?qū)ο?/

functioncombox(obj，select){

this.obj=obj;

this.name=select;

this.select=document.getElementsByName(select)[0];

}

/* 初始化對象*/

combox.prototype.init=function(){

var inputbox=\"＜input name='combox_\"+this.name+\"' onchange='\"+this.obj+\".find()' \"

inputbox+=\"style='position:absolute;width:\"+(this.select.offsetWidth-16)+\";height:\"+this.select.offsetHeight+\";left:\"+getL(this.select)+\";top:\"+getT(this.select)+\"'＞\"

document.write(inputbox)

with(this.select.style){

left=getL(this.select)

top=getT(this.select)

/*切割下拉列表框*/

position=\"absolute\"

clip=\"rect(0\"+(this.select.offsetWidth)+\" \"+this.select.offsetHeight+\"\"+(this.select.offsetWidth-18)+\")\"}

this.select.onchange=new Function(this.obj+\".change()\")

this.change()}

/*當搜索到輸入框的值時，下拉框自動定位*/

combox.prototype.find=function(){

varinputbox=document.getElementsByName(\"combox_\"+this.name)[0]

with(this.select){

for(i=0;i＜options.length;i++)

if(options[i].text.indexOf(inputbox.value)==0){

selectedIndex=i;

this.change();

break;

} } }

combox.prototype.change=function(){

/*定義下拉框的onchange事件*/

var inputbox=document.getElementsByName(\"combox_\"+this.name)[0]

inputbox.value=this.select.options[this.select.selectedIndex].text;

with(inputbox){select();focus()}; }

/*公用定位函數(shù)(獲取控件絕對坐標)*/

functiongetL(e){

varl=e.offsetLeft;

while(e=e.offsetParent) l+=e.offsetLeft;

return l}

functiongetT(e){

vart=e.offsetTop;

while(e=e.offsetParent)t+=e.offsetTop;

returnt }

＜/script＞

3.2 功能模塊的程序調(diào)用

在建立combox()和init()等功能模塊后，就可在具體的項目中建立可編輯的下拉列表框。關(guān)鍵代碼如下:

＜scriptlanguage=\"javascript\"＞

var obj_var =new combox(\"obj_var\"，\"listbox_name\") //創(chuàng)建并實例化下拉框?qū)ο?/p>

obj_var.init(); // 初始化下拉框?qū)ο?/p>

＜/script＞

可編輯下拉列表框的實現(xiàn)效果如圖2所示。

由于可編輯的下拉列表框的value其實就是自定義文本框的value值，因此可編輯的下拉列表框取值可通過提取自定義文本框的value值來實現(xiàn)，關(guān)鍵代碼如下:

document.getElementsByName('combox_ listbox_name ')[0].value)//通?？少x值給隱藏控件

4 結(jié)束語

基于Javascript的可編輯下拉列表框具有高效、美觀、方便等優(yōu)點，它支持用戶對選擇的內(nèi)容進行在線修改，也支持用戶自定義添加所需的內(nèi)容，而不僅限于固定的選擇范圍，從而可以大大地擴展了下拉列表框的基本功能與使用范圍;同時也為程序開發(fā)中解決類似的問題提供了有意的借鑒。

參考文獻:

[1] 孫豫峰.基于Java的樹型下拉列表框的實現(xiàn)[J].機械管理開發(fā)，2007，6(3).

[2] 徐杰，孟建新.基于Javascript技術(shù)的關(guān)聯(lián)表單設(shè)計和實現(xiàn)[J].現(xiàn)代電子技術(shù)，2008(2).