JSF自定义组件之一 HTML原型

Web开发中经常遇到一些资料量较大的下拉框，这些下拉框会大大增加服务器发挥Response的容量，而有时用户甚至根本不需要用到这些下拉框，这样就严重影响了页面加载的性能，于是构思开发一个通过AJAX技术，在用户点击下拉框时才加载所需数据的组件，从而减少不必要的性能损失。

　　本篇首先使用HTML实现该组件的功能，以便为后面Renderer JSF组件是提供一个雏形。

因为要捕捉点击下拉框事件，加载数据，所以很明显，HTML所提供的Select控件，无法直接实现我们的目的，因为Select控件不支持下拉按钮的点击事件，并且无法用代码直接打开下拉列表，因此大致的构思是用一个文本框和层实现该功能，生成效果如下：

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drop down list</title>
<link rel="stylesheet" type="text/CSS" href="dropdownliststyle.css">
<script type="text/JAVASCRIPT" src="dropdownlistscript.js"></script>
</head>
<body>
<input type="text" id="DROPDOWN1_INPUT" name="DROPDOWN1_INPUT"
class="dropdown_input">
<img src="" class="dropdown_button" id="DROPDOWN1_IMG"
name="DROPDOWN1_IMG" onclick="showSelector();">
<br>
<div id="DROPDOWN1_AREA" class="dropdown_area"><select
id="DROPDOWN1_SELECTOR" name="DROPDOWN1_SELECTOR" multiple="multiple"
class="dropdown_selector" onchange="giveValue();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select></div>
</body>
</html>
CSS代码如下：

@CHARSET "UTF-8";

.dropdown_button{
margin-left: -20px;
width: 15px;
height: 15px;
}

.dropdown_area{
position: absolute;
width: 200px;
height: 200px;
margin-top: -3px;
display: none;
overflow: auto;
}

.dropdown_input{
width: 200px;
}

.dropdown_selector{
width: 200px;
height: 200px;
}
javascript代码如下：

function showSelector() {
var ea = document.getElementById("DROPDOWN1_AREA");
var input = document.getElementById("DROPDOWN1_INPUT");

ea.style.top = (input.style.top + 40);
ea.style.left = input.style.left;
ea.style.display = "block";
event.cancelBubble = true;
}

function revertValue() {
hiddenLayer();
}

function giveValue() {
document.getElementById("DROPDOWN1_INPUT").value = document
.getElementById("DROPDOWN1_SELECTOR").options[document
.getElementById("DROPDOWN1_SELECTOR").options.selectedIndex].value;
}

function hiddenLayer() {
document.getElementById("DROPDOWN1_AREA").style.display = "none";
}

document.onmouseup = revertValue;