jQuery를 UI의 API - 일부 메뉴 (메뉴 위젯)
범주
용법
설명 : 탐색을위한 마우스와 키보드의 상호 작용으로 메뉴를 테마로 할 수있다.
새로운 버전 : 1.9
메뉴가 한 요소가 엄격한 부모 / 자식 관계가 각 항목에 앵커를 갖는 한, 유효한 태그로 생성 될 수있다. 가장 일반적인 요소는 정렬되지 않은 목록입니다 ( <ul> )
<UL 아이디 = "메뉴">
<리> <a보기 </a> 항목 1 </A> </ 리>
<리> <a보기 </a> 항목이 </A> </ 리>
<리> <a의보기 </a> 항목 3 </a>를
<UL>
<리> <a의보기 </a> 항목 3-1 </A> </ 리>
<리> <a의보기 </a> 항목 3-2 </A> </ 리>
<리> <a의보기 </a> 항목 3-3 </A> </ 리>
<리> <a의보기 </a> 항목 3-4 </A> </ 리>
<리> <a의보기 </a> 항목 3-5 </A> </ 리>
</ UL>
</ 리>
<리> <a보기 </a> 항목 4 </A> </ 리>
<리튬> <a보기 </a> 항목 5 </A> </ 리>
</ UL>
아닌 사용하는 경우 <ul> / <li> 동일한 구성 요소를 사용하여 메뉴, 메뉴 아이템의 구조를 사용하여 menus 와 같은 두 개의 요소를 구별하는 옵션 menus: "div.menuElement" .
요소에 추가하여 ui-state-disabled , 클래스는 모든 메뉴 항목을 비활성화합니다.
아이콘
태그의 아이콘을 포함, 메뉴에 아이콘을 추가하려면 :
<UL 아이디 = "메뉴"> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 디스크"> </ SPAN> 저장 </A> </ 리> </ UL>
메뉴 (메뉴)는 자동으로 아이콘 없음 항목에 필요한 패딩을 추가합니다.
분리 기호
분리 요소는 해제 메뉴 항목의 메뉴 항목 만 공백 / 대시 포함시켜 생성 될 수있다 :
<UL 아이디 = "메뉴"> <리> <a보기 </a> 항목 1 </A> </ 리> <리> - </ 리> <리> <a보기 </a> 항목이 </A> </ 리> </ UL>
키보드 상호 작용
- / SPACE를 입력 포커스가 작업 메뉴 항목을 호출, 하위 메뉴를 열 수 있습니다.
- UP : 메뉴 항목의 내용을 이동한다.
- DOWN : 다음 메뉴 항목의 가르침으로 이동합니다.
- RIGHT : 가능한 경우, 하위 메뉴를여십시오.
- 왼쪽 : 현재 하위 메뉴를 닫고 상위 메뉴 항목에 포커스를 이동합니다. 포커스가 하위 메뉴가 아닌 경우에는 아무것도 행해지 지 않는다.
- 현재 하위 메뉴를 닫고 상위 메뉴 항목으로 포커스를 이동 : ESCAPE. 초점은 하위 메뉴에없는 경우, 아무것도 행해지 지 않는다.
편지를 입력 해당 문자로 시작하는 첫 번째 항목으로 커서를 이동합니다. 일치하는 항목을 통해 동일한 문자의 뜻주기를 반복합니다. 한 번에 더 많은 문자가 입력 한 문자와 일치 입력합니다.
항목 사용 안 함 사용할 키보드 포커스, 그러나 어떤 상호 작용을 허용하지 않습니다.
테마
사용하는 메뉴 구성 요소 (메뉴 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 외관과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일의 메뉴를 사용해야하는 경우, 다음 CSS 클래스 이름을 사용할 수 있습니다 :
-
ui-menu: 메뉴의 외부 용기. 메뉴가 아이콘이 포함되어있는 경우, 요소 것 추가적으로와ui-menu-icons, 클래스입니다.-
ui-menu-item: 개별 메뉴 항목의 컨테이너입니다.-
ui-menu-icon다음을 통해icons하위 메뉴 아이콘 옵션을 설정합니다.
-
-
ui-menu-divider: 메뉴 항목 사이의 분리 요소입니다.
-
의존
추가 정보
- 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.
예
단순한 jQuery를 UI 메뉴 (메뉴).
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> Menu 구성 요소 (메뉴 위젯) 데모 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스타일>
.ui 메뉴 {
폭 : 200 픽셀;
}
</ 스타일>
<스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
<UL 아이디 = "메뉴">
<리> <a보기 </a> 항목 1 </A> </ 리>
<리> <a보기 </a> 항목이 </A> </ 리>
<리> <a의보기 </a> 항목 3 </a>를
<UL>
<리> <a의보기 </a> 항목 3-1 </A> </ 리>
<리> <a의보기 </a> 항목 3-2 </A> </ 리>
<리> <a의보기 </a> 항목 3-3 </A> </ 리>
<리> <a의보기 </a> 항목 3-4 </A> </ 리>
<리> <a의보기 </a> 항목 3-5 </A> </ 리>
</ UL>
</ 리>
<리> <a보기 </a> 항목 4 </A> </ 리>
<리> <a보기 </a> 항목 5 </A> </ 리>
</ UL>
<스크립트>
$ ( "#menu") .menu ();
</ 스크립트>
</ BODY>
</ HTML>