Contents

조회 수 5566 댓글 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/




?

  1. [ios] UILabel with two different color text

  2. [ios] 배경에 Gradient 적용하기 (CAGradientLayer)

  3. Brave Browser for Debian, Ubuntu, Mint

  4. Ubuntu Desktop RDP Setup - 24.04 LTS

  5. 원어민이 매일 쓰는 일상표현 150개

  6. 영어. 반드시 외워야 할 문장 패턴 100개

  7. [swift] UIView에서 subview 찾기

  8. 네트워크 용어 정리

  9. [macos] How to Fix ‘You Shut Down Your Computer Because of a Problem’

  10. [ios] 여러 버전의 Xcode 사용하기

  11. [ios] Pod 특정 버전 설치하고 사용하기

  12. 맥에서 포트 확인하고 닫기 (mac)

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 99 Next
/ 99