홈페이지 TIP

Marketing Tip

홈페이지 마케팅 노하우 나눔공간!!

홈페이지 TIP - 포항사랑 [ jQuery ] 내용 토글 플러그인
2021-12-02 18:12:22
포항사랑 (ican22) <> 조회수 140

특정 엘리먼트를 클릭하면 클래스가 토글되면서 css에 따라 다른 이벤트를 발생시킬 수 있습니다.
자세한 기능은 데모페이지를 통해서 확인가능

데모페이지
http://codepen.io/redgoose/pen/rJEtL

 

플러그인 js

 
  1. // toggle element plugin
  2. jQuery.fn.toggleElement = function(options)
  3. {
  4. var
  5. $this = $(this),
  6. defaults = {
  7. toggleButtonElement : null,
  8. targetElement : null,
  9. activeClassName : 'active'
  10. }
  11. ,op = $.extend(defaults, options)
  12. ,$button = $this.find(op.toggleButtonElement)
  13. ;
  14.  
  15. // onclick event handler
  16. $button.on('click', function(){
  17. var $target = $this.find(op.targetElement);
  18. (($target.length) ? $target : $this).toggleClass(op.activeClassName);
  19. });
  20. }


호출부분 js
 
  1. jQuery(function($){
  2. $('#toggle').toggleElement({
  3. toggleButtonElement : '> h1' // 토글 엘리먼트(내부 엘리먼트)
  4. //,targetElement : '> form' // 클래스이름이 붙는 엘리먼트 (내부 엘리먼트)
  5. ,activeClassName : 'on' // 토글 클래스명
  6. });
  7. });




위의 소스는 단순히 클래스이름만 토글링합니다. 자세한 전체 소스는 데모페이지를 통해서 확인하시길 바랍니다.


top