Develop
2021.02.03 16:13
[js] show/hide 이벤트 감시 (Observing show/hide event)
조회 수 2582 댓글 0
Observing show/hide events with jQuery.
HTML Code
<button id="btnShow">Show</button>
<button id="btnHide">Hide</button>
<div class="container">
<div id="foo">
I am #foo
</div>
</div>
<div id="console">
</div>
CSS Code
.container {
height:60px;
margin:10px;
}
#foo {
background-color:#eeeeee;
width:150px;
height:50px;
text-align:center;
font-size:20px;
}
JQuery Code
//The magic code to add show/hide custom event triggers
(function ($) {
$.each(['show', 'hide'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.trigger(ev);
return el.apply(this, arguments);
};
});
})(jQuery);
//on Show button click; show the #foo div
$('#btnShow').click(function(){
$('#foo').show();
});
//on Hide button click; hide the #foo div
$('#btnHide').click(function(){
$('#foo').hide();
});
//Add custom handler on show event and print message
$('#foo').on('show', function(){
$('#console').html( $('#console').html() + '#foo is now visible'+ '<br>' )
});
//Add custom handler on hide event and print message
$('#foo').on('hide', function(){
$('#console').html( $('#console').html() + '#foo is hidden'+ '<br>' )
});
[출처] https://www.viralpatel.net/jquery-trigger-custom-event-show-hide-element/
번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|---|
685 | Develop | [c++][mfc] 파일 입출력 샘플 (한줄씩 읽어서 다른 파일에 쓰기) | hooni | 2013.04.23 | 14983 |
684 | Develop | [unix] 쉘 스크립트 예제 모음 | hooni | 2003.04.23 | 14949 |
683 | Develop | [ios] UIWebView에서 NSURLRequest에 Cookie 실어 보내기 | hooni | 2014.01.16 | 14859 |
682 | Develop | [unix] 날짜 관련 쉘 명령어 (특정일 또는 +-시간, 날짜 계산된 값) | hooni | 2013.04.23 | 14804 |
681 | Develop | [css] z-index에 설정할 수 있는 최대값? | hooni | 2013.12.20 | 14708 |
680 | Develop | [ios] Objective-C에서 SQLite 사용하기.. | hooni | 2013.04.23 | 14558 |
679 | Develop | [ios] iOS In App Purchase #1 (코드 구현 전 웹 설정 작업) | hooni | 2013.11.20 | 14513 |
678 | Develop | [c] 메시지큐(Message Queue) 설명.. (joinc) | hooni | 2013.04.23 | 14273 |
677 | Develop | [c] vc++ 에서 clrscr(), gotoxy() 함수 사용하기.. | hooni | 2013.04.23 | 14254 |
676 | Develop | [c] 64bit 머신에서 inet_ntoa() 사용시 Segment fault 대처 방법법 | hooni | 2014.02.08 | 14233 |
675 | Develop | [C] C언어의 조건 연산자(Conditional Operator) | hooni | 2003.04.23 | 14227 |
674 | Develop | [c] 민수형 libipq 샘플 소스 ㅋㅋ | hooni | 2003.04.23 | 14112 |