jQuery 플러그 인의 쓰기 공유

3886 단어 jQuery 플러그 인
1.개술
html 코드 먼저 보기

<ul id="catagory">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Asp.net</a></li>
    <li><a href="#">Sql Server</a></li>
    <li><a href="#">CSS</a></li>
</ul>
예 를 들 어 커서 가 a 탭 으로 이동 할 때 a 탭 이 오른쪽으로 거 리 를 이동 하고 떠 날 때 a 위치 가 회 복 됩 니 다.실현 방법 은 다음 과 같다.

$(document).ready(function() {
    $("#catagory a").hover(function() {
        $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
    }, function() {
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
    });
});
현재 우 리 는 이 방법 을 확장 하여 jQuery 플러그 인의 형식 으로 쓸 것 입 니 다.앞으로 도 다른 항목 에서 사용 할 수 있 고 속성 값 을 편리 하 게 변경 할 수 있 습 니 다.이제 jQuery 플러그 인의 작성 방법 을 살 펴 보 겠 습 니 다.
2.jQuery 플러그 인의 구조
아래 의 이 구 조 는 jQuery 플러그 인 을 작성 하 는 비교적 좋 은 구조 일 것 입 니 다.저 는 원작 자의 주석 을 번역 하 였 습 니 다.

// ,
(function($) {
    // jquery
    $.fn.extend({
        //
        pluginname: function() {
            //
            return this.each(function() {
                //
            });
        }
    });
 // jQuery , javascript "$"     
})(jQuery);
다음 에 저 희 는 플러그 인 에 변경 할 수 있 는 속성 을 추가 합 니 다.그러면 사용 자 는 자신의 수요 에 따라 변경 할 수 있 습 니 다.동시에 우 리 는 상응하는 기본 값 을 제공 해 야 한다.

(function($){ 
    $.fn.extend({  
 //
        pluginname: function(options) { 
            //
            var defaults = { 
                padding: 20, 
                mouseOverColor : '#000000', 
                mouseOutColor : '#ffffff' 
            } 
            var options =  $.extend(defaults, options); 
            return this.each(function() { 
                var o = options; 
                //
                //
                alert(o.padding); 
            }); 
        } 
    }); 
})(jQuery); 
3.jQuery 플러그 인 구현

(function ($) {
    $.fn.extend({
        // - paddingList
        paddingList: function (options) {
            //
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                // ul
                var obj = $(this);
                // ul a
                var items = $("li a", obj);
                // hover() a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
            });
        }
    });
})(jQuery);
마지막 으로 플러그 인 을 사용 하 는 방법 은 다음 과 같 습 니 다.

//
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
저자:친구 의 당신 출처:jQuery 공부

좋은 웹페이지 즐겨찾기