JqueryUI-메뉴

메뉴 위젯은 일반적으로 팝업 메뉴가있는 주 메뉴 모음으로 구성됩니다. 팝업 메뉴의 항목에는 종종 하위 팝업 메뉴가 있습니다. 부모-자식 관계가 유지되는 한 (<ul> 또는 <ol> 사용) 마크 업 요소를 사용하여 메뉴를 만들 수 있습니다. 각 메뉴 항목에는 앵커 요소가 있습니다.

jQueryUI의 메뉴 위젯은 인라인 및 팝업 메뉴에 사용하거나 더 복잡한 메뉴 시스템을 구축하기위한 기반으로 사용할 수 있습니다. 예를 들어 사용자 지정 위치를 사용하여 중첩 된 메뉴를 만들 수 있습니다.

jQueryUI는 메뉴를 생성하는 menu () 메소드를 제공합니다.

통사론

그만큼 menu() 방법은 두 가지 형태로 사용될 수 있습니다-

  • $ (selector, context) .menu (옵션) 메서드

  • $ (selector, context) .menu ( "action", params) 메서드

$ (선택기, 컨텍스트) .menu (옵션) 방법

메뉴 (옵션) 방법은 HTML 요소와 콘텐츠 처리 및 메뉴으로서 관리되어야한다는 것을 선언한다. 옵션이 포함 된 메뉴 항목의 모양과 동작을 지정하는 객체입니다 매개 변수입니다.

통사론

$(selector, context).menu (options);

Javascript 객체를 사용하여 한 번에 하나 이상의 옵션을 제공 할 수 있습니다. 제공 할 옵션이 두 개 이상인 경우 다음과 같이 쉼표를 사용하여 구분합니다.

$(selector, context).menu({option1: value1, option2: value2..... });

다음 표는 이 방법과 함께 사용할 수있는 다양한 옵션 을 나열합니다.

Sr. 아니. 옵션 및 설명
1 장애인

이 옵션을 true로 설정 하면 메뉴가 비활성화됩니다. 기본적으로 값은false.

Option - disabled

이 옵션을 true로 설정 하면 메뉴가 비활성화됩니다. 기본적으로 값은false.

Syntax

$( ".selector" ).menu (
   { disabled: true }
);
2 아이콘

이 옵션은 하위 메뉴의 아이콘을 설정합니다. 기본적으로 값은{ submenu: "ui-icon-carat-1-e" }.

Option - icons

이 옵션은 하위 메뉴의 아이콘을 설정합니다. 기본적으로 값은{ submenu: "ui-icon-carat-1-e" }.

Syntax

$( ".selector" ).menu (
   { icons: { submenu: "ui-icon-circle-triangle-e" } }
);
삼 메뉴

이 옵션은 하위 메뉴를 포함하여 메뉴 컨테이너 역할을하는 요소에 대한 선택기입니다. 기본적으로 값은ul.

Option - menus

이 옵션은 하위 메뉴를 포함하여 메뉴 컨테이너 역할을하는 요소에 대한 선택기입니다. 기본적으로 값은ul.

Syntax

$( ".selector" ).menu (
   { menus: "div" }
);
4 위치

이 옵션은 연관된 상위 메뉴 항목과 관련하여 하위 메뉴의 위치를 ​​설정합니다. 기본적으로 값은{ my: "left top", at: "right top" }.

Option - position

이 옵션은 연관된 상위 메뉴 항목과 관련하여 하위 메뉴의 위치를 ​​설정합니다. 기본적으로 값은{ my: "left top", at: "right top" }.

Syntax

$( ".selector" ).menu (
   { position: { my: "left top", at: "right-5 top+5" } }
);
5 역할

이 옵션은 메뉴 및 메뉴 항목에 사용되는 ARIA 역할을 사용자 정의하는 데 사용됩니다. 기본적으로 값은menu.

Option - role

이 옵션은 메뉴 및 메뉴 항목에 사용되는 ARIA 역할을 사용자 정의하는 데 사용됩니다. 기본적으로 값은menu.

WAI (Web Accessibility Initiative)의 일부인 Accessible Rich Internet Applications Suite (ARIA)는 웹 콘텐츠 및 웹 애플리케이션에보다 쉽게 ​​액세스 할 수 있도록하는 방법을 정의합니다. Ajax, HTML, JavaScript 및 관련 기술로 개발 된 동적 컨텐츠 및 고급 사용자 인터페이스 제어의 접근성을 향상시키는 데 사용됩니다. 자세한 내용은 ARIA 에서 확인할 수 있습니다.

Syntax

$( ".selector" ).menu (
   { role: null }
);

기본 기능

다음 예제는 메뉴 위젯 기능의 간단한 예제를 보여줍니다. menu() 방법.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-1">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. menuexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

위의 예에서는 탐색을위한 마우스 및 키보드 상호 작용이있는 테마 메뉴를 볼 수 있습니다.

아이콘 및 위치 사용

다음 예제는 두 가지 옵션의 사용법을 보여줍니다. icons, 및 position JqueryUI의 메뉴 기능에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-2">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. menuexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

위의 예에서는 하위 메뉴 목록에 아이콘 이미지를 적용하고 하위 메뉴 위치도 변경 한 것을 볼 수 있습니다.

$ (선택기, 컨텍스트) .menu ( "action", params) 메서드

메뉴 ( "액션"PARAMS) 방법은 활성화 / 비활성화 메뉴, 메뉴 요소에서 동작을 수행 할 수있다. 작업은 첫 번째 인수의 문자열로 지정됩니다 (예 : "disable"은 메뉴를 비활성화 함). 다음 표에서 전달할 수있는 조치를 확인하십시오.

통사론

$(selector, context).menu ("action", params);;

다음 표는 이 방법과 함께 사용할 수있는 다양한 작업 을 나열합니다.

Sr. 아니. 액션 및 설명
1 흐림 ([이벤트])

이 작업은 메뉴에서 포커스를 제거합니다. 활성 요소 스타일을 재설정 하여 메뉴의 흐림 이벤트를 트리거합니다 . 어디 이벤트 유형 인Event 메뉴가 흐려지는 원인을 나타냅니다.

Action - blur( [event ] )

이 작업은 메뉴에서 포커스를 제거합니다. 활성 요소 스타일을 재설정 하여 메뉴의 흐림 이벤트를 트리거합니다 . 어디 이벤트 유형 인Event 메뉴가 흐려지는 원인을 나타냅니다.

Syntax

$(".selector").menu( "blur" );
2 접기 ([이벤트])

이 작업은 현재 활성 하위 메뉴를 닫습니다. 어디 이벤트 유형 인Event 메뉴가 축소 된 원인을 나타냅니다.

Action - collapse( [event ] )

이 작업은 현재 활성 하위 메뉴를 닫습니다. 어디 이벤트 유형 인Event 메뉴가 축소 된 원인을 나타냅니다.

Syntax

$(".selector").menu( "collapse" );
삼 collapseAll ([이벤트] [, 모두])

이 작업은 열려있는 모든 하위 메뉴를 닫습니다.

Action - collapseAll( [event ] [, all ] )

이 작업은 열려있는 모든 하위 메뉴를 닫습니다. 어디-

  • 이벤트 유형Event 메뉴가 축소 된 원인을 나타냅니다.

  • 모두 유형입니다Boolean 모든 하위 메뉴를 닫아야하는지 아니면 트리거 이벤트의 대상이거나 포함하는 메뉴를 포함하여 아래의 하위 메뉴 만 닫아야하는지 여부를 나타냅니다.

Syntax

$(".selector").menu( "collapseAll", null, true );
4 멸하다()

이 작업은 메뉴 기능을 완전히 제거합니다. 이렇게하면 요소가 다시 초기화 이전 상태로 돌아갑니다. 이 메서드는 인수를 허용하지 않습니다.

Action - destroy()

이 작업은 메뉴 기능을 완전히 제거합니다. 이렇게하면 요소가 다시 초기화 이전 상태로 돌아갑니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "destroy" );
5 disable ()

이 작업은 메뉴를 비활성화합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - disable()

이 작업은 메뉴를 비활성화합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "disable" );
6 enable ()

이 작업은 메뉴를 활성화합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - enable()

이 작업은 메뉴를 활성화합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "enable" );
7 확장 ([이벤트])

이 작업은 현재 활성화 된 항목이있는 경우 아래에 하위 메뉴를 엽니 다. 어디 이벤트 유형 인Event 메뉴를 확장 한 원인을 나타냅니다.

Action - expand( [event ] )

이 작업은 현재 활성화 된 항목이있는 경우 아래에 하위 메뉴를 엽니 다. 어디 이벤트 유형 인Event 메뉴를 확장 한 원인을 나타냅니다.

Syntax

$(".selector").menu( "expand" );
8 초점 ([이벤트], 항목)

이 작업은 특정 메뉴 항목을 활성화하고 하위 메뉴가있는 경우 열기를 시작하며 메뉴의 포커스 이벤트를 트리거합니다. 어디 이벤트 유형 인Event초점을 맞추기 위해 메뉴를 트리거 한 원인을 나타냅니다. 및 항목은 초점 / 활성화하려면 메뉴 항목을 나타내는의 jQuery 개체입니다.

Action - focus( [event ], item )

이 작업은 특정 메뉴 항목을 활성화하고 하위 메뉴가있는 경우 열기를 시작하며 메뉴의 포커스 이벤트를 트리거합니다. 어디 이벤트 유형 인Event초점을 맞추기 위해 메뉴를 트리거 한 원인을 나타냅니다. 및 항목은 초점 / 활성화하려면 메뉴 항목을 나타내는의 jQuery 개체입니다.

Syntax

$(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
9 isFirstItem ()

이 작업은 현재 활성 메뉴 항목이 첫 번째 메뉴 항목인지 여부를 나타내는 부울 값을 반환합니다 . 이 메서드는 인수를 허용하지 않습니다.

Action - isFirstItem()

이 작업은 현재 활성 메뉴 항목이 첫 번째 메뉴 항목인지 여부를 나타내는 부울 값을 반환합니다 . 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "isFirstItem" );
10 isLastItem ()

이 작업은 현재 활성 메뉴 항목이 마지막 메뉴 항목인지 여부를 나타내는 부울 값을 반환합니다 . 이 메서드는 인수를 허용하지 않습니다.

Action - isLastItem()

이 작업은 현재 활성 메뉴 항목이 마지막 메뉴 항목인지 여부를 나타내는 부울 값을 반환합니다 . 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "isLastItem" );
11 다음 ([이벤트])

이 작업은 활성 상태를 다음 메뉴 항목에 위임합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Action - next( [event ] )

이 작업은 활성 상태를 다음 메뉴 항목에 위임합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Syntax

$(".selector").menu( "next" );
12 nextPage ([이벤트])

이 작업은 활성 상태를 스크롤 가능한 메뉴 하단 아래의 첫 번째 메뉴 항목으로 이동하거나 스크롤 할 수없는 경우 마지막 항목으로 이동합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Action - nextPage( [event ] )

이 작업은 활성 상태를 스크롤 가능한 메뉴 하단 아래의 첫 번째 메뉴 항목으로 이동하거나 스크롤 할 수없는 경우 마지막 항목으로 이동합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Syntax

$(".selector").menu( "nextPage" );
13 옵션 (optionName)

이 조치는 현재 지정된 optionName 과 연관된 값을 가져 옵니다 . 어디 이 Optionname는 타입이다String 가져올 옵션의 이름을 나타냅니다.

Action - option( optionName )

이 조치는 현재 지정된 optionName 과 연관된 값을 가져 옵니다 . 어디 이 Optionname는 타입이다String 가져올 옵션의 이름을 나타냅니다.

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 선택권()

이 작업은 현재 메뉴 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 개체를 가져옵니다.

Action - option()

이 작업은 현재 메뉴 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 개체를 가져옵니다.

Syntax

var options = $( ".selector" ).menu( "option" );
15 옵션 (optionName, value)

이 조치는 지정된 optionName과 연관된 메뉴 옵션의 값을 설정합니다. 어디 이 Optionname는 타입이다String설정할 옵션의 이름을 나타내며 값 은 Object 유형 이며 옵션에 설정할 값을 나타냅니다.

Action - option( optionName, value )

이 조치는 지정된 optionName과 연관된 메뉴 옵션의 값을 설정합니다. 어디 이 Optionname는 타입이다String설정할 옵션의 이름을 나타내며 값 은 Object 유형 이며 옵션에 설정할 값을 나타냅니다.

Syntax

$(".selector").menu( "option", "disabled", true );
16 옵션 (옵션)

이 작업은 메뉴에 대한 하나 이상의 옵션을 설정합니다. 어디 옵션 형이다Object 설정할 옵션-값 쌍의 맵을 나타냅니다.

Action - option( options )

이 작업은 메뉴에 대한 하나 이상의 옵션을 설정합니다. 어디 옵션 형이다Object 설정할 옵션-값 쌍의 맵을 나타냅니다.

Syntax

$(".selector").menu( "option", { disabled: true } );
17 이전 ([이벤트])

이 작업은 활성 상태를 이전 메뉴 항목으로 이동합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Action - previous( [event ] )

이 작업은 활성 상태를 이전 메뉴 항목으로 이동합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Syntax

$(".selector").menu( "previous" );
18 previousPage ([이벤트])

이 작업은 활성 상태를 스크롤 가능한 메뉴 상단 위의 첫 번째 메뉴 항목으로 이동하거나 스크롤 할 수없는 경우 첫 번째 항목으로 이동합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Action - previousPage( [event ] )

이 작업은 활성 상태를 스크롤 가능한 메뉴 상단 위의 첫 번째 메뉴 항목으로 이동하거나 스크롤 할 수없는 경우 첫 번째 항목으로 이동합니다. 어디 이벤트 유형 인Event 초점이 이동하게 된 원인을 나타냅니다.

Syntax

$(".selector").menu( "previousPage" );
19 새롭게 하다()

이 작업은 아직 초기화되지 않은 하위 메뉴 및 메뉴 항목을 초기화합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - refresh()

이 작업은 아직 초기화되지 않은 하위 메뉴 및 메뉴 항목을 초기화합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "refresh" );
20 선택 ([이벤트])

이 작업은 현재 활성 메뉴 항목을 선택하고 모든 하위 메뉴를 축소하며 메뉴의 선택 이벤트를 트리거합니다. 어디 이벤트 유형 인Event 선택을 유발 한 원인을 나타냅니다.

Action - select( [event ] )

이 작업은 현재 활성 메뉴 항목을 선택하고 모든 하위 메뉴를 축소하며 메뉴의 선택 이벤트를 트리거합니다. 어디 이벤트 유형 인Event 선택을 유발 한 원인을 나타냅니다.

Syntax

$(".selector").menu( "select" );
21 위젯 ()

이 작업은 메뉴가 포함 된 jQuery 객체를 반환합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - widget()

이 작업은 메뉴가 포함 된 jQuery 객체를 반환합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").menu( "widget" );

다음 예는 위 표에 제공된 조치를 사용하는 방법을 보여줍니다.

비활성화 방법 사용

다음 예제는 disable () 메서드 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#menu-3" ).menu();
            $( "#menu-3" ).menu("disable");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-3">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
      </ul>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. menuexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

위의 예에서 메뉴가 비활성화 된 것을 볼 수 있습니다.

초점 및 축소 사용 모든 방법

다음 예제는 focus () 및 collapseAll 메서드 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu(
               "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-4">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. menuexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

위의 예에서 초점이 마지막 메뉴 항목에 있음을 알 수 있습니다. 이제 하위 메뉴를 확장하고 마우스가 하위 메뉴를 벗어나면 하위 메뉴가 닫힙니다.

메뉴 요소에 대한 이벤트 관리

이전 섹션에서 본 메뉴 (옵션) 메소드 외에도 JqueryUI는 특정 이벤트에 대해 트리거되는 이벤트 메소드를 제공합니다. 이러한 이벤트 방법은 다음과 같습니다.

Sr. 아니. 이벤트 방법 및 설명
1 흐림 (이벤트, UI)

이 이벤트는 메뉴가 포커스를 잃을 때 트리거됩니다.

Event - blur(event, ui)

이 이벤트는 메뉴가 포커스를 잃을 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 이며 현재 활성 메뉴 항목을 나타냅니다.

Syntax

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2 생성 (이벤트, UI)

이 이벤트는 메뉴가 생성 될 때 트리거됩니다.

Event - create(event, ui)

이 이벤트는 메뉴가 생성 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
삼 포커스 (이벤트, UI)

이 이벤트는 메뉴가 포커스를 얻거나 메뉴 항목이 활성화 될 때 트리거됩니다.

Event - focus(event, ui)

이 이벤트는 메뉴가 포커스를 얻거나 메뉴 항목이 활성화 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 이며 현재 활성 메뉴 항목을 나타냅니다.

Syntax

$( ".selector" ).menu({
   focus: function( event, ui ) {}
});
4 선택 (이벤트, UI)

이 이벤트는 메뉴 항목이 선택 될 때 트리거됩니다.

Event - select(event, ui)

이 이벤트는 메뉴 항목이 선택 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 이며 현재 활성 메뉴 항목을 나타냅니다.

Syntax

$( ".selector" ).menu({
   select: function( event, ui ) {}
});

예

다음 예제는 메뉴 위젯 기능에 대한 이벤트 메소드 사용을 보여줍니다. 이 예제는 이벤트 생성 , 흐림 및 초점 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-5" ).menu({
               create: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Create event<br>" );
               },
               blur: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "Blur event<br>" );
               },
               focus: function( event, ui ) {
                  var result = $( "#result" );
                  result.append( "focus event<br>" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <ul id = "menu-5">
         <li><a href = "#">Spring</a></li>
         <li><a href = "#">Hibernate</a></li>
         <li><a href = "#">JSF</a></li>
         <li><a href = "#">HTML5</a></li>
         <li><a href = "#">Java</a>
            <ul>
               <li><a href = "#">Java IO</a></li>
               <li><a href = "#">Swing</a></li>
               <li><a href = "#">Jaspr Reports</a></li>
            </ul>
         </li>
      </ul>
      <span id = "result"></span>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. menuexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

위의 예에서는 트리거 된 이벤트를 기반으로 메시지를 인쇄하고 있습니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved