jQuery 선택 리스트 박스 (Family Site)
2021. 12. 8. 12:24ㆍStudy/jQuery
접근성을 고려한 스크립도 같이 넣어줘야 한다.
＊ jQuery 노드(DOM) 에 관련된 메소드를 알아야 한다.
＊ focus, blur 이벤트는 a태그에만 사용 가능하다
CSS
*{margin:0; padding:0;}
ul{ list-style:none;}
a{ color:#333; text-decoration:none}
.select{position:relative; width:200px; height:40px; border:1px solid #ccc; background:url(plus.jpg) 95% 50% no-repeat #fff; margin:50px}
.select .arrow{ display:block; height: 40px; line-height: 40px; padding-left:20px;}
.select .arrow:hover{color:#666;}
.select .aList{ position:absolute; top:40px; left:-1px; width:200px; border:1px solid #ccc; display:none}
.select .aList li{ line-height:1.5em; border-bottom:1px solid #ccc;}
.select .aList li a{display:block; height: 40px; line-height: 40px; padding-left:20px}
.select .aList li a:hover{ background:#F0F0F0; color:#666}
JS
$(document).ready(function() {
// // click EVENT
// $('.select .arrow').click(function(){
// $('.select .aList').slideDown('slow'); // show(), slideDown(), fadeIn()
// });
// $('.select').mouseleave(function(){ // 마우스가 떠날때
// $('.select .aList').fadeOut('slow'); // hide(), slideUp(); fadeOut();
// });
// // toggle
// $('.select .arrow').toggle(function(){
// $('.select .aList').slideDown('slow');
// }, function(){
// $('.select .aList').slideUp('slow');
// });
// toggle
$('.select .arrow').hover(function(){
$('.select .aList').stop().slideDown('slow'); // hover 사용 시 stop 메소드 사용
}, function(){
$('.select .aList').stop().slideUp('slow'); // hover 사용 시 stop 메소드 사용
});
// clearQueue 는 animate에서 주로 사용한다.
// //★ 접근성을 위한 tab키 처리 (bind 사용) ★
// $('.select .arrow').bind('focus', function () {
// $('.select .aList').slideDown('slow');
// });
// $('.select .aList li:last').find('a').bind('blur', function () {
// $('.select .aList').hide();
// });
// // ★ 접근성을 위한 tab키 처리 ★
// $('.select .arrow').focus(function(){
// $('.select .aList').slideDown('slow');
// });
// $('.select .aList li:last a').blur(function(){
// $('.select .aList').hide();
// });
// ★ 접근성을 위한 tab키 처리 ★
$('.select .arrow').on('focus', function(){ // focus는 a태그만 받을 수 있다
$('.select .aList').slideDown('slow');
});
$('.select .aList li:last').find('a').on('blur', function(){ // blur : focus를 잃을 때
$('.select .aList').hide();
});
});
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select</title>
<link rel="stylesheet" href="select.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="select.js"></script>
</head>
<body>
<div class="select">
<a class="arrow" href="#">Select Link</a>
<ul class="aList">
<li><a href="#">sub list 01</a></li>
<li><a href="#">sub list 02</a></li>
<li><a href="#">sub list 03</a></li>
<li><a href="#">sub list 04</a></li>
<li><a href="#">sub list 05</a></li>
</ul>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 네비게이션1 (0) | 2021.12.09 |
|---|---|
| jQuery node(DOM) 선택자 (0) | 2021.12.08 |
| jQuery animate rotate (feat.CSS) (0) | 2021.12.08 |
| jQuery animate caption (0) | 2021.12.08 |
| jQuery animate hover slide (0) | 2021.12.08 |
