Ignite UI for jQuery™ の 15.2 リリースから、新しいエディター コントロールのセットが導入されました。これには、作り直された igNumericEditor
も含まれています。簡便性と優れたユーザー エクスペリエンスを中心とした新しい設計では、いくつかのすぐに使える機能や新しいAPIが追加され、APIも修正または削除されています。このトピックでは、開発者が現在のアプリケーションから新しいエディターに移行する際に役立つ、新旧の機能の違いを説明します。
このトピックは、古い数値エディターから新しい数値エディターへの移行のサポートを目的としています。さまざまなシナリオを使用した実行方法を通して新旧を比較します。
このトピックは、以下のセクションで構成されます。
オプション | 旧 | 新 |
---|---|---|
animationHideDuration animationShowDuration | ドロップダウン リストの表示 / 非表示時のアニメーション時間の設定に使用されます。$(".selector").igNumericEditor({ animationShowDuration: 500, animationHideDuration: 500 }); |
これらのオプションは、ドロップダウン リストのアニメーション時間を制御する新しいオプションの dropDownAnimationDuration に置き換えられました。$(".selector").igNumericEditor({ dropDownAnimationDuration: 500 }); |
button | このオプションは、スピン ボタンとドロップダウン ボタンの表示 / 非表示の設定に使用されます。$(".selector").igNumericEditor({ button : "dropdown" }); |
このオプションは、機能を明確に表すために、buttonType という名前に変更されました。$(".selector").igNumericEditor({ buttonType : "dropdown" }); |
display | 外部の HTML 要素の style.display を取得または設定します。 | このオプションは削除されました。 |
dropDownTriggers | ドロップダウン リストまたはカレンダーの表示をトリガーするアクションのリストを設定または取得します。 | このオプションは削除されました。新しいエディターでは、Alt + 下矢印 キーでドロップダウンが表示されます。 |
focusOnSpin | このオプションが無効で、エディターがフォーカスされていない場合、スピン ボタンをマウスでリックすると、エディター内のテキストがフォーカスされていない形式で維持され、スピン アクションが実行されました。 | このオプションは削除されました。新しいエディターでは、エディターがフォーカスされていない状態でスピン ボタンをマウスでクリックしても、エディターがフォーカスされません。 |
height、width | 以前にサポートされていた型: number 。$(".selector").igNumericEditor({ width : 200 }); |
現在サポートされている型: number 、string 、null 。string 型を使用した場合、高さをピクセル (px) と パーセンテージ (%) で設定できます。$(".selector").igNumericEditor({ width : "200px" }); |
hideEnterKey | ブラウザーで Enter キーを非表示にする機能を設定または取得できます。$(".selector").igNumericEditor({ hideEnterKey : false }); |
このオプションは削除されました。Enter キーを押しても送信されないようにするには、preventSubmitOnEnter オプションを使用できます。$(".selector").igNumericEditor({ preventSubmitOnEnter : true }); |
listColumns | ドロップダウン リストの列の数値を設定または取得します。 | このオプションは削除されました。 |
listDropDownAsChild | 値 true は、HTML 要素のリストにメインの HTML 要素の子として作成します。値 false は、リストに本文の子として作成します。$(".selector").igNumericEditor({ listDropDownAsChild : true }); |
名前が dropDownAttachedToBody に変更されました。値 true は、リストに本文の子として作成します。値 false は、HTML 要素のリストにメインの HTML 要素の子として作成します。$(".selector").igNumericEditor({ dropDownAttachedToBody : true }); |
listMaxHeight | ドロップダウン リストの最大の高さをピクセル単位で設定する場合に使用されます。$(".selector").igNumericEditor({ listMaxHeight : 400 }); |
このオプションは削除されました。表示されるリスト項目の数を設定する場合は、新しいオプションの visibleItemsCount を使用できます。$(".selector").igNumericEditor({ visibleItemsCount : 5 }); |
nullText | エディターにフォーカスがなく、エディターの「value」が null または空の文字列の場合に、エディターに表示されるテキストの設定に使用されます。$(".selector").igNumericEditor({ nullText : "Enter Value" }); |
このオプションは、機能を明確に表すために、placeHolder という名前に変更されました。$(".selector").igNumericEditor({ placeHolder : "Enter Value" }); |
renderInContainer | 入力フィールドを SPAN にラップするオプションを設定または取得します。 | このオプションは削除されました。 |
required | エディター内の空の値の検証を設定または取得します。$(".selector").igNumericEditor({ required : true }); |
このオプションは削除されました。必要に応じて、バリデーター オプションを使用して、フィールドを設定できます。$(".selector").igNumericEditor({ validatorOptions : { required: true } }); |
selectionOnFocus | 以前サポートされていたメンバー: select 、-1 、start 、0 、end 、1 、default 、2 。$(".selector").igNumericEditor({ selectionOnFocus: 0 }); |
現在サポートされているメンバー: selectAll 、atStart 、atEnd 、browserDefault 。デフォルト値は selectAll です。$(".selector").igNumericEditor({ selectionOnFocus: "atStart" }); |
spinOnReadOnly | 「readOnly」オプションのオーバーライドや、エディターまたはスピン イベントの「value」の変更を許可する場合に使用されます。$(".selector").igNumericEditor({ spinOnReadOnly : true }); |
このオプションは削除されました。readOnly を true に設定すると、スピン ボタンが無効になります。$(".selector").igNumericEditor({ readOnly : true }); |
textAlign | 以前のデフォルトは null でした。 |
現在のデフォルトは left です。 |
theme | エディターが使用する CSS クラスのセレクターを設定または取得します。 | このオプションは削除されました。 |
type | エディターのタイプを設定します。 | このオプションは削除されました。対応するコントロールを使用できます。 |
maxLength | ユーザーが入力可能なテキストの最大長を設定または取得します。 | このオプションは削除されました。 |
メソッド | 旧 | 新 |
---|---|---|
addListItem | インデックスによって示された位置の項目内にオブジェクトを追加します。 | このメソッドは削除されました。このようなシナリオでは、データ オブジェクトを操作し、UI コンポーネントを更新されたデータに再バインドする必要があります。 |
addListItems | インデックスによって示された位置にある配列の項目内にオブジェクトを追加します。 | このメソッドは削除されました。このようなシナリオでは、データ オブジェクトを操作し、UI コンポーネントを更新されたデータに再バインドする必要があります。 |
clearListItems | リストからすべての項目を削除します。 | このメソッドは削除されました。このようなシナリオでは、データ オブジェクトを操作し、UI コンポーネントを更新されたデータに再バインドする必要があります。 |
dropDownElement | ドロップダウンのコンテナーとして使用されている jquery オブジェクトへの参照を取得します。 | このオプションは、機能を明確に表すために、dropDownContainter という名前に変更されました。 |
dropDownVisible | 渡されたブール値に従って、ドロップダウン リストの表示を設定します。 | ドロップダウン リストの表示のみを取得します。新しいメソッドの showDropDown と hideDropDown は以前の機能と置き換えられました。 |
findListItemIndex | 検索パラメーターと一致するテキストで、リスト項目のインデックスを検索します。 | 単一の数値パラメーター number のみを入力して、完全一致を検索する必要があります (15.00 は 15 と等しい)。 |
getSelectedText | 選択されたテキストをエディターから取得します。 | このようなメソッドは数値エディターでは意味がないため、削除されました。 |
getSelection | 選択肢の左端または右端を取得します。 | このようなメソッドは数値エディターでは意味がないため、削除されました。 |
getValueByMode | dataMode によってエディター内の値を取得します。 | このメソッドはサポートされていません。 |
hasInvalidMessage | 表示された無効なメッセージの確認に使用されます。 | igEditorNotifier には`同様に機能するAPIがあるため、このメソッドは削除されました。 |
mainElement | igNumericEditor のトップ / 外部要素として使用されている jquery オブジェクトへの参照を取得します。 | このメソッドは、機能を明確に表すために、editorContainter という名前に変更されました。 |
paste | カレットの位置にテキストを貼り付けます。 | このメソッドは insert に名前が変更され、txt パラメーターは文字列であるため、string に名前が変更されました。 |
remove | エディターを親要素から削除しますが、残りの機能は維持されます。 | このメソッドはサポートされていません。 |
removeListItem | リストから項目を削除します。 | このメソッドは削除されました。このようなシナリオでは、データ オブジェクトを操作し、UI コンポーネントを更新されたデータに再バインドする必要があります。 |
removeListItemAt | インデックスのリストから項目を削除します。 | このメソッドは削除されました。このようなシナリオでは、データ オブジェクトを操作し、UI コンポーネントを更新されたデータに再バインドする必要があります。 |
select | エディター内のテキストを選択します。有効なパラメーター: sel0 、sel1 、val |
2 つのパラメーターは間違えられる可能性があるため、sel0 は start 、sel1 は end にそれぞれ名前が変更されました。 |
setFocus | 遅延によるエディターのフォーカスを設定します。パラメーターが -1 の場合、遅延なしでフォーカスが設定されます。 | 正の値のみを遅延の値としてサポートしました。デフォルト値は 0 で、遅延なしでフォーカスを移動します。 |
spin | パラメーターに従って、エディター内の値を増分 (正の差分) または減分 (負の差分) します。 | このメソッドは、spinUp と spinDown という新しい 2 つのメソッドに置き換えられました。このメソッドは、isLimitedToListValues が有効な場合、値またはドロップダウン ナビゲーションと操作します。 |
text | 選択されたテキストをエディターから取得、またはエディターに設定します。 | これは getter メソッド displayValue に置き換えられました。パラメーターを取らず、入力に表示されたすべての文字で文字列を返します。 |
イベント | 変更内容 |
---|---|
hideDropDown | このイベントのサポートは廃止されました。ドロップダウン リストの非表示をより詳細に制御できる、dropDownListClosing と dropDownListClosed の 2 つのイベントが新しく導入されました。 |
showDropDown | このイベントのサポートは廃止されました。ドロップダウン リストの表示をより詳細に制御できる、dropDownListOpening と dropDownListOpened の 2 つのイベントが新しく導入されました。 |
listSelected | このイベントは、機能を明確に表すために、dropDownItemSelected という名前に変更されました。ui.owner は、igEditor への参照を取得します。ui.editorInput は、編集可能な入力への参照を取得します。ui.list は、リスト コンテナーへの参照を取得します。ui.item は、選択されたリスト項目への参照を取得します。 |
listSelecting | このイベントは、機能を明確に表すために、dropDownItemSelecting という名前に変更されました。ui.owner は、igEditor への参照を取得します。ui.editorInput は、編集可能な入力への参照を取得します。ui.list は、リスト コンテナーへの参照を取得します。ui.item は、選択されようとしているリスト項目への参照を取得します。 |
mouseleave | このイベントは、機能を明確に表すために、mouseout という名前に変更されました。 |
Lib | 以前に必要とされたバージョン | 新しく必要なバージョン |
---|---|---|
jQuery コア | 1.4.4 | 1.9.1 |
jQuery UI | 1.7 | 1.9.0 |
オンラインで表示: GitHub