Ignite UI for jQuery™ の通貨エディター、つまり igCurrencyEditor は、さまざまな通貨タイプに書式設定された数値のみを受け付ける入力フィールドを描画するコントロールです。igCurrencyEditor コントロールは、ブラウザーが公開するさまざまな地域のオプションを認識することにより、ローカライズをサポートします。
ユーザーがコントロールを操作すると、変更が反映されて、ただちに外観が更新されます。エディターがフォーカスを失うと、値に依存した正または負のパターンがコントロールに適用され、適切な通貨記号が追加されます。
図 1: 米国通貨向けに書式設定された igCurrencyEditor
igCurrencyEditor には以下の特徴があります。
igCurrencyEditor は igNumericEditor のオプションを継承しますが、いくつかの igCurrencyEditor のみの独自なプロパティがあります。たとえば、currencySymbol オプションを使用すると、表示された通貨記号を変更できます。すべての igCurrencyEditor オプションについては、igCurrencyEditor jQuery API を参照してください。
igNumericEditor と同様に、igCurrencyEditor には negativePattern オプションがあります。これは、以下のような負の数値の表示モード パターンを定義します。
negativePattern: '$(n)'
「$」は currencySymbol を表し、「n」は数値を表します。「-」および「()」は、パターンの静的部分です。
数値エディターとは異なり、通貨エディターには正のパターンがあります。positivePattern オプションは、正の数値の表示モード パターンを定義します。「$」は currencySymbol を表し、「n」は数値を表します。これら 2 つの文字を使用すると、柔軟性の高いカスタム パターンをビルドできます。以下に、その使用例を示します。
$('#currencyEditor').igCurrencyEditor({
positivePattern:'$$n'
});
新しい igCurrencyEditor を簡単にアプリケーションに追加するには、Ignite UI CLI を使用します。新しいアプリケーションを作成した後、以下のコマンドを実行すると、通貨エディターがプロジェクトに追加されます。
ig add currency-editor newCurrencyEditor
このコマンドは、アプリケーションが Angular、React、または jQuery に関係なく新しい通貨エディターを追加します。
すべての利用可能なコマンドおよび詳細な情報については、「Ignite UI CLI の使用」のトピックを参照してください。
ご自分の 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="currencyEditor" />
上記の手順完了後、数値エディターを初期化します。
注: ASP.NET MVC View では、その他のオプションをすべて設定した後で
Renderメソッドを呼び出す必要があります。
JavaScript の場合:
<script type="text/javascript">
$('#currencyEditor').igCurrencyEditor();
</script>
Razor の場合:
@(Html.Infragistics().CurrencyEditor()
.ID("currencyEditor")
.Render())
Web ページを実行し、作成した igCurrencyEditor コントロールを表示します。
オンラインで表示: GitHub