jQuery를 UI의 API - 탭 부재 (탭 위젯)
범주
용법
설명 : 멀티 패널 단일 콘텐츠 영역 목록 제목에서 각 패널.
새 버전 : 1.0
탭 (탭) 항상 아코디언 (아코디언)와 같이 동일하게 공간을 절약하기 위해, 다수의 섹션들로 콘텐츠를 사용한다.
탭 (탭)가 제대로 탭을 작동하기 위해 사용되어야 태그의 특정 세트가 있습니다 :
- 탭 (탭) 정렬 (여야합니다
<ol>) 또는 순서 (<ul>) 목록 - 각 페이지의 "제목"태그 (목록 항목이어야합니다
<li>내부)와 함께 사용해야합니다href앵커 (의 속성<a>) 패키지로 제공된다. - 각 태그 플레이트 유효한 페이지 요소 일 수 있지만, 그 ID가 해당 탭과 연관된 ID, 앵커 해시를 가져야한다.
각 플레이트 탭 페이지의 내용은 페이지가 양호하거나 Ajax를 통해로드 될 수로 정의 할 수있다. 두 방법은 앵커 태그 관련 페이지에 기초 href 자동 방법. 기본적으로 때 활성화 탭을 클릭 만하여 event 옵션을 변경하거나 이벤트를 재정의 할 수 있습니다.
여기에 몇 가지 샘플 태그는 다음과 같습니다
<사업부 아이디 = "탭">
<UL>
<리> <a href="#fragment-1"> </A> </ 리>
<리> <a href="#fragment-2">이 </A> </ 리>
<리> <a href="#fragment-3"> 세 </A> </ 리>
</ UL>
<사업부 아이디 = "단편-1">
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
</ DIV>
<사업부 아이디 = "단편-2">
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
</ DIV>
<사업부 아이디 = "단편-3">
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
</ DIV>
</ DIV>
키보드 상호 작용
포커스가 탭에있는 경우, 다음과 같은 키보드 명령을 사용할 수 있습니다 :
- UP / LEFT : 이전 탭으로 커서를 이동합니다. 첫 페이지에서 라벨이면 마지막 탭에 포커스를 이동한다. 포커스 탭의 활성화 후 잠시합니다.
- 하 / 좌 : 다음 탭으로 커서를 이동합니다. 마지막 페이지의 레이블 경우 첫 번째 탭으로 포커스를 이동한다. 포커스 탭의 활성화 후 잠시합니다.
- HOME : 첫 번째 탭으로 커서를 이동합니다. 포커스 탭의 활성화 후 잠시합니다.
- 끝 : 마지막 탭으로 커서를 이동합니다. 포커스 탭의 활성화 후 잠시합니다.
- SPACE : 포커스 탭 패널과 관련된 활성화.
- 입력 : 활성화 또는 포커스 탭 패널과 관련된 스위치.
- ALT + PAGE UP : 이전 탭을 즉시 활성화에 커서를 이동합니다.
- ALT + PAGE DOWN : 다음 탭으로 커서를 이동하고 즉시 활성화.
초점은 패널의 경우, 다음과 같은 키보드 명령을 사용할 수있다 :
- CTRL + UP : 관련 탭으로 커서를 이동합니다.
- ALT + PAGE UP : 이전 탭을 즉시 활성화에 커서를 이동합니다.
- ALT + PAGE DOWN : 다음 탭으로 커서를 이동하고 즉시 활성화.
테마
사용 탭 부재 (탭 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일 탭을 사용해야 할 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :
-
ui-tabs외부 용기 탭 :. 당신은 설정하면collapsible-time 옵션을 추가 요소가 함께 제공되는ui-tabs-collapsible, 클래스입니다.-
ui-tabs-nav탭 목록 :.- 탐색 목록 항목이 활성화됩니다
ui-tabs-active, 클래스입니다. 항목의 목록이 나타납니다 Ajax 호출을 통해로드 된 콘텐츠ui-tabs-loading, 클래스입니다.-
ui-tabs-anchor: 앵커에 대한 교환.
-
- 탐색 목록 항목이 활성화됩니다
-
ui-tabs-panel: 탭 관련 패널. 만 해당 탭이 활성화 된 경우에만 볼 수 있습니다.
-
의존
- UI 코어 (UI 코어)
- 구성 요소 라이브러리 (위젯 공장)
- 효과 코어 (코어 효과) (선택하며 때
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>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#fragment-1"> <SPAN>은 </ SPAN> </A> </ 리>
<리> <a href="#fragment-2"> <SPAN>이 </ SPAN> </A> </ 리>
<리> <a href="#fragment-3"> <SPAN> 세 </ SPAN> </A> </ 리>
</ UL>
<사업부 아이디 = "단편-1">
<P> 첫 번째 태그는 기본적으로 활성화되어 있습니다 : </ P>
<코드> $ ( "#tabs") .tabs (); </ 코드>
</ DIV>
<사업부 아이디 = "단편-2">
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
</ DIV>
<사업부 아이디 = "단편-3">
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
가 lorem ipsum의 슬픔은 consectetuer의 adipiscing의 ELIT, 나오지도 DIAM의 nonummy nibh의 euismod의 tincidunt의 유타 laoreet dolore 마그나 aliquam erat의 volutpat, AMET 앉아.
</ DIV>
</ DIV>
<스크립트>
$ ( "#tabs") .tabs ();
</ 스크립트>
</ BODY>
</ HTML>