ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
[백업] JQuery로 간단한 X버튼 만들기
2020. 11. 25.,
728x90
닫기 아이콘 Close icon
예전에 만들었던 '간단한 X버튼 만들기'에서는 자바스크립트를 이용해서 만들었고 이번에는 JQuery를 사용해서 만들어 보겠습니다.
먼저 .close선택자와 .notice선택자의 css를 만들고,
.notice {
padding: 10px;
background-color: rgb(249, 250, 252);
text-align: left;
margin-top: 5px;
}
.notice h4 {
font-size: 1.3rem;
font-weight: 700;
padding: 1px 0;
}
.notice p {
-webkit-margin-before: .3em;
-webkit-margin-after: .5em;
}
.close {
float: right;
display: inline-block;
padding: 1px 5px;
font-weight: 700;
text-shadow: 0 1px 0 #fff;
font-size: 1.3rem;
}
.close:hover {
border: 0;
cursor: pointer;
opacity: .75;
}예전 것의 id에서 class로 변환했습니다.
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> $(document).ready(function() {
$(".close").click(function() {
$(".notice").hide();
}
);}
);
</script>
</head>JQuery 3.2.1버전을 사용, 밑에 .hide()문을 사용하여 .notice클래스를 숨깁니다.
<div class="notice">
<span class='close'>×</span>
<h4>공지사항</h4>
<p>내용</p>
</div>예전 것에 비교해 간단하고 쉽게 사용할 수 있어 더 좋은 것 같습니다.
jQuery hide () 및 show (),toggle()
$(selector).hide(speed,callback);- HTML 요소를 숨기기$(selector).show(speed,callback);- HTML 요소를 보여지기$(selector).toggle(speed,callback);- hide () 및 show () 메서드를 서로 전환
: speed - 속도 매개 변수는 "slow", "fast" 또는 밀리 초의 값을 취할 수 있습니다.
예) $(this).hide(500);
: callback - 효과가 완료된 후에 실행될 함수 인 콜백 매개 변수를가집니다.
이 부분은 안 적으려고 했지만, 나중에 잃어버릴 때를 대비해 메모라도 해 놓자는 생각에 적었습니다. 이제 막 배우기 시작해서 무슨 소리인지 개념을 잡고 있지만, 시간이 지나면 알게 되겠다 싶어 메모합니다.
2018. 1. 5. 03:44
v3 Blog - 글 백업
728x90
