Ignite UI™ API ヘルプ

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
デフォルト:: defaults

ウィジェットの領域設定を取得または設定します。

コードサンプル

//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 でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

blur
継承

キャンセル可能:: false

エディターの入力フィールドがフォーカスを失うときに発生します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorblur", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    blur: function (evt, ui) {
        ...
    }
});

focus
継承

キャンセル可能:: false

エディターの入力フィールドがフォーカスを受けるときに発生します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorfocus", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    focus: function (evt, ui) {
        ...
    }
});

keydown
継承

キャンセル可能:: true

keydown イベントで発生されます。
キー操作をキャンセルするには、False を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorkeydown", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    keydown: function (evt, ui) {
        ...
    }
});

keypress
継承

キャンセル可能:: true

keypress イベントで発生されます。
キー操作をキャンセルするには、False を返します。

evt
タイプ: Event

jQuery イベントオブジェクト。evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorkeypress", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    keypress: function (evt, ui) {
        ...
    }
});

keyup
継承

キャンセル可能:: false

keyup イベントで発生されます。

evt
タイプ: Event

jQuery イベントオブジェクト。evt.originalEvent を使用して、ブラウザーのイベントへの参照を取得します。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorkeyup", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    keyup: function (evt, ui) {
        ...
    }
});

mousedown
継承

キャンセル可能:: true

mousedown イベントで発生されます。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditormousedown", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    mousedown: function (evt, ui) {
        ...
    }
});

mousemove
継承

キャンセル可能:: false

ドロップダウンリストを含むエディターの任意の部分での mousemove に対して発生されます。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditormousemove", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    mousemove: function (evt, ui) {
        ...
    }
});

mouseout
継承

キャンセル可能:: false

ドロップダウンリストを含むエディターの任意の部分での mouseleave に対して発生されます。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditormouseout", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    mouseout: function (evt, ui) {
        ...
    }
});

mouseover
継承

キャンセル可能:: false

ドロップダウンリストを含むエディターの任意の部分での mouseover に対して発生されます。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditormouseover", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    mouseover: function (evt, ui) {
        ...
    }
});

mouseup
継承

キャンセル可能:: false

mouseup イベントで発生されます。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditormouseup", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    mouseup: function (evt, ui) {
        ...
    }
});

rendered
継承

キャンセル可能:: false

エディターのレンダリングが完了した後に発生します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorrendered", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    rendered: function (evt, ui) {
        ...
    }
});

rendering
継承

キャンセル可能:: true

エディターのレンダリングが完了する前に発生します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".selector").on("igcheckboxeditorrendering", function (evt, ui) {
    ...
});
 
//Initialize
$(".selector").igCheckboxEditor({
    rendering: function (evt, ui) {
        ...
    }
});

valueChanged

キャンセル可能:: false

エディター値が変更された後に発生します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".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 を使用して、エディター入力への参照を取得します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(".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

返却型の説明:

視覚エディター要素。
エディターの入力要素を取得します。
コードサンプル

$(".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

返却型の説明:

編集値が有効化どうか。
エディター内の値が有効かどうかをチェックします。注: この機能は自動通知をトリガーしません。
コードサンプル

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' オプションに関係なく、チェック状態を取得するには、$("selector").igCheckboxEditor("option", "checked"); を使用します。
- 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' です。

Ignite UI for jQuery | API リファレンス

ui.igCheckboxEditor

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル