input 박스 focus 시 바로 아래 div 보이게 하기
2015. 3. 24. 12:33ㆍIT/Jquery Plugin/Tip
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script>
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<body topmargin="0" leftmargin="0" >
.example{
background: gray;
}
</style>
<p>
<label for="example">Text:</label>
<input id="example" name="example" type="text" maxlength="100" />
<div class="example">
Some text...<br /><input type="checkbox" name="foobar" value="1" /><br />More text...
</div>
</p>
<p>
<label for="example2">Text2:</label>
<input id="example2" name="example2" type="text" maxlength="100" />
</p>
<script>
$(document).ready(function() {
var fieldExample = $('#example');
$('div.example').css({
"position":"absolute",
"left": fieldExample.offset().left,
"top": fieldExample.offset().top + fieldExample.outerHeight()
});
fieldExample.focus(function() {
var div = $('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, #example').length) return;
$(document).unbind('.example');
div.fadeOut('medium');
});
});
$('div.example').hide();
});
</script>
</body>
</html>
'IT > Jquery Plugin/Tip' 카테고리의 다른 글
| jquery tr 동적생성(clone) (0) | 2015.03.24 |
|---|---|
| jquery, ul, li listnum 주기 (선택되어져보이기) (0) | 2015.03.24 |
| jquery radio 버튼 설정 (0) | 2015.03.24 |
| select box 선택되어져보이는 Jquery 소스 (0) | 2015.03.24 |
| Jquery textarea Selector (0) | 2015.03.24 |