한동안 Javascript, Ajax, jQuery 등을 배워볼까 생각했지만 아직 플러그인을 작성하지 못한 것 같습니다. jQuery 공식 홈페이지에서 눈길을 끄는 플러그인이 너무 많아서 하게 되었습니다. 오늘은 비슷한 플러그인을 살펴보도록 하겠습니다. 이제 jQuery 플러그인의 기본 형식을 이해했으므로 기본 아이디어를 정리하고 작업을 시작할 수 있습니다. . .
이 DivAlert 플러그인은 이름에서 알 수 있듯이 페이지 팝업 상자로, Winform의 MessageBox.Show()와 같습니다.
먼저 가장 기본적인 매개변수 중 일부를 정의해 보겠습니다.
플러그인 초기화
(function($) {
$.jDivAlert = function(o) {
//기본 플러그인 정보 설정
var options = o || {};
options.width = o.width || 300;
options.height = o.height || 200;
options.title = o.title || >options.content = o .content || "Prompt content";
그런 다음 재사용할 수 있도록 페이지 요소를 생성하는 방법을 정의합니다. js:
function createElement(obj) {
return $(document.createElement( obj));
배경 div 생성 및 스타일 설정
var $bgDiv = createElement('div')
.css({ 'position': 'absolute', 'top': ' 0', '왼쪽': '0', 'z-인덱스': '9999', '필터': '알파(불투명도=70)', '배경색상': '#999', '불투명도': '0.7' , 'width': document.documentElement.clientWidth "px", 'height': document.documentElement.clientHeight "px" })
.appendTo('body')
프롬프트 만들기 div
var $outDiv = createElement('div ')
.css({ 'position': 'absolute', 'top': ($(window).height() - options.height) / 2 $(window).scrollTop() 'px', ' 왼쪽': ($(window).width() - options.width) / 2 $(window).scrollLeft() 'px', 'border': '1px solid #cef', 'zIndex': '10000', 'width': options.width 'px', 'height': options.height 'px', 'overflow': 'hidden' })
.appendTo('body')
프롬프트 div의 제목 부분 만들기
var $titDiv = createElement("div")
.css({ 'textAlign': ' left', 'BackgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' })
.html(options.title)
.appendTo($outDiv);
생성 프롬프트 div의 콘텐츠 부분
var $conDiv = createElement("div")
.css({ 'BackgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv. externalHeight() })
.html(options.content)
.appendTo($outDiv)
닫기 버튼 만들기
var $ clsBtn = createElement("img")
.attr('src', ' del.gif')
.css({ 'cursor': 'pointer', 'float': 'right' })
.click(close)
.appendTo($titDiv)
팝업 상자 닫기 이벤트 만들기:
function close() {
$bgDiv.fadeOut();
$outDiv.fadeOut()
}
}
})
효과를 보려면 페이지의 스크립트 부분에 다음 코드를 추가하면 됩니다. (물론 jQuery 라이브러리 파일은 필수이며 최신 버전은 1.4.2입니다. 공식 웹사이트에서 다운로드할 수 있습니다. http://www.jQuery.com):