Latest web development tutorials

메뉴 (메뉴) - 예를 jQuery를 UI

마우스 및 키보드와 상호 작용하는 메뉴 테마를 탐색하는데 사용될 수있다.

메뉴 구성 요소에 대한 자세한 내용은 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> 인쇄 ... </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>