|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
<!--
#apDiv1 {
border:1px solid red;
width:100px;
height:77px;
text-align:center;
padding:6px;
background-color:#FCC;
position:absolute;
z-index:99;
display:none; /*使div初始化時(shí)隱藏*/
}
input {
border:1px solid; /*注意這里的border寬度，后面要根據(jù)這個(gè)值額外增加div的left值*/
}
-->
</style>
<script type="application/javascript" src="js/jquery.js"></script>
<script type="application/javascript">
<!--
//dom加載完成時(shí)執(zhí)行
$(function(){
//input獲取焦點(diǎn)時(shí)在其旁邊顯示div
$('input').focus().click(function(){
var input = $(this);
var offset = input.offset();
//先后設(shè)置div的內(nèi)容、位置，最后顯示出來(lái)（漸進(jìn)效果）
$('#apDiv1').text(input.attr('name'))
.css('left',offset.left + input.width() + 2 + 'px')
.css('top',offset.top + 'px')
.fadeIn();
});
//input失去焦點(diǎn)時(shí)隱藏div
$('input').blur(function(){
$('#apDiv1').css('display','none');
});
});
//-->
</script>
</head>
<body>
<div id="apDiv1"></div>
<table width="200" border="0" cellspacing="1" cellpadding="3">
<tr>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
</table>
</body>
</html>
|
