[]
コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はtrueです。
検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は false です。
ユーザーがコントロールの入力要素をクリックしたときに実行する操作を決定する値を取得または設定します。
ほとんどのドロップダウンコントロールに対して、このプロパティはデフォルトで ClickAction.Select に設定されます。これにより、ユーザーはマウスでテキストの一部を選択できます。
編集不可のテキストを表示するドロップダウンコントロール(MultiSelectなど)の場合、このプロパティはデフォルトでClickAction.Toggleに設定されます。
マウスがメニューを離れたとき、メニューおよびサブメニューが 自動的に閉じるかどうかを決定する値を取得または設定します。
このプロパティは、openOnHover プロパティがtrueに設定されている場合にのみ適用されます。
このプロパティのデフォルト値は trueです。
項目ソースとして使用されるICollectionView オブジェクトを取得します。
項目がクリックされたときに実行されるコマンドを取得または設定します。
コマンドは以下の2つのメソッドを実装するオブジェクトです。
また、commandPath プロパティを使用して個々の項目のコマンドを設定することもできます。
commandPath プロパティによって指定されたコマンドで使用するパラメーターを含むプロパティの名前を取得または設定します。
ユーザーが項目をクリックしたときに実行されるコマンドを含むプロパティの名前を取得または設定します。
コマンドは以下の2つのメソッドを実装するオブジェクトです。
項目の視覚表示として使用するプロパティの名前を取得または設定します。
isDroppedDown プロパティがtrueに設定されているときに表示されるドロップダウン要素を取得します。
コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。
このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。 ドロップダウン要素は、 コントロール自体の子としてではなく、ドキュメントボディの子として表示され、 親コントロールに基づいてCSSセレクタを使用することができないためです。
Menu 要素に表示されるHTMLテキストを取得または設定します。
コントロールの入力要素に表示される値を取得するために使用するプロパティ名を取得または設定します。
このプロパティのデフォルト値はnullです。この場合、コントロールは、 ドロップダウンリストの選択項目と同じ内容を入力要素に表示します。
入力要素に表示される値をドロップダウンリストに表示される値とは切り離す場合は、 このプロパティを使用します。たとえば、入力要素には項目名を表示し、 ドロップダウンリストには追加情報を表示することができます。
コントロールをホストしているDOM要素を取得します。
コントロールによってホストされているHTML入力要素を取得します。
このプロパティは、入力要素の属性をカスタマイズする場合に使用します。
コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。
このプロパティのデフォルト値はtextです。
ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は false です。
このMenu を通常のメニューではなく分割ボタンとして動作させるかどうかを 指定する値を取得または設定します。
このプロパティのデフォルト値は falseです。
通常のメニューと分割ボタンの違いは、ユーザーがメニューヘッダーを クリックしたときの動作です。 通常のメニューでは、ヘッダをクリックするとメニューオプションが表示されるか、非表示になります。 分割ボタンの場合は、 ヘッダーをクリックすると、ドロップダウンリストから 項目を選択した場合と同様に、Menu.itemClicked イベントが発生したり、 最後に選択したオプションに関連するコマンドが呼び出されます。
メニュー項目のクリックと、分割ボタンのボタン部分のクリックを区別するには、 イベント送信元のMenu.isDroppedDown プロパティの値を確認します。 これがtrueの場合は、メニュー項目がクリックされました。 falseの場合は、ボタンがクリックされました。
たとえば、以下のコードは、デフォルトの項目/コマンドを変更するためにのみ ドロップダウンリストを使用し、ボタンがクリックされた場合にのみアクションを トリガする分割ボタンを実装します。
<wj-menu is-button="true" header="Run" value="browser" item-clicked="itemClicked(s, e)>
<wj-menu-item value="'Internet Explorer'">Internet Explorer</wj-menu-item>
<wj-menu-item value="'Chrome'">Chrome</wj-menu-item>
<wj-menu-item value="'Firefox'">Firefox</wj-menu-item>
<wj-menu-item value="'Safari'">Safari</wj-menu-item>
<wj-menu-item value="'Opera'">Opera</wj-menu-item>
</wj-menu>
// コントローラー
$scope.browser = 'Internet Explorer';
$scope.itemClicked = (s, e) => {
if (!s.isDroppedDown) { // ドロップダウンでなかった場合は、ボタンがクリックされました
alert('running ' + $scope.browser);
}
}
ドロップダウンリストに項目をプレーンテキストとして表示するか、HTMLとして表示するかを 示す値を取得または設定します。
このプロパティのデフォルト値は false です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は false です。
入力要素の内容をitemsSource コレクション内の項目に 制限するかどうかを決定する値を取得または設定します。
このプロパティは、デフォルトで ComboBox コントロールに対してfalseに設定され、AutoComplete および InputTime コントロールに対してtrueに設定されます。
ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は false です。
コントロール値をnull以外の値に設定する必要があるか、 それとも(コントロールのコンテンツを削除することで)nullに設定できるかを 決定する値を取得または設定します。
このプロパティは、{@ link ComboBox}、{@ link InputDate}、{@ link InputTime}、{@ link 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 コントロールを取得します。
ドロップダウンリストの最大の高さ(ピクセル単位)を取得または設定します。
ドロップダウンリストの最大の幅を取得または設定します。
ドロップダウンリストの幅は、コントロール自体の幅によっても制限されます (その値はドロップダウンの最小幅を表します)。
項目上にマウスをホバーしたとき、メニューおよびサブメニューが 自動的に開かれるかどうかを決定する値を取得または設定します。
マウスポインタがメニューから離れたとき、メニューが自動的に閉じるかどうかを決定する closeOnLeave プロパティを参照してください。
このプロパティのデフォルト値は false です。
Menu を所有する要素を取得または設定します。
この変数は、単一のメニューはいくつかの要素のコンテキストメニューとして使用する場合 wj-context-menuで設定します。
コントロールが空のときにヒントとして表示される文字列を取得または設定します。
要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。
ドロップダウンリストで現在選択されている項目のインデックスを取得または設定します。
ドロップダウンリストで現在選択されている項目を取得または設定します。
selectedValuePath を使用して取得されたselectedItem の値を取得または設定します。
selectedValuePath プロパティが設定されていない場合は、コントロールの selectedItem プロパティの値を取得または設定します。 itemsSource プロパティが設定されていない場合は、 コントロールの text プロパティの値を取得または設定します。
selectedValue をselectedItem から取得するために使用するプロパティの名前を 取得または設定します。
コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値はtrueです。
データグループを区切るためにドロップダウン ListBox に グループヘッダー項目を含めるかどうかを決定する値を 取得または設定します。
データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。
このプロパティのデフォルト値はfalseです。
サブメニューに表示する項目を持つ配列を含む プロパティの名前を取得または設定します。
コントロールに表示されるテキストを取得または設定します。
先頭および末尾のスペースを削除してコントロールの入力要素の値を トリミングするかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は trueです。
ドロップダウンリストの項目の前後のスペースを確認するには、 次のようなCSSルールを適用する必要があります。
.wj-listbox-item { white-space: pre; }
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', template, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input');
コントロールのホスト要素に追加するクラスの名前。
コントロールのテンプレートを定義するHTML文字列。
パーツ変数とその名前のディクショナリー。
ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。
次にendUpdate が呼び出されるまで通知を中断します。
beginUpdate/endUpdate ブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。
実行する関数。
beginUpdate の呼び出しによって中断された通知を再開します。
このコントロールにフォーカスを設定します。
指定したインデックスにある項目に対して表示される文字列を(プレーンテキストとして)取得します。
テキストを取得する項目のインデックス。
オブジェクトが指定されたプロパティを持つかどうかを判定します。
プロパティの名前。
メニューを非表示にします。
このメソッドは、show メソッドを使用して表示したコンテキストメニューを 非表示にする場合に便利です。
指定した文字列と一致する最初の項目のインデックスを取得します。
検索する文字列。
完全一致で検索するか、前方一致で検索するか。
The index of the item, or -1 if not found.
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
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; // など
初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
初期化データを含むオブジェクト。
非同期更新を発生させるため、コントロールを無効にします。
内容だけでなくコントロールのレイアウトも更新するかどうか。
オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。
プロトタイプチェーンが判定される別のオブジェクト。
itemClicked イベントを発生させます。
itemsSourceChanged イベントを発生させます。
refreshing イベントを発生させます。
selectedIndexChanged イベントを発生させます。
textChanged イベントを発生させます。
指定されたプロパティが列挙可能かどうかを判断します。
プロパティの名前。
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます
イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。
削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。
リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。
The number of listeners removed.
コントロールにフォーカスを設定してそのすべての内容を選択します。
指定された場所にメニューを表示します。
このメソッドは、メニューをコンテキストメニューとして使用して、 ページ内のいくつかの要素にアタッチする場合に便利です。次に例を示します。
import { Menu } from '@grapecity/wijmo.input';
let div = document.createElement('div');
let menu = new Menu(div, {
itemsSource: 'New,Open,Save,Exit'.split(','),
itemClicked: s => {
alert('thanks for picking ' + s.selectedIndex);
}
});
//メニューをいくつかの要素のコンテキストメニューとして使用します
let element = document.getElementById('btn');
element.addEventListener('contextmenu', e => {
e.preventDefault();
menu.show(e);
});
メニューを表示する位置を指定するオプションのMouseEventまたは参照要素。 指定しない場合、メニューは画面の中心に表示されます。
現在のロケールを使用して文字列に変換された日付を返します。
オブジェクトの文字列表現を返します。
指定されたオブジェクトのプリミティブ値を返します。
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
コンテナー要素。
指定したDOM要素でホストされているコントロールを取得します。
コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
ドロップダウンリストの項目が作成されると発生するイベント。
このイベントを使用して、リスト項目のHTMLを変更できます。 詳細については、ListBox.formatItem イベントを参照してください。
コントロールがフォーカスを取得したときに発生します。
ドロップダウンが表示または非表示になった後に発生します。
ドロップダウンが表示または非表示になる前に発生します。
ユーザーがメニューから項目を選択したときに発生します。
イベントハンドラで、イベント送信元のselectedIndex プロパティを調べてどの項目が選択されたかを確認できます。
itemsSource プロパティの値が変化すると発生します。
コントロールがフォーカスを失ったときに発生します。
コントロールが内容を更新した後で発生します。
コントロールが内容を更新する直前に発生します。
selectedIndex プロパティの値が変更されたときに発生します。
text プロパティの値が変更されたときに発生します。
Menu コントロールは、ドロップダウンリスト付きのテキスト要素を表示します。ドロップダウンリストには コマンドが含まれ、ユーザーがクリックまたはタッチで呼び出すことができます。
Menu コントロールはComboBox を継承するため、ComboBox と同様に、 Menu コントロールに 項目を挿入したり、スタイルを設定することができます(Menu.itemsSource プロパティを参照)。
Menu コントロールには、ユーザーがメニューから項目を選択したときに発生する Menu.itemClicked イベントが追加されています。イベントハンドラは、Menu コントロールを検査して、 クリックされた項目を特定できます。次に例を示します。
var menu = new wijmo.input.Menu(hostElement); menu.header = 'Main Menu'; menu.itemsSource = ['option 1', 'option 2', 'option 3']; menu.itemClicked.addHandler(function(sender, args) { var menu = sender; alert('Thanks for selecting item ' + menu.selectedIndex + ' from menu ' + menu.header + '!'); });
以下の例は、<a href="wijmo_input.menu.html#itemclicked">itemClicked</a> イベントを処理する メニューを作成する方法を示します。 Example