jQuery를 UI API - 대화 상자 구성 요소 (대화 상자 위젯)
범주
용법
설명 : 대화 형 오버레이에서 열기 콘텐츠입니다.
새 버전 : 1.0
다이얼로그는, 타이틀 바, 콘텐츠 영역을 포함하는 부동 창이다. 대화 창 크기를 조정, 이동할 수 '의 X'아이콘으로 기본값은 닫습니다.
콘텐츠 길이가 최대 높이를 초과하는 경우 스크롤 막대가 자동으로 나타납니다.
바닥 버튼 바, 반투명 오버레이 모드 옵션을 추가하는 것이 일반적입니다.
초점
당신이 대화 상자를 열 때 자동으로 포커스가 첫 번째 항목 아래의 기준을 충족 이동합니다 :
- 와
autofocus속성 내에서 첫 번째 요소는 대화 - 내 첫 번째 대화 상자 내용물
:tabbable요소 - 대화 버튼 내 첫 번째 패널
:tabbable요소 - 대화 상자 닫기 버튼
- 대화 상자 자체
열 때, 대화 상자 구성 요소 (대화 상자 위젯) 탭으로 요소 사이에 포커스를 전환하기 위해 상자를 확인 대화 상자 외부 요소를 포함하지 않습니다. 모달 대화 상자는 사용자가 대화 상자 외부 마우스 요소를 클릭 방지한다.
대화 상자를 닫을 때 이전 대화 상자 요소 초점 열립니다에 초점이 자동으로 반환합니다.
닫기 버튼 숨기기
경우에 따라서는 예를 들어, 버튼 패널은 케이스를 닫을 수있는 버튼이, 닫기 버튼을 숨길 수 있습니다. 가장 좋은 방법은 CSS를 통해입니다. 예를 들어, 당신은 같은 간단한 규칙을 정의 할 수 있습니다 :
- 안돼 닫기 .ui - 대화 - 제목 표시 줄 닫기 {
디스플레이 : 없음;
}
그런 다음 추가 할 수 있습니다 no-close 닫기 버튼을 숨기는 데 사용 임의의 대화 상자로, 클래스 :
$ ( "#dialog") .dialog ({
dialogClass "노 근접"
버튼 :
{
텍스트 : "OK"
클릭 기능 () {
$ (이) .dialog ( "가까운");
}
}
]
});
테마
사용 대화 상자 구성 요소 (대화 위젯) jQuery를 UI의 CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 스타일을 지정하는 대화 상자를 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :
-
ui-dialog대화 상자 외부 용기 :.-
ui-dialog-titlebar: 대화 상자 제목 표시 줄의 제목과 닫기 버튼이 포함되어 있습니다.-
ui-dialog-title컨테이너 주위에 대화 상자 제목 텍스트 :. -
ui-dialog-titlebar-close: 버튼을 대화 상자를 닫습니다.
-
-
ui-dialog-content컨테이너 주위에 대화 내용 :. 이것은 또한 인스턴스화 요소의 일부이다. -
ui-dialog-buttonpane: 대화 버튼 패널이 포함되어 있습니다. 경우에만 설정buttons선택 제시하는 경우.-
ui-dialog-buttonset: 컨테이너 주위 버튼.
-
-
설정하면 또한, modal A의 시간 옵션, ui-widget-overlay 요소 클래스 이름을 추가됩니다 <body> .
의존
- UI 코어 (UI 코어)
- 구성 요소 라이브러리 (위젯 공장)
- 위치 (위치)
- Button 구성 요소 (버튼 위젯)
- 드래그 위젯 (드래그 위젯) (옵션, 때
draggable옵션과 함께 사용했을 때) - 크기 조정 위젯합니다 (크기 조정 위젯) (옵션; 때
resizable옵션을 사용하는 경우) - 효과 코어 (코어 효과) (선택하며 때
show및hide옵션과 함께 사용했을 때)
추가 정보
- 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.
예
간단한 jQuery를 UI 대화 (대화).
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> 대화 상자 구성 요소 (대화 상자 위젯) 데모 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
<버튼 ID = "오프너"> 열기 대화 상자 </ 버튼>
<사업부 아이디 = "대화"제목 = "대화 상자 제목"> 내가 대화 </ DIV>
<스크립트>
$ ( "#dialog") .dialog ({에 AutoOpen : 거짓});
$ ( "#opener") .click (함수 () {
$ ( "#dialog") .dialog ( "열기");
});
</ 스크립트>
</ BODY>
</ HTML>