Contents

Views 5566 Comment 0
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print

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
No. Category Subject Author Date Views
843 Develop '2014 모바일 개발 트렌드' 발표자료입니다. file hooni 2014.10.02 2535
842 Develop Aspect Oriented Programming in Objective-C hooni 2015.05.18 3255
841 Develop DDay Memo 1.9.4 소스코드 secret hooni 2015.10.03 0
840 Develop GCM 사용하기 2 (단말에 GCM 구현하기) file hooni 2013.07.06 24652
839 Develop GCM 사용하기 3 (JSP로 GCM 푸시 서버 만들기) 4 file hooni 2013.07.06 27129
838 Develop git 브런치 배우기 (링크) hooni 2013.07.09 22079
837 Develop GPL, AGPL, MPL,.. 한눈에 보는 오픈소스SW 라이선스 file hooni 2014.10.14 2062
836 Develop How to Test SMTP AUTH using Telnet hooni 2018.04.05 6223
835 Develop JSON, BSON 변환 file hooni 2013.04.23 13134
834 Develop Laravel 5 Failed opening required bootstrap/../vendor/autoload.php hooni 2018.01.24 6121
833 Develop Mac OS 에 Jenkins 설치하기 (Homebrew) 2 file hooni 2017.03.15 13256
832 Develop macOS에 node, npm 설치하기 (homebrew) file hooni 2021.11.06 4554
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 71 Next
/ 71