[jQuery] Content toggle (내용 클래스 토글링 플러그인)
- Nest
- Development
- Category
- Javascript
- Hit
- 690
- Star
- 0
특정 엘리먼트를 클릭하면 클래스가 토글되면서 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'
});
위의 소스는 단순히 클래스이름만 토글링한다. 자세한 전체 소스는 데모페이지를 통해서 확인하길 바란다.