快捷導(dǎo)航

使用Jquery來(lái)實(shí)現(xiàn)可以輸入值的下拉選單雛型

更新時(shí)間：2011年12月06日 01:26:27 作者：

最近案子中，需要使用下拉選單，但問(wèn)題是，里面選項(xiàng)都會(huì)有各其他：，然後可以讓 user 在輸入

上網(wǎng) 找了一下，有一堆現(xiàn)成的控件，可是現(xiàn)成的我要去了解，來(lái)結(jié)合我現(xiàn)在系統(tǒng)來(lái)應(yīng)用，要花不少時(shí)間，這個(gè)時(shí)間跟我自己搞一個(gè)成本應(yīng)該差不多
那我還不如自己搞一個(gè)，比較能了解怎麼運(yùn)作，後面就更容易加以運(yùn)用了。
我的目標(biāo)是，要把這個(gè) 作成一個(gè)控件來(lái)使用，并要降低外部程式使用的耦合性，也就是外部程式使用上所需的必要條件要盡量減少，免得一忘記加什麼設(shè)定，程式就掛了。
如有可能甚至希望，只會(huì)需要引用一個(gè) Jquery 其他 JavaSciprt 都由程式來(lái)產(chǎn)生。
最後是希望能結(jié)合之前講得動(dòng)態(tài)控件來(lái)使用，今天我就先研究一下，用出了下面這個(gè) html 做的雛型，來(lái)先行測(cè)試一下可行性，確認(rèn)無(wú)誤在開(kāi)始動(dòng)工改成 ASP.NET 的控件。
這程式有幾個(gè) 重要問(wèn)題，需要注意的：
下拉選單的觸發(fā)方式、下拉選單的內(nèi)容如何繪出，選單事件觸發(fā)的抓取、抓取到選擇事件後值要存在哪里
上述問(wèn)題解決後，後面都要用 ASP.NET 的方式來(lái)重新撰寫(xiě)，所以在設(shè)計(jì)雛型時(shí)，需注意其能否應(yīng)用在 ASP.NET 上
構(gòu)思如下：
這我的打算就是設(shè)計(jì)一個(gè) button 藉由其 OnClick 事件來(lái)觸發(fā)，到時(shí)會(huì)由 JQuery 抓取 ASP.NET 動(dòng)態(tài)產(chǎn)生的選單陣列，來(lái)動(dòng)態(tài)產(chǎn)生選單，
產(chǎn)生的選單，要能設(shè)定三各事件 mouseover mouseout click，前兩各是為了美觀，這樣 user 才知道有在動(dòng)作，click 事件觸發(fā)後，
將選取到的值儲(chǔ)存到 asp.net 的 server 控件 TextBox 中，如此在 PostBack 就能把值傳回 server 端來(lái)處理。

復(fù)制代碼代碼如下:

 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> 
<title>使用 Jquery 來(lái)實(shí)現(xiàn)可以輸入值的下拉選單（一）</title> 
<script type="text/javascript"> 
$(document).ready(function () { 
//動(dòng)畫(huà)速度 
var speed = 500; 
//選單的相關(guān)處理事件 
$("#divPop div").live("mouseover mouseout click", function (event) { 
if (event.type == "mouseover") { 
//$(this).addClass(‘highlight'); 
$(this)[0].style.backgroundColor = '#E6F5FA'; 
} 
if (event.type == "mouseout") { 
//$(this).removeClass("highlight"); 
$(this)[0].style.backgroundColor = '#DDFFDD'; 
} 
if (event.type == "click") { 
var inID = $("#btnDDL").get(0).getAttribute("inputid"); 
//alert($(this).html()); 
$("#" + inID).val($(this).html()); 
} 
}); 
//動(dòng)態(tài)產(chǎn)生下拉選單的選項(xiàng)，後面 要從 array 中讀取產(chǎn)生選單 
$("#divPop").append("<div>test1</div>"); 
$("#divPop").append("<div>test2</div>"); 
//綁定事件處理 
$("#btnDDL").click(function (event) { 
//取消事件冒泡 
event.stopPropagation(); 
//設(shè)置彈出層位置 
var offset = $(event.target).offset(); 
//alert($(event.target).width()); 
var inID = $(this).get(0).getAttribute("inputid"); 
//依據(jù) input 跟 button 寬度來(lái)設(shè)定 下拉選單的寬度 
$("#divPop")[0].style.width = ($("#" + inID).width() + $(this).width() + 10) + "px"; 
//單擊空白區(qū)域隱藏彈出層 
$(document).click(function (event) { $("#divPop").hide(speed) }); 
//設(shè)定下拉選單顯示的位置 
$("#divPop").css({ top: offset.top + $(event.target).height() + 10 + "px", left: offset.right }); 
//切換彈出層的顯示狀態(tài) 
$("#divPop").toggle(speed); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<br /><br /><br /> 
<input name="txtKey" type="text" maxlength="30" size="30" id="txtKey" style="Padding:2px;" /><button id="btnDDL" inputid="txtKey" >▼</button> 
</div> 
<!-- 彈出層 --> 
<div id="divPop" style="background-color: #DDFFDD; border: solid 1px #000000; position: absolute; display:none; 
width: 300px; height: 100px;"> 
</div> 
</body> 
</html> 