jQuery 기반 팝업 메시지 플러그인의 DivAlert 여정 (1)_jquery

한동안 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):

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

$(document).ready(function() {
$.jDivAlert({
너비: 300,
높이: 300
});
});

아직 개선해야 할 기능이 많은 것 같네요. . 계속 좋은 일을 하세요. . .
패키지 다운로드 주소

JQuery 기반 팝업 메시지 플러그인 DivAlert 여정(1)

jQuery- 기반 메시지 프롬프트 플러그인 DivAlert Tour(2)

jQuery 기반 메시지 프롬프트 플러그인 DivAlert Tour(3) 권장