ui.igCheckboxEditor
コード サンプル
<!DOCTYPE html> <html> <head> <!--Ignite UI Required Combined CSS Files--> <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.popover.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.notifier.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.editors.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.shared.css" rel="stylesheet" /> <link href="css/structure/infragistics.css" rel="stylesheet" /> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <!--Ignite UI Required Combined JavaScript Files--> <script src="js/infragistics.core.js"></script> <script src="js/infragistics.lob.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#checkbox').igCheckboxEditor({ checked: true, inputName: "chkBox2name", value: "semanticValue", readOnly: true, size: "normal" }); }); </script> </head> <body> <input id="checkbox"/> </body> </html>
関連サンプル
関連トピック
依存関係
-
checked
- タイプ:
- bool
- デフォルト:
- false
チェックボックスがチェックされたかどうかを取得または設定します。
コード サンプル
//Initialize $('.selector').igCheckboxEditor({ checked: true }); //Get var checked = $(".selector").igCheckboxEditor("option", "checked"); //Set $(".selector").igCheckboxEditor("option", "checked", true);
-
disabled
継承- タイプ:
- bool
- デフォルト:
- false
入力の disabled 属性を取得または設定します。True に設定される場合、入力が無効で、すべてのボタンおよび操作が無効です。エディターのフォームの送信で値が送信されません。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ disabled : false }); //Get var disabled = $(".selector").igCheckboxEditor("option", "disabled"); //Set $(".selector").igCheckboxEditor("option", "disabled", true);
-
height
継承- タイプ:
- enumeration
- デフォルト:
- null
コントロールの高さを取得または設定します。
メンバー
- null
- タイプ:object
- 他の高さが定義されていない場合、エディターは親コンテナーに収まります。
- string
- 高さをピクセル (px) またはパーセンテージ (%) に設定できます。
- number
- 高さをピクセル単位の数値で設定できます。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ height : 25 }); //Get var height = $(".selector").igCheckboxEditor("option", "height"); //Set $(".selector").igCheckboxEditor("option", "height", 25);
-
iconClass
- タイプ:
- string
- デフォルト:
- "ui-icon-check"
チェックボックスにカスタム クラスを取得または設定します。このようにカスタム画像を使用できます。
次の jQuery クラスも使用できます: http://api.jqueryui.com/theming/icons/。コード サンプル
//Initialize $('.selector').igCheckboxEditor({ iconClass: "ui-icon-check" }); //Get var iconClass = $(".selector").igCheckboxEditor("option", "iconClass"); //Set $(".selector").igCheckboxEditor("option", "iconClass", "ui-icon-check");
-
inputName
継承- タイプ:
- string
- デフォルト:
- null
値入力の名前属性を取得または設定します。入力はサーバーへ値を送信するために使用されます。ターゲット要素が入力で名前要素があり、開発者が inputName オプションに設定した場合、このオプションは値入力を上書きし要素の属性を削除します。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ inputName : "textField" }); //Get var inputName = $(".selector").igCheckboxEditor("option", "inputName"); //Set $(".selector").igCheckboxEditor("option", "inputName", "textField");
-
language
継承- タイプ:
- string
- デフォルト:
- "en"
ウィジェットのロケール言語設定を取得または設定します。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ language: "ja" }); // Get var language = $(".selector").igCheckboxEditor("option", "language"); // Set $(".selector").igCheckboxEditor("option", "language", "ja");
-
locale
継承- タイプ:
- object
- デフォルト:
- null
ウィジェットのロケール設定を取得または設定します。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ locale: {} }); // Get var locale = $(".selector").igCheckboxEditor("option", "locale"); // Set $(".selector").igCheckboxEditor("option", "locale", {});
-
readOnly
- タイプ:
- bool
- デフォルト:
- false
読み取り専用属性を取得または設定します。編集を許可しません。チェックボックス状態をインタラクションにより変更することを無効にしますが、コードで変更できます。送信において現在の値が要求に送られます。
コード サンプル
//Initialize $('.selector').igCheckboxEditor({ readOnly: true }); //Get var readOnly = $(".selector").igCheckboxEditor("option", "readOnly"); //Set $(".selector").igCheckboxEditor("option", "readOnly", true);
-
regional
継承- タイプ:
- enumeration
- デフォルト:
- en-US
ウィジェットの領域設定を取得または設定します。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ regional: "ja" }); // Get var regional = $(".selector").igCheckboxEditor("option", "regional"); // Set $(".selector").igCheckboxEditor("option", "regional", "ja");
-
size
- タイプ:
- enumeration
- デフォルト:
- normal
プリセット スタイルに基づいてチェックボックスのサイズを取得または設定します。 サイズが異なる場合、代わりに 'width' および 'height' オプションを定義します。
メンバー
- verysmall
- タイプ:string
- Checkbox エディターのサイズがとても小さい。
- small
- タイプ:string
- Checkbox エディターのサイズが小さい。
- normal
- タイプ:string
- Checkbox エディターのサイズが標準。
- large
- タイプ:string
- Checkbox エディターのサイズが大きい。
コード サンプル
//Initialize $('.selector').igCheckboxEditor({ size: "large" }); //Get var size = $(".selector").igCheckboxEditor("option", "size"); //Set $(".selector").igCheckboxEditor("option", "size", "large");
-
tabIndex
- タイプ:
- number
- デフォルト:
- 0
チェックボックス エディター入力の tabIndex 属性を取得または設定します。
コード サンプル
//Initialize $('.selector').igCheckboxEditor({ tabIndex: 1 }); //Get var tabIndex = $(".selector").igCheckboxEditor("option", "tabIndex"); //Set $(".selector").igCheckboxEditor("option", "tabIndex", 1);
-
validatorOptions
継承- タイプ:
- object
- デフォルト:
- null
igValidator ウィジェットによってサポートされるオプションを取得または設定します。
注: エラーをトリガーした際に igValidator の検証ルールは最小値/長さおよび最大値/長さを別々に適用します。エディターの対応するオプションは、定義された入力規則に反する値の入力を防止します。コード サンプル
//Initialize $(".selector").igCheckboxEditor({ validatorOptions : { successMessage: "Success", required: true, onchange: true, notificationOptions: { mode: "popover" } } }); //Get var validateOptions = $(".selector").igCheckboxEditor("option", "validatorOptions"); //Set $(".selector").igCheckboxEditor("option", "validatorOptions", {onblur: true, onchange: true});
-
value
継承- タイプ:
- object
- デフォルト:
- null
エディター内の値を取得または設定します。エディターのタイプおよび各エディター タイプの dataMode オプションに基づいたオプションを取得または設定する効果。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ value : "Some text" }); //Get var value = $(".selector").igCheckboxEditor("option", "value"); //Set $(".selector").igCheckboxEditor("option", "value", "Some text");
-
width
継承- タイプ:
- enumeration
- デフォルト:
- null
コントロールの幅を取得または設定します。
メンバー
- null
- タイプ:object
- 他の幅が定義されていない場合、データに合わせて引き伸ばされます。
- string
- ウィジェットの幅をピクセル (px) またはパーセンテージ (%) に設定できます。
- number
- ウィジェットの幅は数値としてピクセルで設定できます。
コード サンプル
//Initialize $(".selector").igCheckboxEditor({ width : 200 }); //Get var width = $(".selector").igCheckboxEditor("option", "width"); //Set $(".selector").igCheckboxEditor("option", "width", 200);
Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。
-
blur
継承- キャンセル可能:
- false
エディターの入力フィールドがフォーカスを失ったとき発生するイベント。
関数は引数 evt を取得します。
ui.owner を使用して igEditor への参照を取得します。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。コード サンプル
$(".selector").on("igcheckboxeditorblur", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ blur: function (evt, ui) { ... } });
-
focus
継承- キャンセル可能:
- false
エディターの入力フィールドがフォーカスを取得したとき発生するイベント。
関数は引数 evt を取得します。
ui.owner を使用して igEditor への参照を取得します。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。コード サンプル
$(".selector").on("igcheckboxeditorfocus", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ focus: function (evt, ui) { ... } });
-
keydown
継承- キャンセル可能:
- true
keydown イベントに対して発生するイベント。
キー操作をキャンセルするには、False を返します。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.key を使用して keyCode の値を取得します。コード サンプル
$(".selector").on("igcheckboxeditorkeydown", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ keydown: function (evt, ui) { ... } });
-
keypress
継承- キャンセル可能:
- true
keypress イベントに対して発生するイベント。
キー操作をキャンセルするには、False を返します。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.key を使用して keyCode の値を取得します。
ui.key を元のエントリを置き換える別の文字に設定します。コード サンプル
$(".selector").on("igcheckboxeditorkeypress", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ keypress: function (evt, ui) { ... } });
-
keyup
継承- キャンセル可能:
- false
keyup イベントに対して発生するイベント。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.key を使用して keyCode の値を取得します。コード サンプル
$(".selector").on("igcheckboxeditorkeyup", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ keyup: function (evt, ui) { ... } });
-
mousedown
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mousedown に対して発生するイベント。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.elementType を使用して、マウス位置の HTML 要素のタイプ (field、button、spinUpper、spinLower、または item# など) を取得します。
ui.id および ui.elementType を使用して、マウス位置の HTML 要素を表すフラグを取得します。コード サンプル
$(".selector").on("igcheckboxeditormousedown", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mousedown: function (evt, ui) { ... } });
-
mousemove
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mousemove に対して発生するイベント。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.elementType を使用して、マウス位置の HTML 要素のタイプ (field、button、spinUpper、spinLower、または item# など) を取得します。
ui.id および ui.elementType を使用して、マウス位置の HTML 要素を表すフラグを取得します。コード サンプル
$(".selector").on("igcheckboxeditormousemove", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mousemove: function (evt, ui) { ... } });
-
mouseout
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mouseleave に対して発生するイベント。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.elementType を使用して、マウス位置の HTML 要素のタイプ (field、button、spinUpper、spinLower、または item# など) を取得します。
ui.id および ui.elementType を使用して、マウス位置の HTML 要素を表すフラグを取得します。コード サンプル
$(".selector").on("igcheckboxeditormouseout", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mouseout: function (evt, ui) { ... } });
-
mouseover
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mouseover に対して発生するイベント。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.elementType を使用して、マウス位置の HTML 要素のタイプ (field、button、spinUpper、spinLower、または item# など) を取得します。
ui.id および ui.elementType を使用して、マウス位置の HTML 要素を表すフラグを取得します。コード サンプル
$(".selector").on("igcheckboxeditormouseover", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mouseover: function (evt, ui) { ... } });
-
mouseup
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mouseup に対して発生するイベント。
関数は引数 evt および ui を受け取ります。
evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui.owner を使用して igEditor への参照を取得します。
ui.elementType を使用して、マウス位置の HTML 要素のタイプ (field、button、spinUpper、spinLower、または item# など) を取得します。
ui.id および ui.elementType を使用して、マウス位置の HTML 要素を表すフラグを取得します。コード サンプル
$(".selector").on("igcheckboxeditormouseup", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mouseup: function (evt, ui) { ... } });
-
rendered
継承- キャンセル可能:
- false
エディターの描画が完了した後に発生するイベント。
関数は引数 evt および ui を受け取ります。
ui.owner を使用して、レンダリングを実行するエディターへの参照を取得します。
ui.element を使用して、エディター要素への参照を取得します。コード サンプル
$(".selector").on("igcheckboxeditorrendered", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ rendered: function (evt, ui) { ... } });
-
rendering
継承- キャンセル可能:
- false
エディターの描画が完了する前に発生するイベント。
関数は引数 evt および ui を受け取ります。
ui.owner を使用して、レンダリングを実行するエディターへの参照を取得します。
ui.element を使用して、エディター要素への参照を取得します。コード サンプル
$(".selector").on("igcheckboxeditorrendering", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ rendering: function (evt, ui) { ... } });
-
valueChanged
- キャンセル可能:
- false
エディター内の値が変更された後に発生するイベント。フォーカスの消失またはスピン イベントに対して発生します。
関数は引数 evt および ui を受け取ります。
ui.owner を使用して igEditor への参照を取得します。
ui.newValue を使用して新しい値を取得します。
ui.newState を使用して、新しい状態を取得します。
ui.element を使用して、DOM 要素への参照を取得します。
ui.editorInput を使用して、エディター入力への参照を取得します。コード サンプル
$(".selector").on("igcheckboxeditorvaluechanged", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ valueChanged: function (evt, ui) { ... } });
-
valueChanging
- キャンセル可能:
- true
エディター内の値が変更される前に発生するイベント。
変更をキャンセルするには、False を返します。
フォーカスの消失またはスピン イベントに対して発生します。
関数は引数 evt および ui を受け取ります。
ui.owner を使用して igEditor への参照を取得します。
ui.newValue を使用して新しい値を取得します。
ui.newState を使用して、新しい状態を取得します。
ui.element を使用して、DOM 要素への参照を取得します。
ui.editorInput を使用して、エディター入力への参照を取得します。コード サンプル
$(".selector").on("igcheckboxeditorvaluechanging", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ valueChanging: function (evt, ui) { ... } });
-
changeGlobalLanguage
継承- .igCheckboxEditor( "changeGlobalLanguage" );
ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。
コード サンプル
$(".selector").igCheckboxEditor("changeGlobalLanguage");
-
changeGlobalRegional
継承- .igCheckboxEditor( "changeGlobalRegional" );
ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。
コード サンプル
$(".selector").igCheckboxEditor("changeGlobalRegional");
-
changeLocale
継承- .igCheckboxEditor( "changeLocale", $container:object );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。- $container
- タイプ:object
- オプションのパラメーター: 設定しない場合、ウィジェットの要素を $container として使用します。
コード サンプル
$(".selector").igCheckboxEditor("changeLocale");
-
destroy
継承- .igCheckboxEditor( "destroy" );
ウィジェットを破棄します。
コード サンプル
$(".selector").igCheckboxEditor("destroy");
-
editorContainer
継承- .igCheckboxEditor( "editorContainer" );
- 返却型:
- jquery
- 返却型の説明:
- コンテナー エディター要素。
エディターをラップする jQuery 要素への参照を取得します。
コード サンプル
$(".selector").igCheckboxEditor("editorContainer");
-
field
継承- .igCheckboxEditor( "field" );
- 返却型:
- jquery
- 返却型の説明:
- 視覚エディター要素。
エディターの入力要素を取得します。
returnType="$" 視覚エディター要素。コード サンプル
$(".selector").igCheckboxEditor("field");
-
hasFocus
継承- .igCheckboxEditor( "hasFocus" );
- 返却型:
- bool
- 返却型の説明:
- エディターがフォーカスされるかどうかを返します。
エディターがフォーカスを持つかどうかを取得します。
コード サンプル
$(".selector").igCheckboxEditor("hasFocus");
-
hide
継承- .igCheckboxEditor( "hide" );
エディターを非表示にします。
コード サンプル
$(".selector").igCheckboxEditor("hide");
-
inputName
継承- .igCheckboxEditor( "inputName", [newValue:string] );
- 返却型:
- string
- 返却型の説明:
- 現在の入力名。
エディター要素に適用される名前属性を取得または設定します。
- newValue
- タイプ:string
- オプション
- 新しい入力名。
コード サンプル
$(".selector").igCheckboxEditor("inputName", "checkbox");
-
isValid
- .igCheckboxEditor( "isValid" );
- 返却型:
- bool
- 返却型の説明:
- 編集値が有効化どうか。
エディター内の値が値かどうかチェックします。注: igCheckboxEditor の場合、この関数は常に true を返します。
コード サンプル
var isValid = $(".selector").igCheckboxEditor("isValid");
-
setFocus
継承- .igCheckboxEditor( "setFocus", [delay:number] );
指定した遅延時間の後にフォーカスをエディターに設定します。
- delay
- タイプ:number
- オプション
- エディターにフォーカスする前の遅延。
コード サンプル
$(".selector").igCheckboxEditor("setFocus", 200);
-
show
継承- .igCheckboxEditor( "show" );
エディターを表示します。
コード サンプル
$(".selector").igCheckboxEditor(("show");
-
toggle
- .igCheckboxEditor( "toggle" );
チェックボックスの状態を切り替えます。
コード サンプル
$(".selector").igCheckboxEditor("toggle");
-
validate
継承- .igCheckboxEditor( "validate" );
- 返却型:
- bool
- 返却型の説明:
- 編集値が有効化どうか。
エディターの検証をトリガーします。 validatorOptions を設定すると igValidator で検証も呼び出されます。
コード サンプル
var valid = $(".selector").igCheckboxEditor("validate");
-
validator
継承- .igCheckboxEditor( "validator" );
- 返却型:
- object
- 返却型の説明:
- igValidator への参照または null を返します。
エディターで使用される igValidator への参照を取得します。
コード サンプル
var validator = $(".selector").igCheckboxEditor("validator");
-
value
- .igCheckboxEditor( "value", newValue:object );
- 返却型:
- string
- 返却型の説明:
- HTML フォームによって送信される igCheckboxEditor の現在のチェック状態 (bool) または値 (string)。
HTML フォームによって送信される igCheckboxEditor の現在のチェック状態/値を取得または設定します。
1.value オプションが定義される場合、'value' メソッドは、エディターがチェックされ、フォームが送信されるときに送信される値を返します。
チェックボックスがブール値エディターの場合に便利です。その場合、返却型は bool です。
2.'value' オプションが定義されている場合、'value' メソッドは 'value' オプションを返します。
HTML フォームによってサーバーに送信される値を返します。
'value' オプションに関係なく、チェック状態を取得するには、$("checkBox").igCheckboxEditor("option", "checked"); を使用します。
returnType="boolean|string" HTML フォームによって送信される igCheckboxEditor の現在のチェック状態または値。- newValue
- タイプ:object
コード サンプル
//Get var editorVal = $(".selector").igCheckboxEditor("value"); //Set $(".selector").igCheckboxEditor("value", 42);
-
ui-state-active
- エディターがアクティブなときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-active' です。
-
ui-icon
- チェックボックス アイコンのスタイル設定がある場合、チェックボックス要素に適用されるクラス。デフォルト値は 'ui-icon' です。
-
ui-helper-hidden
- 非表示の HTML チェックボックスに適用されるクラス。デフォルト値は 'ui-helper-hidden' です。
-
ui-igcheckbox-normal-on
- チェックされるときにチェックボックス要素に適用されるクラス。デフォルト値は 'ui-igcheckbox-normal-on' です。
-
ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal
- エディターがコンテナーに描画される場合に最上位の要素に適用されるクラス。デフォルト値は 'ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal' です。
-
ui-state-checkbox-checked
- エディターがチェックされるときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-checkbox-checked' です。
-
ui-state-disabled
- 無効な状態の編集要素に適用されるクラス。デフォルト値は 'ui-igedit-disabled ui-state-disabled' です。
-
ui-igedit-input
- メイン/最上位の要素に適用されるクラス。デフォルト値は 'ui-igedit-input' です。
-
ui-state-focus
- エディターがフォーカスされるときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-focus' です。
-
ui-state-hover
- エディターがホバーされるときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-hover' です。
-
ui-icon-custom
- 画像を中央に配置するためにカスタム幅および高さを持つチェックボックス要素に適用されるクラス。既定値は 'ui-icon-custom' です。
-
ui-igcheckbox-normal-off
- チェックされていないときにチェックボックス要素に適用されるクラス。デフォルト値は 'ui-igcheckbox-normal-off' です。