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;
下篇将介绍如何在该页面中加入Ajax功能。