CSDN博客

img sanuxd

可编辑的下拉菜单

发表于2004/9/17 18:28:00  702人阅读

<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-template.tld" prefix="template" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ page contentType="text/html; charset=GBK" %>

<html:html xhtml="true" locale="true">
<head>
<title>
</title>
<html:base/>
</head>
<body onload="comboBox()">
<html:form action="comboAction.do" method="POST">
<select id="MeizzComboBoxID" name="select">
  <option>combo box</option>
  <option value="11">疏影横斜水清浅</option>
  <option value="22">暗香浮动月黄昏</option>
  <option value="33">梅须逊雪三分白</option>
  <option value="44">雪却输梅一段香</option>
  <option value="55">梅花香自苦寒来</option>
</select>
<br />
<input type="submit" value="submit"/>
</html:form>
</body>
</html:html>

<SCRIPT LANGUAGE="JavaScript"><!--
function comboBox()
{
  combox  = new MeizzComboBox();
}
function MeizzComboBox()
{ //作者: meizz(梅花雪) meizz@hzcnc.com
  this.object   = getObjectById("MeizzComboBoxID");
  this.input    = document.createElement("input");
  this.div      = document.createElement("div");
  document.body.appendChild(this.input);
  document.body.appendChild(this.div);
  this.SS       = this.object.style;
  this.IS       = this.input.style;
  this.DS       = this.div.style;

  this.IS.fontSize  = this.SS.fontSize  = this.DS.fontSize  = "12px";
  this.IS.position  = this.SS.position  = this.DS.position  = "absolute";
  this.top          = getObjectTop(this.object);
  this.left         = getObjectLeft(this.object);
  this.width        = this.object.clientWidth;
  this.height       = this.object.clientHeight;
  this.DS.border    = "1px solid #000000";
  this.DS.display   = "none";
  this.DS.color     = "#000000";
  this.DS.overflow  = "auto";
  this.DS.overflowX = "hidden";
  this.DS.padding   = "2 0 8 0";
  this.IS.cursor    = "default";
  this.IS.borderRight = "0px";
  this.DS.backgroundColor = "#FFFFFF";

  this.IS.top       = this.top;
  this.DS.top       = this.top + this.height;
  this.IS.left      = this.DS.left = this.left;
  this.IS.width     = this.width-18;
  this.DS.width     = this.width;
  this.SS.clip      = "rect(0 "+ this.width +" "+ this.height +" "+ this.IS.width +")";

  this.inputIndex   = this.object.selectedIndex;
  this.input.value  = this.object.options[this.object.selectedIndex].text;
  this.inputValue   = this.object.options[this.object.selectedIndex].value;

  this.candidateValue   = "";    //候选条目的选中项的 value
  this.candidateText    = "";    //候选条目的选中项的 text
  this.candidateFocus   = null;  //候选项的当前焦点项
  this.divIndex         = -1;    //候选项的当前焦点项的索引值
  this.clientInput      = "";    //该变量用来记录用户的输入内容
  this.candidateSelect  = false; //判断当前是否正在选择候选
  this.candidateHeight  = 118;   //候选条显示的高度值

  this.object.onchange  = comboxSelectChange;
  this.object.onclick   = comboxSelectChange;
  this.input.onblur     = comboxInputBlur;
  this.input.onkeydown  = comboxInputKeyDown;
  this.div.onscroll     = comboxDivScrolling;
  this.div.onmousedown  = comboxDivScrolling;
  this.div.onblur       = comboxDivHidden;
} var combox;
function comboxDivScrolling(){combox.candidateSelect= true;}
function String.prototype.Trim() {return this.replace(/(^/s*)|(/s*$)/g,"");}
function getObjectById(id)
{
  if (arguments.length == 0) return null;
  /*@cc_on @*/ /*@if (@_jscript_version>=3) return document.all(id); @end @*/
  try{return document.getElementById(id);}
  catch(e){return eval(id);}
}
function getObjectLeft(e)
{
   var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;
}
function getObjectTop(e)
{
   var t=e.offsetTop;  while(e=e.offsetParent) t += e.offsetTop;  return t;
}
function setComboxClip()
{
  combox.width    = combox.object.clientWidth;
  combox.IS.width = combox.width-18;
  combox.DS.width = combox.width;
  combox.SS.clip  = "rect(0 "+ combox.width +" "+ combox.height +" "+ combox.IS.width +")";
  combox.SS.left  = combox.left + 1; //这个变态 select 的 clip 属性, 一定要 select 重载才发生作用
  setTimeout("combox.SS.left  = combox.left;");
}
function comboxSelectChange()
{
  combox.inputIndex   = combox.object.selectedIndex;
  combox.input.value  = combox.object.options[combox.object.selectedIndex].text;
  combox.inputValue   = combox.object.options[combox.object.selectedIndex].value;
  combox.input.select();
}
function comboxInputBlur()
{
  var a = combox.object.options, bb=true;
  for(var i=0; i<a.length; i++)
  {
    if(combox.input.value.Trim() == a[i].text){bb = false; break;}
  }
  if(combox.input.value.Trim() != "" && bb && !combox.candidateSelect)
  {
    combox.inputValue = combox.clientInput;
    combox.inputIndex = a.length;
    a.add(new Option(combox.clientInput, combox.clientInput));
    combox.object.options[combox.inputIndex].selected = true;
    setTimeout("setComboxClip()");
  }
  if(!combox.candidateSelect) comboxDivHidden();
}
function comboxDivMouseover(obj)
{
  var e = obj ? obj : window.event.srcElement;
  e.style.background = "highlight";
  e.style.color      = "highlighttext";
  combox.candidateSelect= true;
  for(var i=0; i<combox.div.children.length; i++)
  if(combox.div.children[i] == e) combox.divIndex = i;
  combox.candidateFocus = e;
  combox.inputIndex     = parseInt(e.id.substr(17));
  combox.candidateText  = combox.object.options[combox.inputIndex].text;
  combox.candidateValue = combox.object.options[combox.inputIndex].value;
}
function comboxDivMouseout(obj)
{
  var e = obj ? obj : window.event.srcElement;
  e.style.background = "#FFFFFF";
  e.style.color      = "#000000";
  combox.candidateSelect  = false;
  combox.candidateFocus   = null;
  combox.candidateValue   = "";
  combox.candidateText    = "";
}
function comboxDivClick()
{
  if(combox.candidateSelect)
  {
    combox.input.value = combox.candidateText;
    combox.inputValue  = combox.candidateValue;
    combox.object.options[combox.inputIndex].selected = true;
    combox.input.select();
    comboxDivHidden();
  }
}
function comboxDivHidden()
{
  for(var i=combox.div.children.length-1; i>=0; i--)
  combox.div.removeChild(combox.div.children[i]);
  combox.candidateSelect  = false;
  combox.candidateFocus   = null;
  combox.candidateValue   = "";
  combox.candidateText    = "";
  combox.divIndex         = -1;
  combox.DS.height        = 0;
  combox.DS.display       = "none";
}
function comboxInputKeyDown()
{
  switch(window.event.keyCode)
  {
    case 40 : comboxDivArrow(40); break;
    case 38 : comboxDivArrow(38); break;
    case 13 : comboxDivClick(combox.candidateFocus); break;
    default : setTimeout("combox.clientInput=combox.input.value; comboxDivChildren()"); break;
  }
}
function comboxDivChildren()
{
  var s = combox.input.value, d = null, a = combox.object.options;
  var divstyle = "font-size: 12px; padding: 2 1 0 2; color: #000000; cursor: default";
  var sameness = false;
  comboxDivHidden();
  if(s != "")
  {
    for(var i=0; i<a.length; i++)
    {
      if(a[i].text.Trim().indexOf(s) == 0)
      {
        if(a[i].text.Trim() == s) sameness = true;

        d = document.createElement("div");
        d.style.cssText = divstyle;
        d.id            = "comboxDivChildren"+ i;
        d.innerText     = a[i].text;
        d.onclick       = comboxDivClick;
        d.onmouseover   = comboxDivMouseover;
        d.onmouseout    = comboxDivMouseout;
        combox.div.appendChild(d);
        d = null;
      }
    }
    if(combox.div.children.length > 0 && !(sameness && combox.div.children.length==1))
    combox.DS.display = "";
    if(combox.div.clientHeight > combox.candidateHeight) combox.DS.height = combox.candidateHeight;
  }
}
function comboxDivArrow(num)
{
  var a = combox.div.children;
  if(a.length == 0) return;
  if(combox.candidateFocus != null) comboxDivMouseout(combox.candidateFocus);
  if(num == 40) //住下翻选候选项
  {
    if(combox.divIndex < 0) combox.divIndex = 0;
    else if(combox.divIndex == (a.length-1))
    {
      combox.input.value = combox.clientInput;
      combox.divIndex = -1;
    }
    else combox.divIndex++;
  }
  else
  {
    if(combox.divIndex < 0) combox.divIndex = a.length-1;
    else if(combox.divIndex == 0)
    {
      combox.input.value = combox.clientInput;
      combox.divIndex = -1;
    }
    else combox.divIndex--;
  }
  if(combox.divIndex >= 0)
  {
    combox.candidateSelect  = true;
    combox.candidateFocus   = a[combox.divIndex];
    combox.inputIndex  = parseInt(combox.candidateFocus.id.substr(17));
    combox.input.value = combox.candidateText  = combox.object.options[combox.inputIndex].text;
    combox.inputValue  = combox.object.options[combox.inputIndex].value;
    combox.candidateFocus.style.background = "highlight";
    combox.candidateFocus.style.color      = "highlighttext";
  }
}
//-->
</SCRIPT>

0 0

相关博文

我的热门文章

img
取 消
img