JqueryUI-メニュー

メニューウィジェットは通常、ポップアップメニューを備えたメインメニューバーで構成されます。ポップアップメニューのアイテムには、多くの場合、サブポップアップメニューがあります。親子関係が維持されている限り（<ul>または<ol>を使用）、マークアップ要素を使用してメニューを作成できます。各メニュー項目にはアンカー要素があります。

jQueryUIのメニューウィジェットは、インラインメニューやポップアップメニューに使用したり、より複雑なメニューシステムを構築するためのベースとして使用したりできます。たとえば、カスタム配置でネストされたメニューを作成できます。

jQueryUIは、メニューを作成するためのmenu（）メソッドを提供します。

構文

ザ・ menu() メソッドは2つの形式で使用できます-

  • $（セレクター、コンテキスト）.menu（オプション）メソッド

  • $（selector、context）.menu（ "action"、params）メソッド

$（セレクター、コンテキスト）.menu（オプション）メソッド

メニュー（オプション）メソッドは、HTML要素とその内容がメニューとして扱われ、管理されるべきであることを宣言します。オプション関連するメニュー項目の外観と動作を指定するオブジェクトであるパラメータ。

構文

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

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供するオプションが複数ある場合は、次のようにコンマを使用してそれらを区切ります-

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

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
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" } }
);
3 メニュー

このオプションは、サブメニューを含むメニューコンテナとして機能する要素のセレクターです。デフォルトでは、その値は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。

Web Accessibility Initiative（WAI）の一環として、Accessible Rich Internet Applications Suite（ARIA）は、WebコンテンツとWebアプリケーションをよりアクセスしやすくする方法を定義しています。これは、動的コンテンツのアクセシビリティと、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をサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、ナビゲーション用のマウスとキーボードの相互作用を備えたテーマ設定可能なメニューを見ることができます。

アイコンと位置の使用

次の例は、2つのオプションの使用法を示しています 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（ "アクション"、params）メソッド

メニュー（「アクション」、paramsは）方法は、このようなメニューを有効/無効などのメニュー要素にアクションを実行することができます。アクションは最初の引数で文字列として指定されます（たとえば、「無効」はメニューを無効にします）。次の表で、渡すことができるアクションを確認してください。

構文

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

次の表に、この方法で使用できるさまざまなアクションを示します。

シニア番号 アクションと説明
1 ぼかし（[イベント]）

このアクションにより、メニューからフォーカスが削除されます。アクティブな要素スタイルをリセットすることにより、メニューのぼかしイベントをトリガーします。どこでイベントが型でありますEvent メニューがぼやけるきっかけとなったものを表します。

Action - blur( [event ] )

このアクションにより、メニューからフォーカスが削除されます。アクティブな要素スタイルをリセットすることにより、メニューのぼかしイベントをトリガーします。どこでイベントが型でありますEvent メニューがぼやけるきっかけとなったものを表します。

Syntax

$(".selector").menu( "blur" );
2 崩壊（[イベント]）

このアクションは、現在アクティブなサブメニューを閉じます。どこでイベントが型でありますEvent メニューが折りたたまれた原因を表します。

Action - collapse( [event ] )

このアクションは、現在アクティブなサブメニューを閉じます。どこでイベントが型でありますEvent メニューが折りたたまれた原因を表します。

Syntax

$(".selector").menu( "collapse" );
3 折りたたみすべて（[イベント] [、すべて]）

このアクションにより、開いているすべてのサブメニューが閉じます。

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 expand（[イベント]）

このアクションにより、現在アクティブなアイテムの下にあるサブメニューが開きます（存在する場合）。どこでイベントが型でありますEvent メニューを展開するきっかけとなったものを表します。

Action - expand( [event ] )

このアクションにより、現在アクティブなアイテムの下にあるサブメニューが開きます（存在する場合）。どこでイベントが型でありますEvent メニューを展開するきっかけとなったものを表します。

Syntax

$(".selector").menu( "expand" );
8 focus（[​​イベント]、アイテム）

このアクションは、特定のメニュー項目をアクティブにし、サブメニューが存在する場合はそれを開き始め、メニューのフォーカスイベントをトリガーします。どこでイベントが型であります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 next（[イベント]）

このアクションは、アクティブ状態を次のメニュー項目に委任します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Action - next( [event ] )

このアクションは、アクティブ状態を次のメニュー項目に委任します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Syntax

$(".selector").menu( "next" );
12 nextPage（[イベント]）

このアクションは、アクティブ状態をスクロール可能なメニューの下部の下にある最初のメニュー項目、またはスクロールできない場合は最後の項目に移動します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Action - nextPage( [event ] )

このアクションは、アクティブ状態をスクロール可能なメニューの下部の下にある最初のメニュー項目、またはスクロールできない場合は最後の項目に移動します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Syntax

$(".selector").menu( "nextPage" );
13 option（optionName）

このアクションは、指定されたoptionNameに現在関連付けられている値を取得します。どこにオプション名は型でありますString 取得するオプションの名前を表します。

Action - option( optionName )

このアクションは、指定されたoptionNameに現在関連付けられている値を取得します。どこにオプション名は型でありますString 取得するオプションの名前を表します。

Syntax

var isDisabled = $( ".selector" ).menu( "option", "disabled" );
14 オプション（）

このアクションは、現在のメニューオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。

Action - option()

このアクションは、現在のメニューオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。

Syntax

var options = $( ".selector" ).menu( "option" );
15 option（optionName、value）

このアクションは、指定されたoptionNameに関連付けられたメニューオプションの値を設定します。どこにオプション名は型でありますString設定するオプションの名前を表し、値はObject型であり、オプションに設定する値を表します。

Action - option( optionName, value )

このアクションは、指定されたoptionNameに関連付けられたメニューオプションの値を設定します。どこにオプション名は型でありますString設定するオプションの名前を表し、値はObject型であり、オプションに設定する値を表します。

Syntax

$(".selector").menu( "option", "disabled", true );
16 option（options）

このアクションは、メニューの1つ以上のオプションを設定します。どこにオプション型でありますObject 設定するオプションと値のペアのマップを表します。

Action - option( options )

このアクションは、メニューの1つ以上のオプションを設定します。どこにオプション型でありますObject 設定するオプションと値のペアのマップを表します。

Syntax

$(".selector").menu( "option", { disabled: true } );
17 previous（[イベント]）

このアクションにより、アクティブ状態が前のメニュー項目に移動します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Action - previous( [event ] )

このアクションにより、アクティブ状態が前のメニュー項目に移動します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Syntax

$(".selector").menu( "previous" );
18 previousPage（[イベント]）

このアクションは、アクティブ状態をスクロール可能なメニューの上部にある最初のメニュー項目、またはスクロールできない場合は最初の項目に移動します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Action - previousPage( [event ] )

このアクションは、アクティブ状態をスクロール可能なメニューの上部にある最初のメニュー項目、またはスクロールできない場合は最初の項目に移動します。どこでイベントが型でありますEvent フォーカスが移動するきっかけとなったものを表します。

Syntax

$(".selector").menu( "previousPage" );
19 refresh（）

このアクションは、まだ初期化されていないサブメニューとメニュー項目を初期化します。このメソッドは引数を受け入れません。

Action - refresh()

このアクションは、まだ初期化されていないサブメニューとメニュー項目を初期化します。このメソッドは引数を受け入れません。

Syntax

$(".selector").menu( "refresh" );
20 select（[イベント]）

このアクションは、現在アクティブなメニュー項目を選択し、すべてのサブメニューを折りたたんで、メニューの選択イベントをトリガーします。どこでイベントが型であります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 javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

上記の例では、メニューが無効になっていることがわかります。

フォーカスとcollapseAllメソッドの使用

次の例は、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 javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

上記の例では、最後のメニュー項目に焦点が当てられていることがわかります。次にサブメニューを展開し、マウスがサブメニューを離れると、サブメニューが閉じます。

メニュー要素のイベント管理

前のセクションで見たメニュー（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドを以下に示します-

シニア番号 イベントの方法と説明
1 ぼかし（イベント、UI）

このイベントは、メニューがフォーカスを失ったときにトリガーされます。

Event - blur(event, ui)

このイベントは、メニューがフォーカスを失ったときにトリガーされます。ここで、eventのタイプはEventであり、uiのタイプはObjectであり、現在アクティブなメニュー項目を表します。

Syntax

$( ".selector" ).menu({
   blur: function( event, ui ) {}
});
2 create（event、ui）

このイベントは、メニューが作成されたときにトリガーされます。

Event - create(event, ui)

このイベントは、メニューが作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。

Syntax

$( ".selector" ).menu({
   create: function( event, ui ) {}
});
3 focus（event、ui）

このイベントは、メニューがフォーカスを取得したとき、またはメニュー項目がアクティブになったときにトリガーされます。

Event - focus(event, ui)

このイベントは、メニューがフォーカスを取得したとき、またはメニュー項目がアクティブになったときにトリガーされます。ここで、eventのタイプはEventであり、uiのタイプはObjectであり、現在アクティブなメニュー項目を表します。

Syntax

$( ".selector" ).menu({
   focus: function( event, ui ) {}
});
4 select（event、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 javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

上記の例では、トリガーされたイベントに基づいてメッセージを出力しています。

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