jQuery 플러그인 제작

jQuery 플러그인 제작

$(document).ready(function() {

     

    $('ul#menu li:even').addClass('even');

         

    $('ul#menu li a').mouseover(function() {

         

        $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });

         

    }).mouseout(function() {

     

        $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });

         

    }).click(function() {

     

        $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });

    });

             

});   

But now, I want it to display something like this:

번역 > 그러나... 나는 아래 코드같이 만들고 싶다. 

$(document).ready(function() {

     

    $(#menu).animateMenu({

        padding:20

    })

             

});   

It looks much more better, and easier to reuse this script for another project.

번역 > 이게 다른 프로젝트에서 코드를 재사용 하기에 훨씬 좋아보이고 쉬워보인다.

//You need an anonymous function to wrap around your function to avoid conflict

//번역: 플러그인 함수명 충돌을 피하기 위해 익명 함수로 감싸주는 부분

(function($){

 

    //Attach this new method to jQuery

    //jQuery로 신규 함수를 추가한다.  

    $.fn.extend({ 

         

        //This is where you write your plugin's name

        //요기가 플러그인 이름을 정의하는곳이다.(pluginname)

        pluginname: function() {

 

            //Iterate over the current set of matched elements

            //현재 매치된 엘리먼트들의 반복 작업 부분 

            return this.each(function() {

             

                //code to be inserted here

                //작업 코드는 여기에 넣어주심됨 

             

            });

        }

    });

     

//pass jQuery to the function, 

//So that we will able to use any valid Javascript variable name 

//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       

})(jQuery);

[출처] The way of creating jQuery plugin(jQuery 플러그인 만들기) |작성자 굿맨