constructor(element: any, options?: any): Menu
Initializes a new instance of the Menu class.
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
The JavaScript object containing initialization data for the control.
コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は **false**です。
ユーザーがコントロールの入力要素をクリックしたときに実行する操作を決定する値を取得または設定します。
ほとんどのドロップダウンコントロールに対して、このプロパティはデフォルトで Select に設定されます。これにより、ユーザーはマウスでテキストの一部を選択できます。
編集不可のテキストを表示するドロップダウンコントロール（MultiSelectなど）の場合、このプロパティはデフォルトでToggleに設定されます。
Gets or sets a value that determines whether the menu (and any sub-menus) should close automatically when the mouse leaves the menu.
This property is applicable only when the openOnHover is set to true.
このプロパティのデフォルト値は**true**です。
Gets or sets the command object that determines whether menu items should be enabled and what actions they should perform when selected.
Command objects implement the ICommand interface.
You can also set commands on individual items using the commandPath property.
このプロパティのデフォルト値は**null**です。
Gets or sets the name of the property that contains a parameter to use with the command specified by the commandPath property.
Command objects implement the ICommand interface.
このプロパティのデフォルト値は**null**です。
ユーザーが項目をクリックしたときに実行されるコマンドを含むプロパティの名前を取得または設定します。
Command objects implement the ICommand interface.
This property overrides the command property for specific menu items.
このプロパティのデフォルト値は**null**です。
コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。
このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。ドロップダウン要素は、コントロール自体の子としてではなく、ドキュメントボディの子として表示され、親コントロールに基づいてCSSセレクタを使用することができないためです。
ドロップダウンリストの項目が作成されると発生するイベント。
このイベントを使用して、リスト項目のHTMLを変更できます。 詳細については、ListBox.formatItem イベントを参照してください。
ユーザーがマウスホイールで現在選択されている項目を変更できるかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
Gets or sets the HTML text shown in the Menu element.
The default value for this property is an empty string (**''**).
コントロールの入力要素に表示される値を取得するために使用するプロパティ名を取得または設定します。
このプロパティのデフォルト値は**nullです。この場合、コントロールは、ドロップダウンリストの選択項目と同じ内容を入力要素に表示します。
入力要素に表示される値をドロップダウンリストに表示される値とは切り離す場合は、 このプロパティを使用します。たとえば、入力要素には項目名を表示し、 ドロップダウンリストには追加情報を表示することができます。
コントロールによってホストされているHTML入力要素を取得します。
このプロパティは、入力要素の属性をカスタマイズする場合に使用します。
コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。
このプロパティのデフォルト値は**text**です。
ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
Gets or sets a value that determines whether this Menu should act as a split button instead of a regular menu.
このプロパティのデフォルト値は **false**です。
The difference between regular menus and split buttons is what happens when the user clicks the menu header. In regular menus, clicking the header shows or hides the menu options. In split buttons, clicking the header raises the itemClicked event and/or invokes the command associated with the last option selected by the user as if the user had picked the item from the drop-down list.
If you want to differentiate between clicks on menu items and the button part of a split button, check the value of the isDroppedDown property of the event sender. If that is true, then a menu item was clicked; if it is false, then the button was clicked.
For example, the code below implements a split button that uses the drop-down list only to change the default item/command, and triggers actions only when the button is clicked:
```typescript import { Menu } from '@grapecity/wijmo.input'; let theMenu = new Menu('#theMenu', { isButton: true, itemClicked: s => { if (!s.isDroppedDown) { // header/button click console.log('running ', s.selectedItem.browser); } }, selectedIndexChanged: s => { // update header text if (s.selectedItem != null) { s.header = 'Run ' + s.selectedItem.browser; } }, selectedValuePath: 'id', displayMemberPath: 'browser', itemsSource: [ { id: 0, browser: 'Chrome' }, { id: 1, browser: 'Edge' }, { id: 2, browser: 'Firefox' }, { id: 3, browser: 'Internet Explorer' } ], }); ```
ドロップダウンリストに項目をプレーンテキストとして表示するか、HTMLとして表示するかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
入力要素の内容をitemsSource コレクション内の項目に 制限するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は、ComboBoxコントロールの場合false、AutoCompleteコントロールおよびInputTimeコントロールの場合はtrueです。
ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
コントロール値をnull以外の値に設定する必要があるか、 それとも（コントロールのコンテンツを削除することで）nullに設定できるかを 決定する値を取得または設定します。
このプロパティは、ComboBox、InputDate、InputTime、InputDateTime、 およInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoCompleteコントロールに対してデフォルトでfalseに設定されます。
ドロップダウンリストに表示される値のカスタマイズに使用される関数を取得または設定します。 この関数は、2つの引数として項目インデックスとデフォルトのテキストまたはHTMLを 受け取り、表示する新しいテキストまたはHTMLを返します。
書式設定関数がスコープ（意味のある'this'値など）を必要とする場合は、 'bind'関数を使用してフィルタを設定し、 'this'オブジェクトを指定してください。例:
```typescript comboBox.itemFormatter = customItemFormatter.bind(this); function customItemFormatter(index, content) { if (this.makeItemBold(index)) { content = '<b>' + content + '</b>'; } return content; } ```
選択リストの項目を含む配列またはICollectionView オブジェクトを取得または設定します。
このプロパティを配列に設定すると、ComboBox は collectionView プロパティによって公開される内部 ICollectionView オブジェクトを作成します。
ComboBoxの選択は、その collectionView 内の現在の項目によって決定されます。デフォルトでは、コレクションの最初の項目に設定されます。 この動作を変更するには、collectionView の wijmo.CollectionView.currentItem プロパティをnullに設定します。
ドロップダウンリストの最大の高さ（ピクセル単位）を取得または設定します。
このプロパティのデフォルト値は**200**ピクセルです。
ドロップダウンリストの最大の幅を取得または設定します。
ドロップダウンリストの幅は、コントロール自体の幅によっても制限されます（その値はドロップダウンの最小幅を表します）。
このプロパティのデフォルト値は**null**です。これは、ドロップダウンに最大の幅制限がないことを意味します。
Gets or sets a value that determines whether the menu (and any sub-menus) should open automatically when the mouse hovers over the items.
See also the closeOnLeave property, which determines whether the menu should close automatically when the mouse leaves the menu.
このプロパティのデフォルト値は **false**です。
Gets or sets the element that owns this Menu.
This property is set by the wj-context-menu directive in case a single menu is used as a context menu for several different elements.
このプロパティのデフォルト値は**null**です。
selectedValuePath を使用して取得された selectedItem の値を取得または設定します。
selectedValuePath プロパティが設定されていない場合は、コントロールの selectedItem プロパティの値を取得または設定します。
itemsSource プロパティが設定されていない場合は、 コントロールの text プロパティの値を取得または設定します。
selectedValue をselectedItem から取得するために使用するプロパティの名前を取得または設定します。
コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
データグループを区切るためにドロップダウンListBox に グループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。
データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのgroupDescriptions プロパティを変更します。
このプロパティのデフォルト値は **false**です。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
先頭および末尾のスペースを削除してコントロールの入力要素の値を トリミングするかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ドロップダウンリストの項目の前後のスペースを確認するには、 次のようなCSSルールを適用する必要があります。
```css .wj-listbox-item { white-space: pre; } ```
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener メソッドを参照してください）。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getDisplayText(index?: number, trimText?: this): string
指定したインデックスにある項目に対して表示される文字列を（プレーンテキストとして）取得します。
getTemplate(): string
hide(): void
メニューを非表示にします。
This method is useful if you want to hide a context menu displayed with the show method.
indexOf(search: string, fullMatch: boolean): number
指定した文字列と一致する最初の項目のインデックスを取得します。
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript grid.initialize({ itemsSource: myList, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'Code', width: 130 }, { binding: 'name', header: 'Name', width: 60 } ] });
// 以下と同等です。 grid.itemsSource = myList; grid.autoGenerateColumns = false; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onIsDroppedDownChanged(e?: EventArgs): void
isDroppedDownChangedイベントを発生させます。
onIsDroppedDownChanging(e: CancelEventArgs): boolean
isDroppedDownChangingイベントを発生させます。
onItemClicked(e?: EventArgs): void
Raises the itemClicked event.
onItemsSourceChanged(e?: EventArgs): void
itemsSourceChanged イベントを発生させます。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onSelectedIndexChanged(e?: EventArgs): void
selectedIndexChangedイベントを発生させます。
onTextChanged(e?: EventArgs): void
textChangedイベントを発生させます。
refresh(fullUpdate?: boolean): void
コントロールを更新します。
Whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
show(position?: any): void
指定された場所にメニューを表示します。
An optional **MouseEvent** or reference element that determines the position where the menu should be displayed. If not provided, the menu is displayed at the center of the screen. This method is useful if you want to use the menu as a context menu attached to one or more elements on the page. For example:
```typescript import { Menu } from '@grapecity/wijmo.input'; let theMenu = new Menu(document.createElement('div'), { itemsSource: 'New,Open,Save,Exit'.split(','), itemClicked: s => { alert('thanks for picking ' + s.selectedIndex); } });
// use it as a context menu for one or more elements let element = document.getElementById('btn'); element.addEventListener('contextmenu', e => { e.preventDefault(); theMenu.show(e); }); ``` You can adjust the position of the menu by setting the margin of the menu's dropdown. For example, the code below causes the menu to be displayed 20 pixels away from the point that was clicked:
```typescript // add 20-pixel offset to the menu theMenu.dropDown.style.margin = '20px';
// show menu as a context menu let element = document.getElementById('btn'); element.addEventListener('contextmenu', e => { e.preventDefault(); theMenu.show(e); }); ```
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
ユーザーがメニューから項目を選択したときに発生します。
The handler can determine which item was picked by reading the event sender's selectedIndex property.
The Menu control shows a text element with a drop-down list of commands that the user can invoke by click or touch.
The Menu control inherits from ComboBox, so you populate and style it in the same way that you do the ComboBox (see the itemsSource property).
The Menu control adds an itemClicked event that fires when the user selects an item from the menu. The event handler can inspect the Menu control to determine which item was clicked. For example:
```typescript import { Menu } from '@grapecity/wijmo.input'; let menu = new Menu('#theMenu', { header: 'Main Menu', itemsSource: ['option 1', 'option 2', 'option 3'], itemClicked: s => { alert('Thanks for selecting item ' + s.selectedIndex + ' from menu ' + s.header + '!'); } }); ```
The example below shows how you can create menus that handle the itemClicked event.
{@sample Input/Menu/Overview Example}