Giới thiệu
Khi có nhu cầu lựa chọn nhiều giá trị, tương tác giao diện người dùng - điều khiển có một tính năng tự động đóng và trông như nhiều select dropdown.
Điều khiển này cho phép người dùng chọn nhiều giá trị thông qua dropdown.
Nền
Chúng ta cần phải cung cấp một lựa chọn chọn nhiều trong dự án của chúng tôi thời gian gần đây. Đối với multiple select, ASP.NET cung cấp CheckBoxList có khá nhiều không gian và luôn luôn phù hợp với các yêu cầu giao diện người dùng. Trong giao diện người dùng của chúng ta, yêu cầu sử dụng tính năng dropdown có thể chọn nhiều giá trị.
Sử dụng Mã
<div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);"
onmouseout="timoutID = setTimeout('HideMList()', 750);">
<table>
<tr>
<td align="right" class="DropDownLook">
<input id="txtSelectedMLValues" type="text" readonly="readonly"
onclick="ShowMList()" style="width:229px;" runat="server" />
</td>
<td align="left" class="DropDownLook">
<img id="imgShowHide" runat="server" src="drop.gif"
onclick="ShowMList()" align="left" />
</td>
</tr>
<tr>
<td colspan="2" class="DropDownLook">
<div>
<div runat="server" id="divCheckBoxListClose" class="DivClose">
<label runat="server" onclick="HideMList();"
class="LabelClose" id="lblClose"> x</label>
</div>
<div runat="server" id="divCheckBoxList" class="DivCheckBoxList">
<asp:CheckBoxList ID="lstMultipleValues" runat="server"
Width="250px" CssClass="CheckBoxList"></asp:CheckBoxList>
</div>
</div>
</td>
</tr>
</table>
</div>
CSS rất quan trọng để nó trông như đang thả xuống:
.DivClose
{
display:none;
position:absolute;
width:250px;
height:220px;
border-style:solid;
border-color:Gray;
border-width:1px;
background-color:#99A479;
}
.LabelClose
{
vertical-align:text-top;
position:absolute;
bottom:0px;
font-family:Verdana;
}
.DivCheckBoxList
{
display:none;
background-color:White;
width:250px;
position:absolute;
height:200px;
overflow-y:auto;
overflow-x:hidden;
border-style:solid;
border-color:Gray;
border-width:1px;
}
.CheckBoxList
{
position:relative;
width:250px;
height:10px;
overflow:scroll;
font-size:small;
}
Một lệnh gọi sự kiện javascript
// Append an event to the checkboxes in the list
lstMultipleValues.Attributes.Add("onclick", "FindSelectedItems
(this," + txtSelectedMLValues.ClientID + ");");Sử dụng JavaScript, chúng ta theo dõi những gì được chọn trong danh sách. Hơn nữa, mở và đóng của div -yếu tố này được xử lý thông qua JavaScipts sử dụng sự kiện onMouseOver , onMouseOut.
<script type="text/javascript">
var timoutID;
//This function shows the checkboxlist
function ShowMList()
{
var divRef = document.getElementById("divCheckBoxList");
divRef.style.display = "block";
var divRefC = document.getElementById("divCheckBoxListClose");
divRefC.style.display = "block";
}
//This function hides the checkboxlist
function HideMList()
{
document.getElementById("divCheckBoxList").style.display = "none";
document.getElementById("divCheckBoxListClose").style.display = "none";
}
//This function finds the checkboxes selected in the list and using them,
//it shows the selected items text in the textbox (comma separated)
function FindSelectedItems(sender,textBoxID)
{
var cblstTable = document.getElementById(sender.id);
var checkBoxPrefix = sender.id + "_";
var noOfOptions = cblstTable.rows.length;
var selectedText = "";
for(i=0; i < noOfOptions ; ++i)
{
if(document.getElementById(checkBoxPrefix+i).checked)
{
if(selectedText == "")
selectedText = document.getElementById
(checkBoxPrefix+i).parentNode.innerText;
else
selectedText = selectedText + "," +
document.getElementById(checkBoxPrefix+i).parentNode.innerText;
}
}
document.getElementById(textBoxID.id).value = selectedText;
}
</script>Sự kiện phía điều khiển Client được sử dụng theo cách như vậy miễn là chúng ta có mouse hover trên điều khiển (hoặc hộp thả xuống hoặc CheckBoxList hoặc scroll) danh sách mở ra. Khi con chuột rời khỏi điều khiển, sau một thời gian nhất định (cấu hình), nó sẽ bị sụp tự động. Để thêm sự linh hoạt hơn cho người sử dụng, một lựa chọn gần cũng được cung cấp ở dưới cùng của điều khiển. Các nhà phát triển có thể tinh chỉnh điều khiển theo yêu cầu của họ.