このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

igNumericEditor の概要

Ignite UI for jQuery™ 数値エディター、つまり igNumericEditor は dataMode 値で決定された数値のみを受け付ける入力フィールドを描画するコントロールです。igNumericEditor コントロールは、ブラウザーから公開される異なる地域のオプションを認識することにより、ローカライズをサポートします。

igNumericEditor コントロールは、任意のサーバー技術を使用する作業を構成できる豊富なクライアント側 API を公開します。Ignite UI for jQuery™ のコントロールはサーバー非依存ですが、Microsoft® ASP.NET MVC Framework 専用の Ignite UI for MVC の一部として含まれるコントロールでは、希望する .NET™ 言語を使用して構成できます。

igNumericEditor コントロールは、大幅にスタイル変更ができるため、デフォルトのスタイルとまったく異なるルックアンドフィールのコントロールを実現できます。スタイル設定オプションでは、独自のスタイルも jQuery UI の ThemeRoller のスタイルも使用できます。

図 1: ユーザーに描画された igNumericEditor

基本的な使用方法サンプル

機能

igNumericEditor には次のような特徴があります。

全体のテーマのサポート
検証
異なるデータモード
JavaScript クライアント API
ASP.NET MVC
最小値と最大値

Ignite UI CLI を使用して igNumericEditor の追加

新しい igNumericEditor を簡単にアプリケーションに追加するには、Ignite UI CLI を使用します。新しいアプリケーションを作成した後、以下のコマンドを実行すると、数値エディターがプロジェクトに追加されます。

   ig add numeric-editor newNumericEditor

このコマンドは、アプリケーションが Angular、React、または jQuery に関係なく新しい数値エディターを追加します。

すべての利用可能なコマンドおよび詳細な情報については、「Ignite UI CLI の使用」のトピックを参照してください。

igNumericEditor の Web ページへの追加

最初に、アプリケーションに必要なローカライズ済みのリソースを含めます。組み込むリソースの詳細は、「Ignite UI for jQuery で JavaScript リソースを使用」ヘルプトピックをご覧ください。

ご自分の HTML ページまたは ASP.NET MVC View で、必要な JavaScript ファイル、CSS ファイル、および ASP.NET MVC アセンブリを参照してください。

HTML の場合:

<link type="text/css" href="/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.core.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.lob.js"></script>

Razor の場合:

@using Infragistics.Web.Mvc;

<link type="text/css" href="@Url.Content("~/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
<link type="text/css" href="@Url.Content("~/css/structure/infragistics.css")" rel="stylesheet" />

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.lob.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/modules/i18n/regional/infragistics.ui.regional-en.js")"></script>

jQuery の実装では、HTML 内のターゲット要素として INPUT、DIV、または SPAN を作成します。ASP.NET MVC の実装では、含める要素を Ignite UI for MVC が作成するため、この手順はオプションです。

HTML の場合:
```
<input id="numericEditor"/>
```

上記の手順完了後、数値エディターを初期化します。

注: ASP.NET MVC View では、その他のオプションをすべて設定した後で Render メソッドを呼び出す必要があります。

JavaScript の場合:

 <script type="text/javascript">
 $('#numericEditor').igNumericEditor();
 </script>

Razor の場合:

 @(Html.Infragistics().NumericEditor()
      .ID("numericEditor")
      .DataMode(NumericEditorDataMode.Int)
      .MinValue(0)
      .Value(0)
      .Width(120)
      .Render())

Web ページを実行し、igNumericEditor コントロールの基本セットアップを表示します。

固有のオプション

igNumericEditor は、数値入力を処理するためのオプションのセットがあります。はじめにエディター値が規格のデータ型に基づいて承諾する範囲を定義する dataMode プロパティを説明します。デフォルト値は "double" ですが、"int"、"float"、"byte" およびその他も選択できます。すべての値については、igNumericEditor jQuery API を参照してください。

他にも固有のオプションとして、decimalSeparator があり、小数点記号として表示する文字を選択できます。groupSeparator にも同様の機能がありますが、このオプションでは、千以上の大きな数値のグループの桁区切りとして使用する文字を選択できます。これらの使用例は後述しますが、その前にもう 1 つプロパティを見てみましょう。groups は配列を値として取得します。このプロパティは、セパレーターを使用する桁数の決定に使用できます。グループは、左から右にカウントされます。また、このオプションは表示モードでのみ有効であることに注意してください。また、decimalSeparator および groupSeparator オプションを同じ値に設定しないでください。

$('#divEditor').igNumericEditor({
    width: "300",
    groups: [1,2,3],
    groupSeparator:"-"
});

ドロップダウンリストの構成

定義済みの値を持つドロップダウンリストを作成するには、listItems オプションによって数値の配列を提供できます。igNumericEditor が許可する値を項目リストに含まれる項目のみに制限できます。isLimitedToListValues オプションを設定します。

HTML:

<input id="federalTax"/>

Javascript:

<script type="text/javascript">
    $("#federalTax").igNumericEditor({
        listItems: [10, 15, 25, 28, 33, 35],
        value:10,
        isLimitedToListValues: true
    });
</script>

Razor の場合:

@(Html.Infragistics().NumericEditor()
    .ID("federalTax")
    .Value(10)
    .ListItems(new List<object>() { 10, 15, 25, 28, 33, 35 })
    .IsLimitedToListValues(true)
    .Render())

スピン機能の構成

スピン機能は常にキーボード操作により利用可能ですが、追加のオプションで構成できます。エディターは、buttonType オプションにより複数のボタンをサポートします。スピンボタン、クリアボタン、およびドロップダウンボタンがあります。注: このオプションは、初期化時のみ設定できます。'dropdown, spin' または 'spin, clear' などの組み合わせもサポートされます。spinDelta オプションは、値がスピンアクションにより編集される場合に使用される増加/減少ステップを指定します。注: spinDelta 値は負の数に設定できません。整数値以外の値は "double" および "float" の dataMode のみにサポートされます。

HTML:

<input id="stateTax"/>

Javascript:

<script type="text/javascript">
    $("#stateTax").igNumericEditor({
        buttonType: 'spin',
        spinDelta:0.01,
        minValue:-5.53,
        maxValue:5.52,
        value:-5.00
});
</script>

Razor の場合:

@(Html.Infragistics().NumericEditor()
    .ID("stateTax")
    .ButtonType(TextEditorButtonType.Spin)
    .SpinDelta(0.01)
    .MinValue(-5.53)
    .MaxValue(5.53)
    .Value(-5.00)
    .Render())

注: すべてのプロパティについては、API ドキュメントを参照してください。

Ignite UI | ヘルプトピック

igNumericEditor の概要