このトピックでは、igCheckboxEditor をカスタマイズする方法を紹介します。
最初に、アイコンのイメージについて説明します。次のイメージに示すように、オンの状態のコントロールを表示するデフォルトのアイコンは、チェックアイコンですが、このイメージにこだわることはありません。igCheckboxEditor では、カスタマイズしたチェック状態のイメージを使用することができます。jQuery UI アイコン から選択、または独自のアイコンを設定できます。次のように実行します。独自のイメージを使用するには、iconClass プロパティをカスタム クラスに設定します。または JQuery クラスを使用します。さらに、Width プロパティおよびHeight プロパティでチェック ボックス エディターのサイズを変更する場合は、設定したカスタム イメージのサイズに応じた独自のカスタム クラスを使用することをお勧めします。
デフォルトのアイコンのイメージ
jQuery アイコン を使用するには、選択したアイコンのクラスを iconClass プロパティに設定する必要があります。
JavaScript:
$('#checkInput').igCheckboxEditor({
iconClass: "ui-icon-star"
});
デフォルトのイメージを使用せずに、カスタムのイメージを使用する場合も、インフラジスティックスの igCheckboxEditor コントロールにより簡単に設定できます。この設定には、作成した独自の CSS クラスを iconClass プロパティの値として使用します。
CSS:
.ui-state-default .ui-icon.myIcon,
.ui-state-hover .ui-icon.myIcon {
background: url("check.png");
width: auto;
height: auto;
}
JavaScript:
$('#checkInput').igCheckboxEditor({
width: 50,
height: 50,
iconClass: "myIcon"
});
コントロールのカスタマイズで便利なもう 1 つのオプションは、size プロパティです。size プロパティでは、極小から大までの 4 つの値が選択できます。デフォルトのサイズは、「標準」です。以下の表に、各サイズのイメージを示します。
| イメージ | サイズ |
|---|---|
 |
very small |
 |
small |
|
normal |
 |
large |
JavaScript:
$('#checkInput').igCheckboxEditor({
size: "verysmall"
});
size オプションの他に、width プロパティおよび height プロパティを使用して、igCheckboxEditor コントロールのサイズを変更できます。これらのプロパティにより size オプションが上書きされることに注意が必要です。また、width プロパティおよび height プロパティを変更する場合は、アイコンは必ず DIV 要素の中央に配置されることにも注意してください。
JavaScript:
$('#checkInput').igCheckboxEditor({
width: 60,
height: 60
});
寸法は CSS を使用して設定することができます。この方法を使用すると、追加の CSS ルールを適用することができます。
CSS
.ui-checkbox-container {
width: 60;
height: 60;
}
igCheckboxEditor コントロールも jQuery UI ThemeRoller を使用して全体のスタイルを設定できます。
ThemeRoller を使用する手順は、次のとおりです。
jquery-ui.min.css ファイルを選択し、infragistics.theme.css と置き換えます。
オンラインで表示: GitHub