OSS で利用できる機能
エディター - チェックボックス エディター
このサンプルは igCheckboxEditor コントロールの基本使用を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
送信した値
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
h3 {
font-size:20px;
margin-bottom:20px;
}
.group-fields {
margin-bottom: 10px;
}
.group-fields .inline {
display:inline;
}
.group-fields .ui-igcheckbox-normal {
margin-right: 5px;
float: left;
}
.submit-form {
float: left;
width: 400px;
min-width: 400px;
}
.submit-container
{
top: 0px;
right: 0px;
min-width: 400px;
float: right;
font-size: 18px;
}
.submit-container h3 {
display: none;
}
.submit-container p
{
font-size: 16px;
}
.submit-container p.result {
margin-top: 10px;
margin-bottom: 10px;
}
.submit-container span.result-name {
font-weight: bold;
text-transform: capitalize;
}
.clear {
clear: both;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<form id="form1" class="submit-form">
<div id="editors">
<h3>Infragistics Professional の構成</h3>
<div class="group-fields">
<div id="suite"></div>
<label for="suite" class="inline">UI コンポーネント</label>
</div>
<div class="group-fields">
<div id="icon"></div>
<label for="icon" class="inline">アイコン パック</label>
</div>
<div class="group-fields">
<div id="indigo"></div>
<label for="indigo" class="inline">Indigo Studio</label>
</div>
<input type="submit" id="order" value="注文"/>
</div>
</form>
<div class="submit-container">
<h3>送信した値</h3>
<div class="submit-container">
<p id="results"></p>
</div>
</div>
<div class="clear"></div>
<script>
$(function () {
$("#suite").igCheckboxEditor({
inputName: "suite",
checked: true,
readOnly: true,
value: "suite"
});
$("#icon").igCheckboxEditor({
inputName: "icon",
checked: false
});
$("#indigo").igCheckboxEditor({
inputName: "indigo",
checked: true,
disabled: true
});
$("#form1").submit(function (event) {
var submittedValues = $("#form1").serializeArray();
$("#results").empty();
$(".submit-container h3").show();
for (var i = 0 ; i < submittedValues.length; i++) {
$("#results").append("<p class='result'><span class='result-name'>" + submittedValues[i].name.replace(/([A-Z])/g, ' $1') + ":</span> " + submittedValues[i].value + "</p>");
}
return false;
});
});
</script>
</body>
</html>