新しい igPercentEditor への移行

Ignite UI for jQuery™ の 15.2 リリースから、新しいエディターコントロールのセットが導入されました。これには、作り直された igPercentEditor も含まれています。簡便性と優れたユーザーエクスペリエンスを中心とした新しい設計では、いくつかのすぐに使える機能や新しいAPIが追加され、APIも修正または削除されています。このトピックでは、開発者が現在のアプリケーションから新しいエディターに移行する際に役立つ、新旧の機能の違いを説明します。

トピックの概要

このトピックは、古いパーセントエディターから新しいパーセントエディターへの移行のサポートを目的としています。さまざまなシナリオを使用した実行方法を通して新旧を比較します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

変更されたオプション

オプション	旧	新
animationHideDuration animationShowDuration	ドロップダウンリストの表示 / 非表示時のアニメーション時間の設定に使用されます。 `$(".selector").igPercentEditor({` `animationShowDuration: 500,` `animationHideDuration: 500` `});`	これらのオプションは、ドロップダウンリストのアニメーション時間を制御する新しいオプションの `dropDownAnimationDuration` に置き換えられました。 `$(".selector").igPercentEditor({` `dropDownAnimationDuration: 500` `});`
button	このオプションは、スピンボタンとドロップダウンボタンの表示 / 非表示の設定に使用されます。 `$(".selector").igPercentEditor({` `button : "dropdown"` `});`	このオプションは、機能を明確に表すために、`buttonType` という名前に変更されました。 `$(".selector").igPercentEditor({` `buttonType : "dropdown"` `});`
display	外部の HTML 要素の style.display を取得または設定します。	このオプションは削除されました。
displayFactor	使用可能な値: 1、10、100、1000、10000、100000 など `$(".selector").igPercentEditor({` `displayFactor : 1000` `});`	使用可能な値: 1、100。他のオプションは、パーセントエディターの対象範囲外です。デフォルト値は 100 です。 `$(".selector").igPercentEditor({` `displayFactor : 100` `});`
dropDownTriggers	ドロップダウンリストまたはカレンダーの表示をトリガーするアクションのリストを設定または取得します。	このオプションは削除されました。新しいエディターでは、`Alt` + `下矢印` キーでドロップダウンが表示されます。
focusOnSpin	このオプションが無効で、エディターがフォーカスされていない場合、スピンボタンをマウスでリックすると、エディター内のテキストがフォーカスされていない形式で維持され、スピンアクションが実行されました。	このオプションは削除されました。新しいエディターでは、エディターがフォーカスされていない状態でスピンボタンをマウスでクリックしても、エディターがフォーカスされません。
height、width	以前にサポートされていた型: `number`。 `$(".selector").igPercentEditor({` `width : 200` `});`	現在サポートされている型: `number`、`string`、`null`。`string` 型を使用した場合、高さをピクセル (px) とパーセンテージ (%) で設定できます。 `$(".selector").igPercentEditor({` `width : "200px"` `});`
hideEnterKey	ブラウザーで Enter キーを非表示にする機能を設定または取得できます。 `$(".selector").igPercentEditor({` `hideEnterKey : false` `});`	このオプションは削除されました。Enter キーを押しても送信されないようにするには、preventSubmitOnEnter オプションを使用できます。 `$(".selector").igPercentEditor({` `preventSubmitOnEnter : true` `});`
listColumns	ドロップダウンリストの列の数値を設定または取得します。	このオプションは削除されました。
listDropDownAsChild	値 `true` は、HTML 要素のリストにメインの HTML 要素の子として作成します。値 `false` は、リストに本文の子として作成します。 `$(".selector").igPercentEditor({` `listDropDownAsChild : true` `});`	名前が `dropDownAttachedToBody` に変更されました。値 `true` は、リストに本文の子として作成します。値 `false` は、HTML 要素のリストにメインの HTML 要素の子として作成します。 `$(".selector").igPercentEditor({` `dropDownAttachedToBody : true` `});`
listMaxHeight	ドロップダウンリストの最大の高さをピクセル単位で設定する場合に使用されます。 `$(".selector").igPercentEditor({` `listMaxHeight : 400` `});`	このオプションは削除されました。表示されるリスト項目の数を設定する場合は、新しいオプションの visibleItemsCount を使用できます。 `$(".selector").igPercentEditor({` `visibleItemsCount : 5` `});`
negativeSign	負の数値の表示に使用する文字の設定に使用されます。 `$(".selector").igPercentEditor({` `negativeSign : "--"` `});`	このオプションは、地域の言語で使用可能な記号のみに使用できます。 `$(".selector").igPercentEditor({` `negativeSign : "-"` `});`
nullText	エディターにフォーカスがなく、エディターの「value」が null または空の文字列の場合に、エディターに表示されるテキストの設定に使用されます。 `$(".selector").igPercentEditor({` `nullText : "Enter Value"` `});`	このオプションは、機能を明確に表すために、`placeHolder` という名前に変更されました。 `$(".selector").igPercentEditor({` `placeHolder : "Enter Value"` `});`
renderInContainer	入力フィールドを SPAN にラップするオプションを設定または取得します。	このオプションは削除されました。
rnullText	エディターにフォーカスがなく、エディターの「value」が null または空の文字列の場合に、エディターに表示されるテキストの設定に使用されます。 `$(".selector").igPercentEditor({` `nullText : "Enter Value"` `});`	このオプションは、機能を明確に表すために、`placeHolder` という名前に変更されました。 `$(".selector").igPercentEditor({` `placeHolder : "Enter Value"` `});`
renderInContainer	入力フィールドを SPAN にラップするオプションを設定または取得します。	このオプションは削除されました。
required	エディター内の空の値の検証を設定または取得します。 `$(".selector").igPercentEditor({` `required : true` `});`	このオプションは削除されました。必要に応じて、バリデーターオプションを使用して、フィールドを設定できます。 `$(".selector").igPercentEditor({` `validatorOptions : {` `required: true` `}` `});`
selectionOnFocus	以前サポートされていたメンバー: `select`、`-1`、`start`、`0`、`end`、`1`、`default`、`2`。 `$(".selector").igPercentEditor({` `selectionOnFocus: 0` `});`	現在サポートされているメンバー: `selectAll`、`atStart`、`atEnd`、`browserDefault`。デフォルト値は `selectAll` です。 `$(".selector").igPercentEditor({` `selectionOnFocus: "atStart"` `});`
spinOnReadOnly	「readOnly」オプションのオーバーライドや、エディターまたはスピンイベントの「value」の変更を許可する場合に使用されます。 `$(".selector").igPercentEditor({` `spinOnReadOnly : true` `});`	このオプションは削除されました。`readOnly` を `true` に設定すると、スピンボタンが無効になります。 `$(".selector").igPercentEditor({` `readOnly : true` `});`
textAlign	以前のデフォルトは `null` でした。	現在のデフォルトは `left` です。
theme	エディターが使用する CSS クラスのセレクターを設定または取得します。	このオプションは削除されました。
type	エディターのタイプを設定します。	このオプションは削除されました。対応するコントロールを使用できます。
maxLength	ユーザーが入力可能なテキストの最大長を設定または取得します。	このオプションは削除されました。
symbol	表示 (フォーカスなし) 状態で使用されるパーセント記号の設定に使用されます。 `$(".selector").igPercentEditor({` `symbol: "*"` `});`	このオプションは、機能を明確に表すために、`percentSymbol` という名前に変更されました。 `$(".selector").igPercentEditor({` `percentSymbol: "*"` `});`

新しいオプション

オプション	説明
percentSymbol	地域の設定によるパーセント記号とは別に、カスタムパーセント記号を設定します。
allowNullValue	このオプションが false で、エディターの値がない場合、「value」は空の文字列に設定されます。
disabled	無効な属性の設定に使用されます。編集はできません。すべてのボタンが無効になり、インタラクションが適用されます。送信時に、現在の値が要求として送信されません。`$('#percentEditor').igPercentEditor({ disabled: true })`.
buttonType	スピンボタン、クリアボタン、およびドロップダウンボタンの表示を設定または取得します。
listItemHoverDuration	ドロップダウンリスト内の項目に対するアニメーション時間のホバー / ホバー解除の設定に使用されます。`$('#percentEditor').igPercentEditor({ listItems: ["A", "B", "C", "D"], listItemHoverDuration: 400 })`
dropDownAttachedToBody	ドロップダウンリストの位置を取得または設定します。
dropDownAnimationDuration	ドロップダウンリストのアニメーション時間の表示 / 非表示をミリ秒で取得または設定します。
visibleItemsCount	同時に表示する項目数の設定に使用します。`$('#percentEditor').igPercentEditor({ listItems: ["A", "B", "C", "D"], visibleItemsCount: 2 })`.
isLimitedToListValues	リスト項目のみに値の設定を許可する機能を設定します。これを有効にすると、スピン操作は代わりにリスト項目に移動します。 `$('#percentEditor').igPercentEditor({ listItems: ["A", "B", "C", "D"], isLimitedToListValues: true })`。
placeHolder	エディターにフォーカスがなく、エディターの「value」が null または空の文字列の場合に、エディターに表示されるテキストを取得または設定します。
revertIfNotValid	ぼかし、または Enter キー使用時の値が無効な場合、エディターの値を前の値に戻すように設定します。false に設定されている場合は、clear が呼び出されます。`$('#percentEditor').igPercentEditor({ listItems: ["A", "B", "C", "D"], isLimitedToListValues: true, revertIfNotValid: false })`。
preventSubmitOnEnter	Enter キーが押されたときに送信しないように、エディターの機能を設定します。`$('#percentEditor').igPercentEditor({ preventSubmitOnEnter: true })`。
dropDownOrientation	開くボタンをクリックしたときのドロップダウンリストが開く方向を設定します。`$('#percentEditor').igPercentEditor({ listItems: ["A", "B", "C", "D"], dropDownOrientation: 'top' })`。
suppressNotifications	要求されたリストの選択、値のラッピング、またはスピンの制限など、エディターに組み込まれた基本の検証シナリオのデフォルト通知を無効にします。

注: 「decimalSeparator」オプションを設定する場合は、「gropupSeparator」の地域のオプションと異なっている必要があります。

すべてのオプションを参照

API メソッドの変更点

メソッド	旧	新
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	igPercentEditor のトップ / 外部要素として使用されている 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` が有効な場合、値またはドロップダウンナビゲーションと操作します。
spinDelta	以前のデフォルト値は 1 です。	デフォルト値は 0.01 です。
text	選択されたテキストをエディターから取得、またはエディターに設定します。	これは getter メソッド `displayValue` に置き換えられました。パラメーターを取らず、入力に表示されたすべての文字で文字列を返します。

新しい API メソッド

メソッド	説明
percentSymbol	数値と一緒に入力されたパーセント記号に使用される文字列を取得または設定します。パラメーターとして使用された値は、percentSymbol オプションに伝達され、オプションと同じ優先順位が付けられます。
inputName	エディターの要素に適用された name 属性を取得または設定します。
displayValue	入力で表示されたすべての文字による文字列を返します。
editorContainer	igEditor のトップ / 外部要素として使用されている jquery オブジェクトへの参照を取得します。
dropDownContainer	ドロップダウンのコンテナーとして使用されている jquery オブジェクトへの参照を取得します。
showDropDown	ドロップダウンリストを表示します。
hideDropDown	ドロップダウンリストを非表示にします。
dropDownVisible	項目がリストされたドロップダウンの表示状態を返します。
dropDownButton	エディターのドロップダウンボタンへの参照を返します。
clearButton	エディターのクリアボタンへの参照を返します。
insert	カレットの位置にテキストを貼り付けます。
spinUp	パラメーターに基づいてエディターの値をインクリメントするか、`isLimitedToListValues` が有効な場合にドロップダウンリストから前の値を選択します。
spinDown	パラメーターに基づいてエディターの値をデクリメントするか、`isLimitedToListValues` が有効な場合にドロップダウンリストから次の値を選択します。
spinUpButton	エディターのスピンアップボタンへの参照を返します。
spinDownButton	エディターのスピンダウンボタンへの参照を返します。

すべての API メソッドを参照

イベントの変更点

イベント	変更内容
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` という名前に変更されました。

新しいイベント

イベント	説明
rendering	エディターの描画が完了する前に起動されるイベントです。
rendered	エディターの描画が完了した後に起動されるイベントです。
dropDownListOpening	ドロップダウンを開く操作中に起動されるイベントです。
dropDownListOpened	ドロップダウンを開いた後に起動されるイベントです。
dropDownListClosing	ドロップダウンを閉じる操作中に起動されるイベントです。
dropDownListClosed	ドロップダウンを閉じた後に起動されるイベントです。
dropDownItemSelecting	ドロップダウンリストの項目の選択中に起動されるイベントです。
dropDownItemSelected	ドロップダウンリストの項目が選択された後に起動されるイベントです。
mouseout	ドロップダウンリストを含めたエディターの任意の部分で、マウスポインタが離れたときに起動されるイベントです。

すべてのイベントを参照

jQuery の要件

Lib	以前に必要とされたバージョン	新しく必要なバージョン
jQuery コア	1.4.4	1.9.1
jQuery UI	1.7	1.9.0

オンラインで表示: GitHub

Ignite UI | ヘルプ トピック