Ignite UI for jQuery™ のパーセント エディター、すなわち igPercentEditor
は、パーセント形式に書式設定された数値のみを受け付ける入力フィールドを描画するコントロールです。igPercentEditor
コントロールは、ブラウザーから公開される異なる地域のオプションを認識することにより、ローカライズをサポートします。
igPercentEditor
コントロールは大幅にスタイル変更ができるため、デフォルトのスタイルとまったく異なるルック アンド フィールのコントロールを実現できます。スタイル設定オプションでは、独自のスタイルも jQuery UI の ThemeRoller
のスタイルも使用できます。
図 1: ユーザー向けに描画した igPercentEditor
igPercentEditor
には以下の特徴があります。
ご自分の 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-1.9.1.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="percentEditor" />
上記の手順完了後、数値エディターを初期化します。
注: ASP.NET MVC View では、その他のオプションをすべて設定した後で
Render
メソッドを呼び出す必要があります。
JavaScript の場合:
<script type="text/javascript">
$('#percentEditor').igPercentEditor();
</script>
Razor の場合:
@(Html.Infragistics().PercentEditor()
.ID("percentEditor")
.Render())
Web ページを実行し、igPercentEditor
コントロールの基本セットアップを表示します。
オンラインで表示: GitHub