jQuery Plug-in_jquery 작성 방법 공유

1. 개요

HTML 코드를 먼저 보세요

코드 복사 코드는 다음과 같습니다.

 
• jQuery

 
• Asp.net a>

 
• SQL Server

 
• CSS< ;/a>

예를 들어, 커서가 a 레이블로 이동하면 a 레이블이 오른쪽으로 일정 거리만큼 이동하고, a 레이블이 떠날 때 a 위치가 복원된다는 것을 알고 싶습니다. 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ) {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { 대기열: false, 기간: 500 });
} , 함수() {
                                                                          ~  기능()                                                   🎜>

이제 이 메서드를 확장하여 jQuery 플러그인 형태로 작성하겠습니다. 향후 다른 프로젝트에서도 사용할 수 있으며 일부 속성 값을 쉽게 변경할 수 있습니다. jQuery 플러그인.

2. jQuery 플러그인의 구조

아래 구조는 jQuery 플러그인을 작성하기 위한 더 나은 구조여야 합니다. 이에 따라 원 작성자의 의견 중 일부를 번역했습니다.

코드 복사

코드는 다음과 같습니다.//충돌을 피하려면 다음 방법을 사용하세요. (function($) {

//이 메서드를 jquery로 확장

$.fn.extend({
) //플러그인 이름
플러그인 이름: function () {
                                                                                    });
// 통과 "$" 대신 자바스크립트의 모든 변수를 사용할 수 있도록 메서드에 추가합니다.                                                                                         
다음으로, 사용자가 필요에 따라 일부 변경할 수 있도록 플러그인에 몇 가지 변경 가능한 속성을 추가합니다. 동시에 해당 기본값을 제공해야 합니다.





코드 복사


코드는 다음과 같습니다.

(function($){
$.fn.extend({
// 메소드에 선택적 변수 전달
플러그인 이름: function(options) {
기본값 설정 ​​쉼표로 구분됨
var 기본값 = {
                               색상: '#ffffff'
                                          >        경고(o.padding);
3. jQuery 플러그인 구현





코드 복사


코드는 다음과 같습니다.

(함수($) {
$.fn.extend({
) //플러그인 이름 - paddingList
       paddingList: 함수(옵션) {
                                               
var defaults = {
animatePadding: 10,
hoverColor: "Black"
var options = $.extend(defaults, options);
                                                                              함수 () {
var o = 옵션
// 변수로 설정된 결제 요소
              var items = $("li a", obj);                                       $(this).css( "color", o.hoverColor);
                                                                                                            | : 300 });
                     );
마지막으로 플러그인 사용 방법은 다음과 같습니다.





코드 복사


코드는 다음과 같습니다.


//플러그인 사용
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });

});

저자: Friend 출처: jQuery Learning