Contents

조회 수 5558 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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/




?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
1165 Develop GCM 사용하기 2 (단말에 GCM 구현하기) file hooni 2013.07.06 24652
1164 Develop GCM 사용하기 3 (JSP로 GCM 푸시 서버 만들기) 4 file hooni 2013.07.06 27129
1163 Develop git 브런치 배우기 (링크) hooni 2013.07.09 22078
1162 Develop GPL, AGPL, MPL,.. 한눈에 보는 오픈소스SW 라이선스 file hooni 2014.10.14 2061
1161 Etc GSM에서 음성이 실리는 과정 요약.. hooni 2013.04.23 18627
1160 Etc How to completely Uninstall Coda hooni 2017.10.24 4866
1159 System/OS How to Install and Use wget on Mac file hooni 2020.09.03 5570
1158 System/OS How to Setup an Email Server on CentOS 7 hooni 2018.04.05 5911
1157 Develop How to Test SMTP AUTH using Telnet hooni 2018.04.05 6184
1156 System/OS HTTP 프로토콜 (브라우저와 웹서버 간의 통신) hooni 2003.04.23 50774
1155 System/OS HTTPS와 SSL 인증서 file hooni 2014.03.11 8737
1154 Etc iOS 에서 쓸만한 오프라인 구글지도 찾기 hooni 2014.01.06 17283
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 99 Next
/ 99