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