Jqueryui-menu

提供：Dev Guides
移動先:案内、検索

JqueryUI-メニュー

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

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

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

構文

  • menu（）*メソッドは2つの形式で使用できます-
  • link：/jqueryui/jqueryui_menu＃menu_options [$（selector、context）.menu（options）]メソッド
  • link：/jqueryui/jqueryui_menu＃menu_methods [$（selector、context）.menu（ "action"、params）]メソッド

[menu_options]#

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

_menu（options）_メソッドは、HTML要素とそのコンテンツをメニューとして扱い、管理する必要があることを宣言します。 _options_パラメーターは、関連するメニュー項目の外観と動作を指定するオブジェクトです。

構文

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

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

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

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description
1

disabled

このオプションを_true_に設定すると、メニューが無効になります。 デフォルトでは、その値は false です。

オプション-無効

このオプションを_true_に設定すると、メニューが無効になります。 デフォルトでは、その値は false です。

構文 

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

icons

このオプションは、サブメニューのアイコンを設定します。 デフォルトでは、その値は \ {サブメニュー： "ui-icon-carat-1-e"} です。

オプション-アイコン

このオプションは、サブメニューのアイコンを設定します。 デフォルトでは、その値は \ {サブメニュー： "ui-icon-carat-1-e"} です。

構文 

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

menus

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

オプション-メニュー

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

構文 

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

position

このオプションは、関連する親メニュー項目に対するサブメニューの位置を設定します。 デフォルトでは、その値は \ {my： "left top"、at： "right top"} です。

オプション-位置

このオプションは、関連する親メニュー項目に対するサブメニューの位置を設定します。 デフォルトでは、その値は \ {my： "left top"、at： "right top"} です。

構文 

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

role

このオプションは、メニューおよびメニュー項目に使用されるARIAロールをカスタマイズするために使用されます。 デフォルトでは、その値は menu です。

オプション-役割

このオプションは、メニューおよびメニュー項目に使用されるARIAロールをカスタマイズするために使用されます。 デフォルトでは、その値は menu です。

'_Web Accessibility Initiative（WAI）の一部であるAccessible Rich Internet Applications Suite（ARIA）は、WebコンテンツとWebアプリケーションをよりアクセスしやすくする方法を定義しています。 Ajax、HTML、JavaScript、および関連技術で開発された動的コンテンツと高度なユーザーインターフェイスコントロールのアクセシビリティを向上させるために使用されます。 詳細については、http：//www.w3.org/WAI/GL/wiki/Using_ARIA_menus [ARIA]をご覧ください。_

構文 

$( ".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 に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

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

アイコンと位置の使用

次の例は、JqueryUIのメニュー関数での2つのオプション icons および position の使用法を示しています。 

<!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 に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

上記の例では、サブメニューリストにアイコン画像を適用し、サブメニューの位置を変更したことがわかります。

[menu_methods]#

$（セレクター、コンテキスト）.menu（ "action"、params）メソッド

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

構文

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

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-

Sr.No. Action & Description
1

blur( [event )]

このアクションは、メニューからフォーカスを削除します。 アクティブな要素スタイルをリセットすることにより、メニューの_blur_イベントをトリガーします。 _event_のタイプは Event で、メニューのぼかしをトリガーしたものを表します。

アクション-blur（[event]）

このアクションは、メニューからフォーカスを削除します。 アクティブな要素スタイルをリセットすることにより、メニューの_blur_イベントをトリガーします。 _event_のタイプは Event で、メニューのぼかしをトリガーしたものを表します。

構文 

$(".selector").menu( "blur" );
2

collapse( [event )]

このアクションは、現在アクティブなサブメニューを閉じます。 _event_のタイプは Event であり、メニューの折りたたみをトリガーしたものを表します。

アクション-collapse（[event]）

このアクションは、現在アクティブなサブメニューを閉じます。 _event_のタイプは Event であり、メニューの折りたたみをトリガーしたものを表します。

構文 

$(".selector").menu( "collapse" );
3

collapseAll( [event [, all ] )]

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

アクション-collapseAll（[event] [、all]）

このアクションは、開いているすべてのサブメニューを閉じます。 どこ-

  • _event_は Event タイプで、メニューの折りたたみをトリガーしたものを表します
  • _all_のタイプは Boolean すべてのサブメニューを閉じるか、トリガーイベントのターゲットであるか、ターゲットを含むメニューを含む下のサブメニューのみを閉じるかを示します。

構文 

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

destroy()

このアクションにより、メニュー機能が完全に削除されます。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

アクション-destroy（）

このアクションにより、メニュー機能が完全に削除されます。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

構文 

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

disable()

このアクションはメニューを無効にします。 このメソッドは引数を取りません。

アクション-disable（）

このアクションはメニューを無効にします。 このメソッドは引数を取りません。

構文 

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

enable()

このアクションにより、メニューが有効になります。 このメソッドは引数を取りません。

アクション-enable（）

このアクションにより、メニューが有効になります。 このメソッドは引数を取りません。

構文 

$(".selector").menu( "enable" );
7

expand( [event )]

このアクションは、現在アクティブなアイテムが存在する場合、その下にサブメニューを開きます。 _event_のタイプは Event で、メニューの展開をトリガーしたものを表します。

アクション-expand（[event]）

このアクションは、現在アクティブなアイテムが存在する場合、その下にサブメニューを開きます。 _event_のタイプは Event で、メニューの展開をトリガーしたものを表します。

構文 

$(".selector").menu( "expand" );
8

focus( [event, item )]

このアクションは、特定のメニュー項目をアクティブにし、サブメニューがあればそれを開き、メニューのフォーカスイベントをトリガーします。 _event_のタイプは Event であり、フォーカスを獲得するためにメニューをトリガーしたものを表します。 _item_は、フォーカス/アクティブ化するメニュー項目を表すjQueryオブジェクトです。

アクション-focus（[​​event]、item）

このアクションは、特定のメニュー項目をアクティブにし、サブメニューがあればそれを開き、メニューのフォーカスイベントをトリガーします。 _event_のタイプは Event であり、フォーカスを獲得するためにメニューをトリガーしたものを表します。 _item_は、フォーカス/アクティブ化するメニュー項目を表すjQueryオブジェクトです。

構文 

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

isFirstItem()

このアクションは、現在のアクティブなメニュー項目が最初のメニュー項目であるかどうかを示す_boolean_値を返します。 このメソッドは引数を取りません。

アクション-isFirstItem（）

このアクションは、現在のアクティブなメニュー項目が最初のメニュー項目であるかどうかを示す_boolean_値を返します。 このメソッドは引数を取りません。

構文 

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

isLastItem()

このアクションは、現在のアクティブなメニュー項目が最後のメニュー項目であるかどうかを示す_boolean_値を返します。 このメソッドは引数を取りません。

アクション-isLastItem（）

このアクションは、現在のアクティブなメニュー項目が最後のメニュー項目であるかどうかを示す_boolean_値を返します。 このメソッドは引数を取りません。

構文 

$(".selector").menu( "isLastItem" );
11

next( [event )]

このアクションは、アクティブ状態を次のメニュー項目に委任します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

アクション-next（[event]）

このアクションは、アクティブ状態を次のメニュー項目に委任します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

構文 

$(".selector").menu( "next" );
12

nextPage( [event )]

このアクションは、アクティブな状態をスクロール可能なメニューの一番下の最初のメニュー項目に移動するか、スクロールできない場合は最後の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

アクション-nextPage（[event]）

このアクションは、アクティブな状態をスクロール可能なメニューの一番下の最初のメニュー項目に移動するか、スクロールできない場合は最後の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

構文 

$(".selector").menu( "nextPage" );
13

option( optionName )

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

アクション-option（optionName）

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

構文 

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

option()

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

アクション-option（）

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

構文 

var options = $( ".selector" ).menu( "option" );
15

option( optionName, value )

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

アクション-option（optionName、value）

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

構文 

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

option( options )

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

アクション-オプション（オプション）

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

構文 

$(".selector").menu( "option", { disabled: true } );
17

previous( [event )]

このアクションは、アクティブ状態を前のメニュー項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

アクション-previous（[event]）

このアクションは、アクティブ状態を前のメニュー項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

構文 

$(".selector").menu( "previous" );
18

previousPage( [event )]

このアクションは、アクティブ状態を、スクロール可能なメニューの上部の最初のメニュー項目またはスクロールできない場合は最初の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

アクション-previousPage（[event]）

このアクションは、アクティブ状態を、スクロール可能なメニューの上部の最初のメニュー項目またはスクロールできない場合は最初の項目に移動します。 _event_のタイプは Event であり、フォーカスの移動をトリガーしたものを表します。

構文 

$(".selector").menu( "previousPage" );
19

refresh()

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

アクション-refresh（）

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

構文 

$(".selector").menu( "refresh" );
20

select( [event )]

このアクションは、現在アクティブなメニュー項目を選択し、すべてのサブメニューを折りたたみ、メニューの選択イベントをトリガーします。 _event_のタイプは Event で、選択をトリガーしたものを表します。

アクション-select（[event]）

このアクションは、現在アクティブなメニュー項目を選択し、すべてのサブメニューを折りたたみ、メニューの選択イベントをトリガーします。 _event_のタイプは Event で、選択をトリガーしたものを表します。

構文 

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

widget()

このアクションは、メニューを含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

アクション-ウィジェット（）

このアクションは、メニューを含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

構文 

$(".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 に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

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

focusおよび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 に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、フォーカスが最後のメニュー項目にあることがわかります。 ここでサブメニューを展開し、マウスがサブメニューを離れると、サブメニューが閉じます。

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

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

Sr.No. Event Method & Description
1

blur(event, ui)

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

イベント-blur（event、ui）

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

構文 

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

create(event, ui)

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

イベント-create（event、ui）

このイベントは、メニューが作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

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

focus(event, ui)

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

イベント-focus（event、ui）

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

構文 

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

select(event, ui)

このイベントは、メニュー項目が選択されるとトリガーされます。

イベント-select（event、ui）

このイベントは、メニュー項目が選択されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型であり、現在アクティブなメニュー項目を表します。

構文 

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

例

次の例は、メニューウィジェット機能のイベントメソッドの使用方法を示しています。 この例は、create _、 blur 、 focus_イベントの使用方法を示しています。 

<!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 に保存し、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

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

「https://www.finddevguides.com/index.php?title=Jqueryui-menu&oldid=2342」から取得
Powered by MediaWiki