반응형 웹을 개발하다 보면 브라우저 창 크기에 따라 이벤트를 발생해야 할 때가 있다
제이쿼리를 이용하여 이벤트 발생하는 코딩을 작성한다
예) 브라우저 크기가 768px을 넘어갈 때 브라우저에 있는 버튼을 숨김 처리한다
[Html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
.invisible{
display: none;
}
</style>
<body>
<button type="button" class="removebtn"> 버튼 </button>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>html을 실행하면 아래와 같은 버튼이 보인다
↑↑↑ 창 조절을 해보면 큰 창에서만 버튼이 보인다↑↑↑
[jQurey 코드]
$(document).ready(function() {
$(window).on('resize',function (){
// 브라우저 width값을 가져오기
var width_size = window.outerWidth;
// 브라우저 width 크기가 768px 이하이면 버튼 숨기기
if (width_size <= 768) {
$('.removebtn').addClass('invisible');
}else{
$('.removebtn').removeClass('invisible');
}
});
$(".removebtn").on("click", function(){
alert("버튼 클릭");
});
});
[결과 창]
반응형
'Web' 카테고리의 다른 글
| JavaScript, jQuery 버튼 비활성화 하기 (0) | 2021.12.27 |
|---|---|
| 카카오(다음) 주소 검색 API 사용하기 (0) | 2021.12.17 |
| [JavaScript+jQurey] form 태그 action, submit하기 (0) | 2021.12.11 |
| [JavaScript] 동적으로 테이블 열 합치기(rowspan) (0) | 2021.12.02 |
댓글