jQuery 연구 노트 (2)--jquery를 사용하여 다양한 모달 프롬프트 상자 코드 및 프로젝트 구조 구현

jQuery 연구 노트 (2)--jquery를 사용하여 다양한 모달 프롬프트 상자 코드 및 프로젝트 구조 구현_jquery

WBOY

풀어 주다： 2016-05-16 17:37:55

원래의

1059명이 탐색했습니다.

예전부터 모달 프레임을 구현하고 싶었는데, jquery 플러그인을 많이 찾아봤는데 만족스러운 플러그인을 이번에 만나보게 됐거든요. 아직 개발 단계라서 문서 API도 없는 상태여서 알아내는 데 시간이 많이 걸렸어요.

먼저 코드를 살펴보겠습니다. 소스 코드를 보고 원하는 효과를 맞춤 설정했습니다.

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

<%@ page 언어="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8" %>
< ;!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

JQueryMagicDialog

;script type="text /javascript">
$(function(){
$('.dlgDemoBtn').click(function(){
var el = $(this), act = el.attr('action');
switch(act){
case '기본':
$('

').mac('dialog',{
title: 'prompt',
model: true,
autoOpen: true,
width: 200,
draggable: true,
el: '

You clicked me ! '
});
break;
case 'extended':
mac.opendlg({
title: 'Prompt',
message: 'Press { 0}은 창을 닫을 수 있습니다.',
params: ['ESC/Enter'],
버튼: [{
text: '확인',
클릭 : function(d){
d.close();
}
}]
})
break
case 'wait':
var h = mac .wait('이 창은 3초 후에 자동으로 닫힙니다.');
window.setTimeout(function(){
h.close();
}, 3000)
break; > case 'alert':
mac.alert('Hello!');
break;
case 'confirm':
mac.confirm('

계속하시겠습니까? / p>', function(){
alert('클릭했습니다!')
}, null)
break
case 'customize':
mac.confirm(' < ;p>확실합니까?

', null, null, [{
text: 'Close',
click: function(d){
d.close()
}
},{
텍스트: '확인',
클릭: function(d){
d.close();
}
}]); > 중단
}
})

< ;button class="dlgDemoBtn"action="confirm">확인
;

전체 프로젝트 구조는 아래 그림과 같습니다.

그 중 css 폴더와 이미지 폴더에는 필수 css 파일과 사진이 포함되어 있고, js 폴더에는 필수 js 파일이 포함되어 있습니다. 앞으로 이러한 파일이 필요한 기능이 많이 있을 것입니다. 동적 프롬프트 상자는 작은 기능 중 하나, 즉 MagicDialog 폴더에 있는 파일일 뿐입니다.

자,DialogDemo.jsp 파일을 실행하면 페이지는 다음과 같습니다.