[jQuery] Content toggle (내용 클래스 토글링 플러그인) on redgoose note

[jQuery] Content toggle (내용 클래스 토글링 플러그인)

Nest: Development Category: Javascript 2014-03-06

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

데모페이지

http://codepen.io/redgoose/pen/rJEtL

플러그인 소스

// toggle element plugin
jQuery.fn.toggleElement = function(options)
{
    var
        $this = $(this),
        defaults = {
            toggleButtonElement : null,
            targetElement : null,
            activeClassName : 'active'
        }
        ,op = $.extend(defaults, options)
        ,$button = $this.find(op.toggleButtonElement)
    ;
    // onclick event handler
    $button.on('click', function(){
        var $target = $this.find(op.targetElement);
        if ($target.length)
        {
            $target.toggleClass(op.activeClassName);
        }
        else
        {
            $this.toggleClass(op.activeClassName);
        }
    });
}

플러그인 호출

$('#search').toggleElement({
    toggleButtonElement : '> h1'
    //,targetElement : '> form'
    ,activeClassName : 'on'
});

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