Ignite UI for jQuery のチェック ボックス エディター、つまり igCheckboxEditor は、チェック ボックス フィールドを描画するコントロールです。1 つまたは複数の相互に排他的なオプションのどちらか一方の選択をユーザーに許可するほか、チェック ボックスの値をサーバーに送信できるようにします。
ユーザーがコントロールを操作すると、外観が更新されて、ただちにフィードバックが返されます。エディターには 2 つの状態があり、チェック ボックスは 2 つの状態のトグルとして機能します。1 つは、オンの状態を反映し、もう 1 つはオフの状態を反映します。
最初に、アプリケーションに必要なローカライズ済みのリソースを含めます。組み込むリソースの詳細は、「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-1.9.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/infragistics.core.js"></script>
<script type="text/javascript" src="/Scripts/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/infragistics.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.lob.js")"></script>
jQuery の実装では、HTML 内のターゲット要素として INPUT、SPAN または DIV を作成します。ASP.NET MVC の実装では、含める要素を Ignite UI for MVC が作成するため、この手順はオプションです。
HTML の場合:
<input id="checkboxEditor" />
上記の手順完了後、チェック ボックス エディターを初期化します。
注: ASP.NET MVC View では、その他のオプションをすべて設定した後で
Renderメソッドを呼び出す必要があります。
JavaScript の場合:
<script type="text/javascript">
$('#checkBoxEditor').igCheckboxEditor();
</script>
Razor の場合:
@(Html.Infragistics().CheckboxEditor()
.ID("checkBoxEditor")
.Render())
Web ページを実行し、igCheckboxEditor コントロールの基本セットアップを表示します。
インフラジスティックスの多くのコントロールと同様に、igCheckboxEditor はキーボード ナビゲーションをサポートします。基本的には、Tab キーを使用して、チェック ボックスの要素をフォーカスします。チェック ボックスがフォーカスされると、[Space] キーを使用して、コントロールのチェック状態をトグルすることができます。
| 押す | 動作 |
|---|---|
| Tab キー | チェック ボックス エディターをフォーカスします |
| Space キー | エディターを選択または選択解除します |
このセクションでは、igCheckboxEditor のいくつかの固有のオプションとその使用方法について説明します。
最初に、value オプションを説明します。value オプションは、フォームの送信で使用する入力の値を設定します。このオプションが設定されていない場合、チェック ボックス エディターは、チェック状態に応じて 2 つの状態、すなわち true と falseを持つコントロールとして機能します。
もう 1 つの重要なプロパティは、inputName です。このプロパティを設定しない場合、ウィジェットは単純なバイナリ エディターとしてのみ使用できます。コントロールをフォーム送信で使用するには、name 属性が必要です。name 属性を設定するには、次の2つの方法があります。inputName プロパティを使用します。またはINPUT DOM 要素で name 属性を設定します。
JavaScript の場合:
$('#checkInput').igCheckboxEditor({
inputName: "chkAgreeTerms",
value: "Agree",
checked: true
});
HTML の場合:
<input id="checkBoxEditor" name="chkAgreeTerms" value="Agree" checked/>
オンラインで表示: GitHub