2015. 7. 22. 13:52 IT/jquery
플러그인형태로 개발하기.
쉽습니다.
$.fn.{플러그인명} = function() {}
선언하고
제이쿼리 어디에서든 $.{플러그인명} 으로 호출이 가능하다.
모를땐 몰랐지만 알고나면 탁!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | /*-----------------------------------------------------------------------------+ | auther : insung +-----------------------------------------------------------------------------*/ $(function() { $.fn.pd_toggle = function() { var container = this; // 배열로 로드됨 if(container.length == 0) { return false; } var targetArr = []; for(var loop = 0; container.length > loop; loop++) // for돌리면서 각각의 스크립트 생성 { var obj = $(container[loop]); targetArr[loop] = { 'loop':loop ,'obj':obj ,'objItem':$(obj.attr('pd-toggle-item')) ,'objClose':$(obj.attr('pd-toggle-item')).find(obj.attr('pd-toggle-close')) ,'env':{ 'auto':obj.attr('pd-toggle-auto') } ,init:function(){ // this는 targetArr[loop]이 var target = this; // this를 global로 사용하기 위해 별도로 생성 target.obj.click(function(){ target.objItem.show('fast'); }); target.objClose.click(function(){ target.objItem.hide('fast'); }); if(target.env.auto != 'false' && target.env.auto != 'n' && target.env.auto != '0') { target.objItem.mouseenter(function(){ $(this).mouseleave(function(){ target.objItem.hide('fast'); // this를 target으로 사용 }); }); } } }; targetArr[loop].init(); // 스크립트 생성 후 init } } $('*[pd-toggle-item]').pd_toggle(); // dom 객채중 attr여부 확인해서 플러그인 호출함 }); | cs |
1. 펑션을 만들고
$(function() {
$.fn.pd_toggle = function() { 어쩌구 저쩌구 내용들 }});
});
2. 제이쿼리를 셀랙트 이벤트를 통해 펑션을 호출 하면 끝!
$(function() {
$('*[pd-toggle-item]').pd_toggle();
});