간단한 jQuery 플러그인 제작 학습 프로세스 및 example_jquery

1. 먼저 jQuery 플러그인을 만들려면 클로저가 필요합니다

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

(function ($) {
//code in here
})(jQuery)

공식 플러그인입니다. jQuery의 개발 사양 요구 사항은 이것을 사용하십시오. 이 작성 방법의 이점은 무엇입니까?
a) 전역 종속성을 피하세요.
b) 제3자의 방해 행위를 피하세요.
c) jQuery 연산자 '$' 및 'jQuery'와 호환

둘째, 클로저를 사용하여 플러그인의 뼈대를 추가합니다

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

$.fn.dBox = 함수(옵션) {
var defaults = {
//다양한 속성과 기본값
};
var opts = $.extend(defaults, options)
//여기에 있는 함수
}; 🎜>

여기서 dBox는 이 팝업 레이어 플러그인의 이름입니다

셋째, dBox의 속성과 기본값을 설정합니다

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

$.fn.dBox = 함수(옵션) {

var defaults = {
불투명도: 0.6, //마스크 레이어의 경우
드래그: true,
제목: 'dBox',
내용: '',
왼쪽: 400 ,
상단: 200,
너비: 600,
높이: 300,
setPos: false, //고객의 왼쪽 및 상단을 사용하는 경우
overlay: true, // 마스크 레이어
loadStr: 'Loading',
ajaxSrc: '',
iframeSrc: ''
}
var opts = $.extend(defaults, options)
/ /함수 코드는 여기
};

넷째, 팝업 형태이므로 먼저 div 폼과 마스크 레이어를 디자인해야 합니다
. 기능 코드 영역에 스타일을 직접 입력하세요.

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

//dBox의 HTML 코드 빌드

var dBoxHtml = "

";
dBoxHtml = "

";
dBoxHtml = "

" opts.title "

"
dBoxHtml = "

[x]

"
dBoxHtml = "< ;/div>";
dBoxHtml = "< ;div id='d_content' style='width:100%;height:100%;padding:3px;'>" opts.content "

";
dBoxHtml = "

";
var dBoxBG = "