최고의 메뉴 (메뉴) - 예를 jQuery를 UI 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,아이콘,를 배울 수 있습니다.
마우스 및 키보드와 상호 작용하는 메뉴 테마를 탐색하는데 사용될 수있다.
메뉴 구성 요소에 대한 자세한 내용은 API 문서를 참조하십시오 메뉴 구성 요소 (위젯 메뉴) .
기본 구성으로 메뉴 항목과 메뉴 중첩을 사용하지 않도록 설정합니다. 그것은 변환 및 추가 테마의 목록으로 구성되어 있으며, 마우스 및 키보드 상호 작용을 지원합니다. 메뉴를 탐색 할 수 커서 키를 사용해보십시오.
<! 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"> <스크립트> $ (함수 () { $ ( "#menu") .menu (); }); </ 스크립트> <스타일> .ui 메뉴 {폭 : 150 픽셀;} </ 스타일> </ 헤드> <바디> <UL 아이디 = "메뉴"> <리 클래스 = "UI 상태 비활성화"> <a보기 </a> 애버딘 </A> </ 리> <리> <a보기 </a> 에이다 </A> </ 리> <리> <a보기 </a> Adamsville </A> </ 리> <리> <a보기 </a> Addyston </A> </ 리> <리> <a보기 </a> 델파이 </a>를 <UL> <리 클래스 = "UI 상태 비활성화"> <a보기 </a> 에이다 </A> </ 리> <리> <a보기 </a> 자를란 트 </A> </ 리> <리> <a보기 </a> 잘츠부르크 </A> </ 리> </ UL> </ 리> <리> <a보기 </a> 자를란 트 </A> </ 리> <리> <a보기 </a> 잘츠부르크 </a>를 <UL> <리> <a보기 </a> 델파이 </a>를 <UL> <리> <a보기 </a> 에이다 </A> </ 리> <리> <a보기 </a> 자를란 트 </A> </ 리> <리> <a보기 </a> 잘츠부르크 </A> </ 리> </ UL> </ 리> <리> <a보기 </a> 델파이 </a>를 <UL> <리> <a보기 </a> 에이다 </A> </ 리> <리> <a보기 </a> 자를란 트 </A> </ 리> <리> <a보기 </a> 잘츠부르크 </A> </ 리> </ UL> </ 리> <리> <a보기 </a> 농 </A> </ 리> </ UL> </ 리> <리 클래스 = "UI 상태 비활성화"> <a보기 </a> Amesville </A> </ 리> </ UL> </ 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"> <스크립트> $ (함수 () { $ ( "#menu") .menu (); }); </ 스크립트> <스타일> .ui 메뉴 {폭 : 150 픽셀;} </ 스타일> </ 헤드> <바디> <UL 아이디 = "메뉴"> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 디스크"> </ SPAN> 저장 </A> </ 리> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - zoomin"> </ SPAN> 확대 </A> </ 리> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - zoomout"> </ SPAN>, 수정, </A> </ 리> <리 클래스 = "UI 상태 비활성화"> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 인쇄"> </ SPAN> 인쇄 ko. </A> </ 리 > <리> <a </a>를 재생보기 </a> <UL> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘-시작 추구">를 </A> </ 리>에 </ 스팬> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 스톱"> </ SPAN> 정지 </A> </ 리> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 플레이"> </ SPAN> 플레이 </A> </ 리> <리> <a보기 </a> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - 엔드를 추구"> </ SPAN> 다음 </A> </ 리> </ UL> </ 리> </ UL> </ BODY> </ HTML>