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

예전부터 모달 프레임을 구현하고 싶었는데, 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();
}
}]); > 중단
}
})

기본
확장Spinner
Alert < ;button class="dlgDemoBtn"action="confirm">확인
사용자 정의 ;

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

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

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

효과를 게시해보세요!

"기본"을 클릭하세요.

"스피너"를 클릭하세요.

"사용자 정의"를 클릭하세요:

전반적으로 꽤 좋은 플러그인입니다. IE9 및 Chrome 브라우저에서 테스트하면 잘 작동하지만 팝업 상자는 Chrome 브라우저에서 드래그를 지원하지만 IE9에서는 지원하지 않습니다.

구체적인 소스 파일은 공식 홈페이지(http://boarsoft.com/cn/)를 참고해주세요. 그 안에는 다른 예시도 많이 있으니 앞으로 하나씩 시도해 보도록 하겠습니다.

저의 연구 결과입니다. 재인쇄는 허용되며 소통은 환영합니다. 단, 재인쇄 전에 이 글의 링크 주소를 알려주셔야 합니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.