JSF自定义组件之一 HTML原型

最新推荐文章于 2016-07-10 09:58:22 发布

张_锋

最新推荐文章于 2016-07-10 09:58:22 发布

阅读量2.3k

点赞数

分类专栏：网页设计 Java开发 Web开发 Java模式文章标签： html jsf dropdown input stylesheet class

本文链接：https://blog.csdn.net/sunshinestation/article/details/2845954

版权

Java开发同时被 3 个专栏收录

62 篇文章 0 订阅

订阅专栏

Web开发

46 篇文章 0 订阅

订阅专栏

Java模式

29 篇文章 0 订阅

订阅专栏

首先介绍一下准备开发该组件的原因：

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;
 
      