div居中、层定位、类google输入提示示例,在线qq查询,自动刷新

一个类google搜索框输入提示功能的示例代码,采用层定位,居中对齐,input 的输入改变、失去焦点、获得焦点事件......解决了onblur和onclick同时被调用的失效问题。
div居中、层定位、类google输入提示示例,在线qq查询,自动刷新_第1张图片
testGoogle.htm
<html>
<head>
<style type="text/css">
body{text-align:center;}
.ttStyle{border:dotted 1px green; width:180px;}
.top{margin:0 auto;width:760px;text-align:left;}
.mStyle{border:solid 1px #f2cccc;width:760px;height:400px;POSITION:absolute;text-align:left;}
.layStyle{border:solid 1px #cccccc;width:180px;height:200px;background-color:#eeeeee;POSITION:absolute;left:48px;top:22px;display:none;}
.sitem{width:100%;}
</style>
<script language="javascript">
var k=0;
function change(obj)
{
 var str=loadData(obj);
 document.getElementById("slayout").innerHTML="<div id='vv' class='sitem' Is</div>"+str;
}
function loadData(obj)
{
 // Ajax to load datas from server ...
 return "<div id='vv' class='sitem' onclick='sltValue(this)'>"+obj.value+"</div><div id='vv' class='sitem' onclick='sltValue(this)'>"+(k++)+"</div>";
}
function sopen(obj)
{
 document.getElementById("slayout").style.display="block";
}
function sclose(obj)
{
 if(document.activeElement.id=="vv") return false; // avoid onblur and onclick error
 document.getElementById("slayout").style.display="none";
}
function showbg(obj)
{
 obj.style.backgroundColor="green";
}
function hiddenbg(obj)
{
 obj.style.backgroundColor="#ffffff";
}
function sltValue(obj)
{
 document.getElementById("tt").value=obj.innerHTML;
 document.getElementById("slayout").style.display="none";
}
</script>
</head>
<body>
<br>
<div id="top" class="top">
<div id="main" class="mStyle">
Test:
<input id="tt" type="text" class="ttStyle" onfocus="sopen(this)" oninput="change(this)" onpropertychange="change(this)" onblur="sclose(this)">
<br>
<div id="slayout" class="layStyle"></div>
</div>
</div>
</body></html>
 
qq在线查询代码,隔15秒自动刷新一次:
qq.htm:
<html>
<meta http-equiv="refresh" content="15">
<head>
</head>
<body>
QQ-10000:<img src="
http://wpa.qq.com/pa?p=1:10000:5"><br>
</body>
</html>
 
 

你可能感兴趣的:(JavaScript,css,div居中,层定位,类google)