用HTC来实现列表提示框

转载 2006年06月22日 23:09:00
relaxlife.net收藏:用HTC来实现列表提示框   [ 日期:2005-05-16 ]   [ 来自: ] [作者:cexo255]

用HTC来实现列表提示框
[日期:2004-12-11] 来源:csdn  作者: [字体:大 中 小]  

演示

定义
tipSrc          数据源 (XML文件) 
tipLen          列表框长度 (数字)
inputCase    大小写 ("upper"或者"lower")

示例
<input type="text" name="textfield" style="behavior:url('htc/tip.htc')" tipSrc="vslnm.php" tipLen="15" inputCase="upper">

HTC文件
<!-- ---------------------------------------------------------------------
//
//  File:  tip.htc
//  version:    1.0
//  Description:下拉列表提示.
//  author:     伍维波
//
//------------------------------------------------------------------------>
<PUBLIC:COMPONENT id="tip" urn="wwb:tip"> 
<PUBLIC:PROPERTY name="tipSrc" />                             //数据源,XML文件
<PUBLIC:PROPERTY name="tipLen" />                             //列表框长度 
<PUBLIC:PROPERTY name="inputCase" />                        //大小写
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="init()" />  
<PUBLIC:ATTACH EVENT="onkeydown" ONEVENT="enterTip()" />
<PUBLIC:ATTACH EVENT="onkeyup" ONEVENT="showTip()" />
<script language="JavaScript">

var list=new Array(); //数据列表
var oInput;           //目标对象
var oSelect;          //列表框对象
var oDiv;             //定位对象

/***初始化***/
function init()
{
 loadData();
 
 //alert(element.name);
 ele=element;
 oInput=ele;
 oDiv=document.createElement("DIV");
 var top = ele.offsetTop;
    var left = ele.offsetLeft;
    var width = ele.offsetWidth;
    var height = ele.offsetHeight;
    while(ele = ele.offsetParent)
    {
       top  += ele.offsetTop;
       left += ele.offsetLeft;
    }
 top = top + height;
 oDiv.style.position="absolute";
 //alert(left+"="+top);
 oDiv.style.left=left;
 oDiv.style.top=top;
 oDiv.style.visibility="hidden";
 //alert(left);
 //alert(top);
 oSelect=document.createElement("SELECT");
 if(tipSrc!=null&&tipSrc!="")
 { 
   oSelect.size=tipLen;
 }
 else
 {
   oSelect.size=10;
 }
 oSelect.onchange=function()
 {
  oInput.value=this.value;
 }
 oSelect.attachEvent("onkeydown",changeTip);
 oSelect.attachEvent("onclick",selectTip);
 oInput.insertAdjacentElement( "AfterEnd", oDiv);
 oDiv.insertAdjacentElement("AfterBegin",oSelect); 
 return true;
}
/***装载数据***/
function loadData()
{
 if(tipSrc!=null&&tipSrc!="")
 {
  var xmldom = new ActiveXObject('Microsoft.XMLDOM');
  xmldom.async = false;
  //alert(tipSrc);
  xmldom.load(tipSrc);
  root = xmldom.documentElement;
  temp=root.selectNodes("//OPTION");

  for(var i=0;i<temp.length;i++)
  {
   list
 = temp.text;
  }
  return true;
 }
 else
  return false;
}
/***显示列表提示框***/
function showTip()
{
 //alert("KEYUP");
 event.cancelBubble=true;
 ele=event.srcElement;
 if(inputCase!=null&&inputCase=="upper")
  oInput.value = oInput.value.toUpperCase();
 else if(inputCase!=null&&inputCase=="lower")
  oInput.value = oInput.value.toLowerCase();  
 input=ele.value;
 if(input==oSelect.value)
 {
  hideTip();
  return true;
 }
 clear();
 
 for(i=0;i<list.length;i++)
 { 
     if(list
.indexOf(input)==0) 
  {
         oSelect.add(new Option(list
,list));
  }
 }
 /*
 for(var i=0;i<list.length;i++)
 {
  var oOption=document.createElement("OPTION");
  oOption.text = list
;
  oSelect.options.add(oOption);
 }
 */
 //ele.insertAdjacentElement( "AfterEnd", oDiv);
 //oDiv.insertAdjacentElement("AfterBegin",oSelect);
 oDiv.style.visibility="visible";
 oSelect.selectedIndex=0;
 return true;
}
/***按键操作***/
function enterTip()
{
 //alert("KEYDOWN");
 //alert(oInput);
 kc=event.keyCode;
    if(oDiv.style.visibility!="hidden")
 {
     if(kc==13) 
  {
   selectTip();
     }
  else if(kc==40) 
  {
      oSelect.focus();
     }
 }
}
/***改变列表项***/
function changeTip()
{
 kc=event.keyCode;
    if(oDiv.style.visibility!="hidden")
 {
     if(kc==13) 
  {
   selectTip();
     }
  if(kc==40) 
  {
      oInput.value=oSelect.value;
     }
 }
}
/***选择列表项***/
function selectTip()
{
    oInput.value=oSelect.value;
 oInput.focus();
 hideTip();
}
/***隐藏列表提示框***/
function hideTip()
{
 oDiv.style.visibility = "hidden";
}
/***删除列表项***/
function clear()
{
 for(var i=oSelect.options.length-1;i>=0;i--)
 {
  oSelect.options.remove(i)
 }
}
</script>
</PUBLIC:COMPONENT> 

数据源
XML文件的格式如下
<?xml version="1.0" encoding="GB2312"?>
<LIST>
  <OPTION>208</OPTION>
  <OPTION>207</OPTION>
  <OPTION>206</OPTION>
  <OPTION>205</OPTION>
  <OPTION>204</OPTION>
  <OPTION>203</OPTION>
  <OPTION>202</OPTION>
  <OPTION>201</OPTION>
  <OPTION>200</OPTION>
  <OPTION>199</OPTION>
</LIST>

也可以用PHP来生成XML的示例
<?php 
header("Content-type: text/xml"); 
echo '<?xml version="1.0" encoding="GB2312"?>';
require_once("../lib/quotation.php");
$Quotation=new Quotation();
$Str=$Quotation->createVslNm();
echo $Str;
?>

unity 通过使用 photon networking Pun 实现 HTC Vive VR的多人联网

正文: 基于photon networking 来实现 VR 的多人联网。我之前文章将的是如何使用unity 自带的网络组件来实现VR多人联网。但是unet 他的问题是只能实现局域网联网。广域网...
  • m0_37283423
  • m0_37283423
  • 2017年09月18日 08:54
  • 748

基于 OSG OpenSceneGraph HTC Vive 的实现

基于OSG(OpenSceneGraph)的HTC VIVE 交互实现
  • zhuyingqingfen
  • zhuyingqingfen
  • 2016年04月21日 15:59
  • 3342

用嵌套列表表示的二叉树的相关操作

#coding:utf-8 __author__ = 'lv' tree = ["a",["b",["d",[],[]],["e",[],[]]],["c",["f",[],[]],["g",[],[...
  • lixingdefengzi
  • lixingdefengzi
  • 2017年03月15日 20:53
  • 560

用抛物线的点实现HTC Vive瞬移系统

这个是针对HTC Vive和引擎简单易用的瞬移系统。这个系统是模仿Valve的Vive游戏“The Lab”而作,即玩家可以穿过比游戏区域大的VR环境。下图可以看到对于系统的演示: ...
  • zhaokuo_123456
  • zhaokuo_123456
  • 2016年12月16日 15:12
  • 679

HTC vive基于unity的凝视交互功能(带HTC 插件)

我现在拥有的 HTC 插件  1.SteamVR 2.VRTK - SteamVR Unity Toolkit 3.HTCUnity 链接:http://pan.baidu.com/s/1mhSt8...
  • DotnOn
  • DotnOn
  • 2016年12月23日 11:54
  • 1005

CSS 菜单系列:用 UL 制作横向导航菜单-入门版

用 UL 制作菜单现在非常流行,那我们也凑凑热闹,第一讲就说说用 UL 制作导航菜单的方法,这一讲是入门版,只是实现基本功能,欢迎各位发布自己的实现方式。我们先定一下 HTML 代码:CodeBit....
  • fanyuna
  • fanyuna
  • 2010年04月17日 17:49
  • 1785

HTC Vive实现开关门(VRTK版)

开关门这类操作在Htc Vive中是常用的操作,其中使用动画实现功能是最直接方便的,今天给大家分享下用Joint实现开关门的方法。 看完这篇文章相信对所有绕轴旋转的操作问题,你都可以解决。 废话不多说...
  • zheenyuan
  • zheenyuan
  • 2017年01月19日 09:57
  • 1068

列表导航栏----浮动提示框

话不多说,上图看效果如下: 下面看下前端的代码:
  • tianjun2012
  • tianjun2012
  • 2015年12月09日 22:28
  • 705

什么是HTC文件

在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML(动态 HEML)的网页编程者。他们只能不断地重复...
  • shineHoo
  • shineHoo
  • 2010年04月12日 09:27
  • 1155

HTC手机傻瓜式安装Google Play服务

在天朝恶劣的软件环境下,一直想体验Google Play的干净清爽,无奈本人的HTC One E8 (Android5.0.2)即使解锁后也无法完美Root.(网上的教程基本都试过了)后来偶然逛论坛发...
  • Andy_Frank
  • Andy_Frank
  • 2016年02月21日 10:57
  • 1095
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用HTC来实现列表提示框
举报原因:
原因补充:

(最多只允许输入30个字)