[]
Menu 要素に表示されるHTMLテキストを取得または設定します。
このプロパティのデフォルト値は空の文字列('')です。
コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は true。
dropDown で最初の有効な項目が自動的にフォーカス/選択されるかどうかを決定する値を取得または設定します。 アクセシビリティツールが使用されるときに適切なナビゲーションを追加するために使用されます。
このプロパティのデフォルト値は false です。
検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は false です。
ユーザーがコントロールの入力要素をクリックしたときに実行する操作を決定する値を取得または設定します。
ほとんどのドロップダウンコントロールに対して、このプロパティはデフォルトで ClickAction.Select に設定されます。これにより、ユーザーはマウスでテキストの一部を選択できます。
編集不可のテキストを表示するドロップダウンコントロール(MultiSelectなど)の場合、このプロパティはデフォルトでClickAction.Toggleに設定されます。
マウスがメニューを離れたとき、メニューおよびサブメニューが 自動的に閉じるかどうかを決定する値を取得または設定します。
このプロパティは、openOnHover プロパティがtrueに設定されている場合にのみ適用されます。
このプロパティのデフォルト値は trueです。
項目ソースとして使用されるICollectionView オブジェクトを取得します。
メニュー項目を有効にするかどうか、および選択したときに実行するアクションを決定するコマンドオブジェクトを取得または設定します。
コマンドオブジェクトは、ICommandインターフェイスを実装します。
また、commandPathプロパティを使用して、個々の項目にコマンドを設定することもできます。
このプロパティのデフォルト値はnullです。
commandPath プロパティによって指定されたコマンドで使用するパラメーターを含むプロパティの名前を取得または設定します。
コマンドオブジェクトは、{@link Icommand}インターフェイスを実装します。
このプロパティのデフォルト値はnullです。
ユーザーが項目をクリックしたときに実行されるコマンドを含むプロパティの名前を取得または設定します。
コマンドオブジェクトは、{@link Icommand}インターフェイスを実装します。
このプロパティは、特定のメニュー項目のcommandプロパティをオーバーライドします。
このプロパティのデフォルト値はnullです。
項目の視覚表示として使用するプロパティの名前を取得または設定します。
isDroppedDown プロパティがtrueに設定されているときに表示されるドロップダウン要素を取得します。
コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。
このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。ドロップダウン要素は、 コントロール自体の子としてではなく、ドキュメントボディの子として表示され、親コントロールに基づいてCSSセレクタを使用することができないためです。
ユーザーがマウスホイールで現在選択されている項目を変更できるかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は true。
Menu 要素に表示されるHTMLテキストを取得または設定します。
このプロパティのデフォルト値は空の文字列('')です。
コントロールの入力要素に表示される値を取得するために使用するプロパティ名を取得または設定します。
このプロパティのデフォルト値はnullです。この場合、コントロールは、 ドロップダウンリストの選択項目と同じ内容を入力要素に表示します。
入力要素に表示される値をドロップダウンリストに表示される値とは切り離す場合は、 このプロパティを使用します。たとえば、入力要素には項目名を表示し、 ドロップダウンリストには追加情報を表示することができます。
コントロールをホストしているDOM要素を取得します。
コントロールによってホストされているHTML入力要素を取得します。
このプロパティは、入力要素の属性をカスタマイズする場合に使用します。
コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。
このプロパティのデフォルト値はtextです。
ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は false です。
このMenu を通常のメニューではなく分割ボタンとして動作させるかどうかを 指定する値を取得または設定します。
このプロパティのデフォルト値はfalseです。
通常のメニューと分割ボタンの違いは、ユーザーがメニューヘッダーを クリックしたときの動作です。 通常のメニューでは、ヘッダをクリックするとメニューオプションが表示されるか、非表示になります。 分割ボタンの場合は、 ヘッダーをクリックすると、ドロップダウンリストから 項目を選択した場合と同様に、Menu.itemClicked イベントが発生したり、 最後に選択したオプションに関連するコマンドが呼び出されます。
メニュー項目のクリックと、分割ボタンのボタン部分のクリックを区別するには、 イベント送信元のMenu.isDroppedDown プロパティの値を確認します。 これがtrueの場合は、メニュー項目がクリックされました。 falseの場合は、ボタンがクリックされました。
たとえば、以下のコードは、デフォルトの項目/コマンドを変更するためにのみ ドロップダウンリストを使用し、ボタンがクリックされた場合にのみアクションを トリガする分割ボタンを実装します。
import { Menu } from '@mescius/wijmo.input';
let theMenu = new Menu('#theMenu', {
isButton: true,
itemClicked: s => {
if (!s.isDroppedDown) { // ヘッダ/ボタンクリック
console.log('running ', s.selectedItem.browser);
}
},
selectedIndexChanged: s => { //ヘッダのテキストを更新します
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コレクション内の項目に制限するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は、{@linkComboBox}コントロールの場合false、{@linkAutoComplete}コントロールおよび{@linkInputTime}コントロールの場合はtrueです。
ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は false です。
コントロール値をnull以外の値に設定する必要があるか、 それとも(コントロールのコンテンツを削除することで)nullに設定できるかを 決定する値を取得または設定します。
このプロパティは、ComboBox、InputDate、InputTime、InputDateTime、 およびInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoComplete コントロールに対してデフォルトでfalseに設定されます。
現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。
コントロールが現在更新中かどうかを示す値を取得します。
ドロップダウンリストに表示される値のカスタマイズに使用される関数を取得または設定します。 この関数は、2つの引数として項目インデックスとデフォルトのテキストまたはHTMLを 受け取り、表示する新しいテキストまたはHTMLを返します。
書式設定関数がスコープ(意味のある'this'値など)を必要とする場合は、 'bind'関数を使用してフィルタを設定し、 'this'オブジェクトを指定してください。次に例を示します。
comboBox.itemFormatter = customItemFormatter.bind(this);
function customItemFormatter(index, content) {
if (this.makeItemBold(index)) {
content = '<b>' + content + '</b>';
}
return content;
}
選択リストの項目を含む配列またはICollectionView オブジェクトを取得または設定します。
このプロパティを配列に設定すると、ComboBox は ComboBox.collectionView プロパティによって公開される内部 ICollectionView オブジェクトを作成します。
ComboBox の選択は、その ComboBox.collectionView 内の現在の項目によって決定されます。デフォルトでは、コレクションの最初の項目に設定されます。 この動作を変更するには、ComboBox.collectionView の wijmo.CollectionView.currentItem プロパティをnullに設定します。
ドロップダウンに示されているListBox コントロールを取得します。
ドロップダウンリストの最大の高さ(ピクセル単位)を取得または設定します。
このプロパティのデフォルト値は200ピクセルです。
ドロップダウンリストの最大幅を取得または設定します。
ドロップダウンリストの幅は、コントロール自体の幅によって制限されます。 その値は、ドロップダウンの最小幅を表します。
このプロパティのデフォルト値はnullです。 これは、ドロップダウンに最大幅の制限がないことを意味します。
項目上にマウスをホバーしたとき、メニューおよびサブメニューが 自動的に開かれるかどうかを決定する値を取得または設定します。
マウスポインタがメニューから離れたとき、メニューが自動的に閉じるかどうかを決定する closeOnLeave プロパティを参照してください。
このプロパティのデフォルト値は false. です。
Menu を所有する要素を取得または設定します。
このプロパティは、 単一のメニューが複数の要素のコンテキストメニューとして使用される場合に、 wj-context-menuディレクティブによって設定されます。
このプロパティのデフォルト値はnullです。
コントロールが空のときにヒントとして表示される文字列を取得または設定します。
要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。
ドロップダウンリストで現在選択されている項目のインデックスを取得または設定します。
ドロップダウンリストで現在選択されている項目を取得または設定します。
selectedValuePath を使用して取得されたselectedItem の値を取得または設定します。
selectedValuePath プロパティが設定されていない場合は、コントロールの selectedItem プロパティの値を取得または設定します。 itemsSource プロパティが設定されていない場合は、 コントロールの text プロパティの値を取得または設定します。
selectedValue をselectedItem から取得するために使用するプロパティの名前を 取得または設定します。
コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は true。
データグループを区切るためにドロップダウン ListBox に グループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。
データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。
このプロパティのデフォルト値はfalseです。
サブメニューに表示する項目を持つ配列を含む プロパティの名前を取得または設定します。
このプロパティのデフォルト値はnullです。
コントロールに関連付けられた tabindex 属性の値を取得または設定します。
tabindex属性値は、コントロールのホストHTML要素で指定することで、 Wijmoコントロールに対して静的に定義できます。 ただし、Wijmoコントロールは複雑な構造であり、コントロールが正しく機能できるように、属性値を内部要素に伝達する必要があるため、 この値をアプリケーションのライフサイクルの後半で変更することはできません。
そのため、コントロールのtabindexを動的に読み取ったり変更したりするには、このプロパティを使用して行う必要があります。
コントロールに表示されるテキストを取得または設定します。
先頭および末尾のスペースを削除してコントロールの入力要素の値を トリミングするかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は trueです。
ドロップダウンリストの項目の前後のスペースを確認するには、 次のようなCSSルールを適用する必要があります。
.wj-listbox-item {
white-space: pre;
}
ドロップダウン ListBoxで仮想化を有効にするために必要な最小行数、最小列数、 またはその両方を取得または設定します。
このプロパティのデフォルト値は非常に大きい数値であり、仮想化が無効になっていることを意味します。 仮想化を有効にするには、値を0または正の数に設定します。
詳細については、ListBox.virtualizationThreshold プロパティを参照してください。
DropDown コントロールのインスタンス化に使用されるテンプレートを取得または設定します。
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます(dispose と removeEventListener ) メソッドを参照してください)。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。
イベントのターゲット要素。
イベントを指定する文字列。
イベントが発生したときに実行する関数。
リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。
ハンドラーが preventDefault() を呼び出さないことを示します。
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出されますので、このメソッドは使用できません。 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
this.applyTemplate('wj-control wj-inputnumber', templateString, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
@param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。
次にendUpdate が呼び出されるまで通知を中断します。
このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。
beginUpdate/endUpdate ブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。
実行する関数。
beginUpdate の呼び出しによって中断された通知を再開します。
コントロールを無効にする必要があります。このパラメータのデフォルト値は true です。
このコントロールにフォーカスを設定します。
指定したインデックスにある項目に対して表示される文字列を(プレーンテキストとして)取得します。
テキストを取得する項目のインデックス。
必要に応じて、trimTextプロパティの値をオーバーライドします。
オブジェクトが指定されたプロパティを持つかどうかを判定します。
プロパティの名前。
メニューを非表示にします。
このメソッドは、show メソッドを使用して表示したコンテキストメニューを 非表示にする場合に便利です。
指定した文字列と一致する最初の項目のインデックスを取得します。
検索する文字列。
完全一致で検索するか、前方一致で検索するか。
項目のインデックス。見つからない場合は-1。
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
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;
// など
初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
初期化データを含むオブジェクト。
非同期更新を発生させるため、コントロールを無効にします。
内容だけでなくコントロールのレイアウトも更新するかどうか。
オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。
プロトタイプチェーンが判定される別のオブジェクト。
invalidInput イベントを発生させます。
イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。
itemClicked イベントを発生させます。
itemsSourceChanged イベントを発生させます。
refreshing イベントを発生させます。
selectedIndexChanged イベントを発生させます。
textChanged イベントを発生させます。
指定されたプロパティが列挙可能かどうかを判断します。
プロパティの名前。
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます
イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。
削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。
リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。
削除されたリスナーの数。
コントロールにフォーカスを設定してそのすべての内容を選択します。
指定された場所にメニューを表示します。
メニューを表示する位置を指定するオプションのMouseEventまたは参照要素。 指定しない場合、メニューは画面の中心に表示されます。
このメソッドは、ページ上の1つ以上の要素に関連付けられたコンテキストメニューとして メニューを使用する場合に役立ちます。 例えば:
import { Menu } from '@mescius/wijmo.input';
let theMenu = new Menu(document.createElement('div'), {
itemsSource: 'New,Open,Save,Exit'.split(','),
itemClicked: s => {
alert('thanks for picking ' + s.selectedIndex);
}
});
// 1つ以上の要素のコンテキストメニューとして使用します。
let element = document.getElementById('btn');
element.addEventListener('contextmenu', e => {
e.preventDefault();
theMenu.show(e);
});
メニューのドロップダウンのマージンを設定することにより、メニューの位置を調整できます。 たとえば、次のコードでは、クリックされたポイントから20ピクセル離れたところにメニューが表示されます。
// メニューに20ピクセルのオフセットを追加します
theMenu.dropDown.style.margin = '20px';
// メニューをコンテキストメニューとして表示します
let element = document.getElementById('btn');
element.addEventListener('contextmenu', e => {
e.preventDefault();
theMenu.show(e);
});
現在のロケールを使用して文字列に変換された日付を返します。
オブジェクトの文字列表現を返します。
指定されたオブジェクトのプリミティブ値を返します。
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
コンテナー要素。
指定したDOM要素でホストされているコントロールを取得します。
コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
ドロップダウンリストの項目が作成されると発生するイベント。
このイベントを使用して、リスト項目のHTMLを変更できます。 詳細については、ListBox.formatItem イベントを参照してください。
コントロールがフォーカスを取得したときに発生します。
無効な文字が入力されたときに発生します。
ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。
イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。
イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。
ドロップダウンが表示または非表示になった後に発生します。
ドロップダウンが表示または非表示になる前に発生します。
ユーザーがメニューから項目を選択したときに発生します。
イベントハンドラで、イベント送信元の{@link selectedIndexプロパティを調べてどの項目が選択されたかを確認できます}。
itemsSource プロパティの値が変化すると発生します。
コントロールがフォーカスを失ったときに発生します。
コントロールが内容を更新した後で発生します。
コントロールが内容を更新する直前に発生します。
selectedIndex プロパティの値が変更されたときに発生します。
text プロパティの値が変更されたときに発生します。
Menu コントロールは、ドロップダウンリスト付きのテキスト要素を表示します。ドロップダウンリストには コマンドが含まれ、ユーザーがクリックまたはタッチで呼び出すことができます。
Menu コントロールはComboBox を継承するため、ComboBox と同様に、 Menu コントロールに 項目を挿入したり、スタイルを設定することができます(Menu.itemsSource プロパティを参照)。
Menu コントロールには、ユーザーがメニューから項目を選択したときに発生する Menu.itemClicked イベントが追加されています。イベントハンドラは、Menu コントロールを検査して、 クリックされた項目を特定できます。次に例を示します。
import { Menu } from '@mescius/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 + '!'); } });
以下の例は、itemClicked イベントを処理する メニューを作成する方法を示します。
デモ