OSS で利用できる機能
エディター - 通貨エディター
このサンプルは通貨エディターの構成を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
売上総利益
￥738990.00
当期純利益
￥773022.95
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
#payment {
width: 50%;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 20px;
}
#salary {
float: left;
}
#salary > p {
margin-bottom: 20px;
}
.sample-page h2 {
margin-top: 0;
}
#deduction {
float: right;
}
#deduction label {
display: block;
}
.ui-igedit-container {
margin-bottom: 15px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:785px) {
#payment {
width: 60%;
}
}
@media screen and (max-width:685px) {
#payment {
width: 100%;
}
}
@media screen and (max-width:420px) {
#salary, #deduction {
float: none;
}
}
</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.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div id="payment" class="clearfix">
<div id="salary">
<h2>売上総利益</h2>
<p id="gross">￥738990.00</p>
<h2>当期純利益</h2>
<p id="nett">￥773022.95</p>
</div>
<div id="deduction">
<label for="federalTax">国税</label>
<input id="federalTax" />
<label for="stateTax">地方税</label>
<input id="stateTax" />
<label for="socialSecurity">国民年金</label>
<input id="socialSecurity" />
<label for="medicare">医療保険</label>
<input id="medicare" />
</div>
</div>
<script>
$(function () {
var listValues = [600, 900, 1500, 1680, 1980, 2100];
function nettChange() {
var gross = 6000.00, nett;
var federalTax = $("#federalTax").igCurrencyEditor("value");
var stateTax = $("#stateTax").igCurrencyEditor("value");
var socialSecurity = $("#socialSecurity").igCurrencyEditor("value");
var medicare = $("#medicare").igCurrencyEditor("value");
nett = gross - federalTax - stateTax - socialSecurity - medicare;
return parseFloat(nett.toFixed(2));
}
$("#federalTax").igCurrencyEditor({
listItems: listValues,
value: 600,
valueChanged: function (evt, ui) {
var newNettIncome = nettChange().toLocaleString();
$("#nett").text("￥" + newNettIncome);
}
});
$("#stateTax").igCurrencyEditor({
buttonType: "spin",
spinDelta: 0.01,
value: -300.00,
maxDecimals:2,
minValue: -331.80,
maxValue: 331.80,
valueChanged: function (evt, ui) {
var newNettIncome = nettChange().toLocaleString();
$("#nett").text("￥" + newNettIncome);
}
});
$("#socialSecurity").igCurrencyEditor({
value: -700,
minValue: -744,
maxValue: 744,
valueChanged: function (evt, ui) {
var newNettIncome = nettChange().toLocaleString();
$("#nett").text("￥" + newNettIncome);
}
});
$("#medicare").igCurrencyEditor({
value: 174,
positivePattern: "$(n)",
valueChanged: function (evt, ui) {
var newNettIncome = nettChange().toLocaleString();
$("#nett").text("￥" + newNettIncome);
}
});
});
</script>
</body>
</html>