jQuery를 UI 예 - 대화 (대화)
대화 형 오버레이에서 열기 콘텐츠입니다.
대화 상자 구성 요소에 대한 자세한 내용은 API 문서를 참조 대화 상자 구성 요소 (대화 위젯을) .
기본 기능
기본적인 대화 창 (같은 요소를 선택)로 구분 IFRAME과 페이지의 콘텐츠를, 상기 커버 층의 가시 영역에 위치한다. 그것은 제목 표시 줄과 컨텐츠 영역 조성물로 구성되어 있으며, 크기 조정, 이동 될 수있다 '의 X'아이콘으로 기본값은 닫습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 대화 상자 (대화) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#dialog")를 .dialog ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화"제목 = "기본 대화 상자">
<P>는이 정보를 표시하는 기본 대화 상자이다. 대화 창 크기를 조정, 이동할 수 '의 X'아이콘으로 기본값은 닫습니다. </ P>
</ DIV>
</ BODY>
</ HTML>
생기
당신은 특수 효과 / 표시 대화 상자를 표시 애니메이션 속성을 숨길 지정할 수 있습니다. 당신은 당신이 특수 효과를 사용하려는 효과를 별도의 파일을 참조해야합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 대화 상자 (대화) - 애니메이션 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#dialog") .dialog ({
에 AutoOpen : 거짓,
쇼 : {
효과 : "블라인드",
기간 : 1000
},
숨기기 {
효과 : "폭발",
기간 : 1000
}
});
$ ( "#opener") .click (함수 () {
$ ( "#dialog") .dialog ( "열기");
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화"제목 = "기본 대화 상자">
<P>는이 정보를 표시하기위한 대화 상자의 애니메이션 표시된다. 대화 창 크기를 조정, 이동할 수 '의 X'아이콘으로 기본값은 닫습니다. </ P>
</ DIV>
<버튼 ID = "오프너"> 열기 대화 상자 </ 버튼>
</ BODY>
</ HTML>
기본 모드
대화 상자를 닫을 때까지 대화 상자 외부의 사용자를 방지하기 위해 페이지의 모달 대화 나머지는 상호 작용할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 대화 상자 (대화) - 기본 모달 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#의 대화 모달") .dialog ({
높이 : 140,
모달 : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화 모달"제목 = "기본 모달 대화 상자">
<P> 오버레이 화면을 모달 추가 기능이 페이지의 다른 컨텐츠를하게 어두워 때문에 대화 모습이 더 눈에 띄는합니다. </ P>
</ DIV>
<P> SED VEL의 DIAM 아이디 리베로 <a href="http://www.w3cschool.cc"> rutrum convallis </a>를. Donec aliquet 레오 VEL 마그나. Phasellus rhoncus faucibus 분담금. Etiam BIBENDUM, enim faucibus aliquet rhoncus, arcu 고양이 속 ultricies neque, 앉아 AMET auctor ELIT 에로스 lectus. </ P>
</ BODY>
</ HTML>
모달 확인
파괴적인 행동도 가능 감지 할 수 확인합니다. 설정 modal true로 옵션을,에 의해 buttons 기본 및 보조 사용자 작업 옵션을 지정할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 대화 상자 (대화) - 모달 확인 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#의 대화-확인") .dialog ({
크기 조정 : 거짓,
높이 : 140,
모달 : 사실,
버튼 : {
{() 함수 : "모든 항목 삭제"
$ (이) .dialog ( "가까운");
},
취소 기능 () {
$ (이) .dialog ( "가까운");
}
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화-확인"제목 = "휴지통 비우기?">
<P> <스팬 클래스 = "UI-아이콘 - 아이콘 - 경고 UI"스타일 = "플로트 : 왼쪽, 여백 : 0 7px 20 픽셀 0;"> </ SPAN>이 항목이 영구적으로 삭제되며 복구 할 수 없습니다. 당신은 확실한가요? </ P>
</ DIV>
<P> SED VEL의 DIAM 아이디 리베로 <a href="http://www.w3cschool.cc"> rutrum convallis </a>를. Donec aliquet 레오 VEL 마그나. Phasellus rhoncus faucibus 분담금. Etiam BIBENDUM, enim faucibus aliquet rhoncus, arcu 고양이 속 ultricies neque, 앉아 AMET auctor ELIT 에로스 lectus. </ P>
</ BODY>
</ HTML>
모달 폼
모달 대화 상자는 다단계 공정으로 데이터를 입력하도록 사용자에게 요청한다. 설정 내용 영역 양식 태그에 포함 된 modal true로 옵션을,에 의해 buttons 기본 및 보조 사용자 작업 옵션을 지정할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 대화 상자 (대화) - 모달 양식 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
몸 {글꼴 크기 : 62.5 %;}
라벨, 입력 {디스플레이 : 블록;}
input.text {마진 - 하단 : 12 픽셀, 폭 : 95 %; 패딩 : .4em;}
FIELDSET {패딩 : 0; 경계 : 0; 마진 - 맨 : 25 픽셀;}
H1 {글꼴 크기 : 1.2em; 마진 : .6em 0;}
사업부 #의 {폭 : 350px; 여백 : 20 픽셀 0;} 사용자가-포함
사업부 # 테이블 {마진 : 1em 0; 국경 - 붕괴 : 붕괴, 폭 : 100 %;} 사용자가-포함
사업부 # 테이블의 TD를 사용자가-포함, 사업부 #의 일 테이블 사용자가-포함 {국경 : 1 픽셀 고체 #eee을, 패딩 : .6em 10px; 텍스트 정렬 : 왼쪽;}
.ui-대화 .ui 상태 오류 {패딩 : .3em;}
.validateTips {국경 : 1 픽셀 고체 투명; 패딩 : 0.3em;}
</ 스타일>
<스크립트>
$ (함수 () {
var에 이름 = $ ( "# NAME"),
이메일 = $ ( "#email")
암호 = $ ( "에는 #Password")
allFields = $ ([])는, (이름) .add (이메일) .add (암호) .add
팁 = $ ( ".validateTips");
기능 updateTips (t) {
팁
는 .text (t)
.addClass ( "UI 상태 강조 표시");
에서는 setTimeout (함수 () {
tips.removeClass ( "UI 상태 강조 표시", 1500);
}, 500);
}
기능 checkLength (O, N, 최소, 최대) {
경우 (o.val (). 길이> 최대 || o.val (). 길이 <분) {
o.addClass ( "UI 상태 오류");
updateTips ( ""+ N + ""아래에 있어야합니다 +
분 + "간의." "와"+ 최대 +);
false를 반환;
} 그밖에 {
true를 반환;
}
}
기능 checkRegexp (O, 정규 표현식, n)이 {
만약 (! (regexp.test (o.val ()))) {
o.addClass ( "UI 상태 오류");
updateTips (N);
false를 반환;
} 그밖에 {
true를 반환;
}
}
$ ( "# 대화 형") .dialog ({
에 AutoOpen : 거짓,
높이 : 300,
폭 : 350,
모달 : 사실,
버튼 : {
"계정 만들기"기능을 () {
VAR bValid = TRUE;
allFields.removeClass ( "UI 상태 오류");
bValid = bValid && checkLength (이름, "사용자 이름", 3, 16);
bValid = bValid && checkLength (이메일, "이메일", 6, 80);
bValid = bValid && checkLength (암호 "암호", 5, 16);
bValid = bValid && checkRegexp (이름, / ^ [AZ] ([0-9A-Z _]) + $ / i를, "사용자 이름은 AZ, 0-9, 밑줄이어야하며 문자로 시작해야합니다.");
// 스콧 곤잘레스 기부 (JOERN에 의해) jquery.validate.js, 보낸 사람 : http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (이메일, / ^ ((([AZ] | \ D | [# \ $ % & '\ * \ + \ - \ / = \ \ ^ _`{\ |}!? ~] | . \ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([AZ] | \ D | [# \ $ % & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ X22) ((((\ X20 | \ X09) * ( \ X0D의 \의 X0A)) (\ X20 |? \ X09) + () ([\ x01- \ X08 \ X0B \ x0c \ x0e- \ X1F \ x7f] |? \ X21 | [\ x23- \ x5b] | [ \ x5d- \ x7e] | [\ u00A0- \ uD7FF \ uF900- uFDCF \ uFDF0- \ uFFEF]) \ | (\\ ([\ x01- \ X09 \ X0B \ x0c \ x0d- \ x7f] | [\ u00A0 ? - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ X20 | \ X09) * (\ X0D \ X0A)) (\ X20 | \ X09) +) (\ X22? ))) @ ((([AZ] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([AZ] | \ D | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([AZ] | \ D | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([AZ] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([AZ] |. \ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([AZ] | [\ u00A0- \ uD7FF \ uF900- uFDCF \ \ uFDF0- \ uFFEF]) ([AZ] | \ D | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([AZ] |.?. \ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \의 $ / i를, "예를 들어 UI @ jquery.com ");
bValid = bValid && checkRegexp (암호, / ^ ([0-9A-ZA-Z]) + $ / "암호 필드 만 허용 : 0-9 AZ");
경우 (bValid) {
$ ( "사용자 수가 TBODY")으로 .Append ( "<TR>"+
"<TD>"+ name.val () + "</ TD>"+
"<TD>"+ email.val () + "</ TD>"+
"<TD>"+ password.val () + "</ TD>"+
"</ TR>");
$ (이) .dialog ( "가까운");
}
},
취소 기능 () {
$ (이) .dialog ( "가까운");
}
},
가까이 : 함수 () {
allFields.val ( "") .removeClass ( "UI 상태 오류");
}
});
$ ( "# 만들기 - 사용자")
.button ()
.click (함수 () {
$ ( "# 대화 형") .dialog ( "오픈");
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화 형"제목 = "새 사용자 만들기">
<P 클래스 = "validateTips"> 모든 양식 필드가 필요합니다. </ P>
<양식>
<FIELDSET>
<용 = "이름"라벨> 이름 </ 라벨>
<입력 유형 = "텍스트"이름 = "이름"ID = "이름"클래스 = "텍스트 UI 위젯 콘텐츠 UI 코너 - 모든">
<용 = "이메일"라벨> 사서함 </ 라벨>
<입력 유형 = "텍스트"이름 = "이메일"ID = "이메일"값 = ""클래스 = "텍스트 UI 위젯 콘텐츠 UI 코너 - 모든">
<용 = "암호"라벨> 비밀번호 </ 라벨>
<입력 유형 = "암호"이름 = "암호"ID = "암호"값 = ""클래스 = "텍스트 UI 위젯 콘텐츠 UI 코너 - 모든">
</ FIELDSET>
</ FORM>
</ DIV>
<사업부 아이디 = 클래스 = "UI 위젯"을 "사용자가-포함">
<H1> 기존 사용자 : </ H1>
<표 아이디 = "사용자"클래스 = "UI - 위젯 UI 위젯 콘텐츠">
<THEAD>
<TR 클래스 = "UI 위젯 헤더">
<목> 이름 </ 일>
<목> 사서함 </ 일>
<목> 비밀번호 </ 일>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 홍길동 </ TD>
<TD> [email protected] </ TD>
<TD> johndoe1 </ TD>
</ TR>
</ TBODY>
</ 테이블>
</ DIV>
<버튼 ID = "사용자를 생성"> 새 사용자를 만듭니다 </ 버튼>
</ BODY>
</ HTML>
모달 메시지
다음 작업이 실행되기 전에 모달 대화 상자 정보 및 동작을 확인한다. 설정 modal true로 옵션을, 그리고 buttons 기본 작업 옵션 (확인)를 지정합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 대화 상자 (대화) - 모달 메시지 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#의 대화-메시지") .dialog ({
모달 : 사실,
버튼 : {
확인 : 함수 () {
$ (이) .dialog ( "가까운");
}
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화-메시지"제목 = "전체 다운로드">
<P>
<스팬 클래스 = 스타일 = "UI-아이콘 UI를-아이콘 - 원 - 확인" "플로트 : 왼쪽, 여백 : 0 7px 50 픽셀 0;"> </ SPAN>
파일이 성공적으로 폴더에 다운로드되었습니다.
</ P>
<P>
저장 공간의 현재 사용의 <b /> <B> 36 %.
</ P>
</ DIV>
<P> SED VEL의 DIAM 아이디 리베로 <a href="http://www.w3cschool.cc"> rutrum convallis </a>를. Donec aliquet 레오 VEL 마그나. Phasellus rhoncus faucibus 분담금. Etiam BIBENDUM, enim faucibus aliquet rhoncus, arcu 고양이 속 ultricies neque, 앉아 AMET auctor ELIT 에로스 lectus. </ P>
</ BODY>
</ HTML>