js STUDIO

Menu 1.9 追加

マウスとキーボードから操作できるテーマ別のメニュー機能を提供します。

メニューは親と子の関係になっている正しいマークアップの要素から生成され、各メニュー項目はアンカーリンクを持ちます。 最も使用される要素は(<ul>)要素です。 

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

もし、<ul>と<li>以外の構造で使用する場合は、メニューとメニュー項目に使用する要素をmenusオプションを使用して それぞれ2つを指定する必要があります。

メニュー項目によっては、ui-state-disabledクラスを追加されることによって、無効化されます。 メニューにアイコンを追加したい場合は、下記のようにしてマークアップに追加してください。 メニューは自動的にアイコン無しの項目にパディングを追加します。 

<ul id="menu">
	<li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li>
</ul>

menuはいくつかの機能的なCSSを必要とします。 このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。

キーボード操作のサポートについて

文字をタイピングすると、その文字で始まるタイトルの最初の項目にフォーカスを移動します。 同じ文字入力を繰り返すと次のマッチする項目に移動するサイクルを繰り返します。 1秒以内により多くの文字をタイピングすれば、マッチする条件をその文字分絞り込みます。 無効化されているメニュー項目にマッチしても、その項目のアクションは動作しません。

ENTER/SPACE
フォーカスが当たっているメニュー項目のアクションを実行します。 その項目のサブメニューを開く事も可能です。
[↑]
前のメニュー項目にフォーカスを移動します。
[↓]
次のメニュー項目にフォーカスを移動します。
[→]
サブメニューが利用可能であれば、それを開きます。
[←]
サブメニュー内にフォーカスがあればそれを閉じ、親メニューに移動します。 サブメニュー内で無ければ、何もしません。
ESCAPE
サブメニュー内にフォーカスがあればそれを閉じ、親メニューに移動します。 サブメニュー内で無ければ、何もしません。

依存関係

オプション 説明
disabled

型：Boolean
初期値：false

trueを指定すると、メニューを無効化します。 

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

// getter
var disabled = $( ".selector" ).menu( "option", "disabled" );

// setter
$( ".selector" ).menu( "option", "disabled", true );
icons

型：Object
初期値：{ submenu: "ui-icon-carat-1-e" }

サブメニューに使用するアイコンを指定します。 jQuery UI CSS Frameworkの定義にマッチするアイコンを指定します。

menus

型：String
初期値："ul"

サブメニューも含め、メニューとして扱う要素セレクタを指定します。

position

型：Object
初期値：{my: "left top", at: "right top"}

サブメニューの親メニューに対しての相対的な位置を指定します。 デフォルトでは親メニューに対して位置ですが、状況に応じて別の要素に変更することも可能です。 位置指定の詳細は、jQuery UI Positionを参照してください。

role

型：String
初期値："menu"

メニューとメニュー項目で使用されているARIA roleをカスタマイズします。 デフォルトの"menu"では、メニュー項目に"menuitem"が適用されます。 roleオプションに"listbox"を設定すれば、メニュー項目には"option"が使用されるよになります。 nullが設定されれば、roleには何も適用されず、これは別の要素がフォーカスを保持した状態で メニューが制御されている際に有用です。

メソッド説明
blur( [event ] )

メニューからフォーカスが消え、各要素のアクティブスタイルがリセットされて blurイベントをトリガします。

event
型:Event
トリガされたblurイベントです。
collapse( [event ] )

現在アクティブなサブメニューを閉じます。

event
型:Event
トリガされたcollapseイベントです。
collapseAll( [event ] [, all ] )

展開されている全てのサブメニューを閉じます。

event
型:Event
トリガされたcollapseイベントです。
all
型:Boolean
全てのサブメニューを閉じるか、 またはevent引数のevent.targetを包むメニューだけを閉じるかを指定します。
destroy()

メニューの機能を完全に削除します。 

$( ".selector" ).tabs( "destroy" );
disable()

メニューを無効化します。

enable()

メニューを有効にします。

expand([event])
event
型:Event
トリガされたexpandイベントです。

現在のメニューにサブメニューがあれば、それを展開します。

focus( [event ], item )
event
型:Event
トリガされたfocusイベントです。
item
型:jQuery
フォーカスするメニュー項目を指定します。

指定したメニュー項目をアクティブに(フォーカス)し、サブメニューがあればそれを開き、 フォーカスイベントをトリガします。

isFirstItem()

戻り値:Boolean

アクティブ(フォーカスされている)メニュー項目が、そのメニュー内の最初のメニューか否かを確認します。

isLastItem()

戻り値:Boolean

アクティブ(フォーカスされている)メニュー項目が、そのメニュー内の最後のメニューか否かを確認します。

next( [event ] )
[event]
型:Event
トリガされたフォーカス移動イベントです。

次のメニュー項目をアクティブ(フォーカス)にします。

nextPage( [event ] )
[event]
型:Event
トリガされたフォーカス移動イベントです。

スクロールできる領域の次のメニューの最初の項目をアクティブ(フォーカス)にします。 次のメニューが無ければ最後の項目がアクティブになります。

option( optionName )

戻り値：Object

optionNameに指定したオプションの現在の値を取得します。

optionName
型：String
取得したいオプションの名前を指定します。
option()

戻り値：PlainObject

オプションの各キーと値がペアとなったオブジェクトを返します。

option( optionName, value )

引数のoptionNameのオプションに値を設定します。

optionName
型：String
設定したいオプションの名前を指定します。
value
型：Object
設定したい値を指定します。
option( options )

オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。

option
型：Object
設定したいオプションのキーと名前のペアを指定します。
previous( [event ] )
[event]
型:Event
トリガされたフォーカス移動イベントです。

前のメニュー項目をアクティブ(フォーカス)にします。

previousPage( [event ] )
[event]
型:Event
トリガされたフォーカス移動イベントです。

スクロールできる領域の前のメニューの最初の項目をアクティブ(フォーカス)にします。 前のメニューが無ければ最初の項目がアクティブになります。

refresh()

最初に初期化された状態ではないメニューとメニュー項目を初期化します。 新しいメニュー項目やサブメニューはメニューに追加されるか、またはそっくり置き換えられます。

select( [event ] )
[event]
型:Event
トリガされたselectイベントです。

現在のアクティブなメニュー項目を選択、全てのサブメニューを展開し、 メニューのselectイベントをトリガします。

widget()

戻り値：Object

メニューを含めたjQueryオブジェクトを返します。

イベント 説明
blur( event, ui )

型：menublur

メニューがフォーカスを失った際にトリガします。

ui.item
現在アクティブなメニュー項目です。 
$( ".selector" ).menu({
    blur: function( event, ui ) {}
});

$( ".selector" ).on( "menublur", function( event, ui ) {} );
create( event, ui )

型：menucreate

メニューが生成された際にトリガされます。

focus( event, ui )

型：menufocus

メニューがフォーカスを得た、またはいずれかのメニュー項目がアクティブになった際にトリガされます。

ui.item
型:jQuery
現在アクティブなメニュー項目です。
select( event, ui )

型：menuselect

メニュー項目が選択された際にトリガされます。

ui.item
型:jQuery
現在アクティブなメニュー項目です。

 Back to top

© 2010 - 2017 STUDIO KINGDOM