OSS で利用できる機能
エディター - クレジット
このサンプルは、igNumericEditor、igTextEditor、igCheckbox、igPercentEditor、igMaskEditor、 igDateEditor の基本的なオプションを使用してローンの計算を行います。
このサンプルは 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" />
<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>
<style>
#container {
width: 100%;
min-width: 900px;
max-width: 900px;
display: inline-block;
background-image: url("http://s1.postimg.org/ip7nzwz2n/logo.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: right bottom;
}
#igCheckboxEditorsContainer {
top: 0px;
left: 0px;
height: 500px;
width: 450px;
padding-top: 15px;
float: left;
}
#ValuesContainer {
top: 0px;
right: 0px;
height: 500px;
width: 100%;
padding-top: 15px;
float: right;
font-size: 18px;
}
#ValuesContainer.p {
font-size: 16px;
}
@media only screen and (max-width:780px){
#igCheckboxEditorsContainer
{
float: none;
height: auto;
}
#valuesContainer{
margin-top: 20px;
}
#container{
background-image:none;
}
}
</style>
<p>ローンの月賦を決定するには、ローン計算機を使用してください。</p>
<div id="container">
<div id="igCheckboxEditorsContainer">
<form id="form" action="javascript:console.log('送信');">
<table>
<tr>
<td>
<div class="divHeight"><div id="firstName"></div></div>
</td>
<td>
名前
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="lastName"></div></div>
</td>
<td>
名字
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="creditAmount"></div></div>
</td>
<td>
ローンの元本
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="currency"></div></div>
</td>
<td>
通貨
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="interestRate"></div></div>
</td>
<td>
利率
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="startDateOfCredit"></div></div>
</td>
<td>
ローン開始日
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="term"></div> </div>
</td>
<td>
返済期間
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="salaryInBank"></div><label> 給与の銀行振り込み</label></div>
</td>
</tr>
<tr>
<td>
<div class="divHeight"><div id="pin"></div> </div>
</td>
</tr>
<tr>
<td>
<div class="divHeight"><input id="btnReset" type="button" value="リセット" /> <input id="btnEnable" type="button" value="有効にする" disabled/> <input type="submit" id="submitBtn" value="送信" /></div>
</td>
</tr>
</table>
</form>
</div>
<div id="valuesContainer">
<h3>ローンの詳細情報:</h3>
<br>
<table class="creditTable">
<tr>
<td>
元本:
</td>
<td>
<div class="divHeight">
<div id="resultCredit"></div>
</div>
</td>
</tr>
<tr>
<td>
支払い額合計:
</td>
<td>
<div class="divHeight">
<div id="returnValue"></div>
</div>
</td>
</tr>
<tr>
<td>
月の支払い:
</td>
<td>
<div class="divHeight">
<div id="monthlyPaymentValue"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
<script>
$(function () {
var listData = ["EUR", "USD", "GBP"];
$('#firstName').igTextEditor({
});
$('#lastName').igTextEditor({
toUpper: true
});
$('#creditAmount').igNumericEditor({
placeHolder: "例: 3000",
value: 1000,
minValue: 500,
maxValue: 10000
});
$('#currency').igTextEditor({
buttonType: "dropdown",
listItems: listData,
visibleItemsCount: 2,
value: "EUR"
});
$('#interestRate').igPercentEditor({
placeHolder: "利率",
displayFactor: 1,
value: "8.70%",
minValue: 6.70,
maxValue: 16
});
$('#startDateOfCredit').igDatePicker({
placeHolder: "例: " + new Date().getFullYear().toString() + "/" + new Date().getMonth().toString() + "/" + new Date().getDay().toString(),
minValue: new Date(2015, 5, 1),
maxValue: new Date(2020, 11, 31),
value: new Date(),
locale: "ja",
regional: "ja"
});
$('#term').igNumericEditor({
placeHolder: '返済期間 (月)',
value: 24,
minValue: 6,
maxValue: 120,
buttonType: "spin",
spinDelta: 6
});
$('#salaryInBank').igCheckboxEditor({
checked: false,
valueChanging: function (evt, ui) {
if (ui.newValue === true) {
$('#pin').show();
}
else {
$('#pin').hide();
}
}
});
$('#pin').igMaskEditor({
placeHolder: '$$(credit_pin_placeHolder)',
inputMask: 'LL-000'
});
$("#resultCredit").igCurrencyEditor({
readOnly: true,
width: 150
});
$("#returnValue").igCurrencyEditor({
readOnly: true,
width: 150
});
$("#monthlyPaymentValue").igCurrencyEditor({
readOnly: true,
width: 150
});
$("#form").submit(function (event) {
//Calculate the total amount of the credit
var sumToGive = $('#creditAmount').igNumericEditor("option", "value");
var loanPeriod = $('#term').igNumericEditor("option", "value");
var salaryIsInBank = $('#salaryInBank').igCheckboxEditor("option", "checked");
var selectedInterestRate = $('#interestRate').igPercentEditor("option", "value");
if (salaryIsInBank) {
selectedInterestRate -= 1;
}
var monthlyPaymentNoInterestRate = sumToGive / loanPeriod;
var interestRate = parseFloat(selectedInterestRate) / 100.0;
var monthlyInterestRate = monthlyPaymentNoInterestRate * interestRate;
var monthlyPaymentInterestRate = monthlyPaymentNoInterestRate + monthlyInterestRate;
var sumToReceive = monthlyPaymentInterestRate * loanPeriod;
var bankDividend = sumToReceive - sumToGive;
getResult(sumToGive, sumToReceive, monthlyPaymentInterestRate);
});
$("#btnReset").click(function () {
$("#firstName").igTextEditor("value", "");
$("#lastName").igTextEditor("value", "");
$("#creditAmount").igNumericEditor("value", 1000);
$("#currency").igTextEditor("value", "EUR");
$('#interestRate').igPercentEditor("value", "8.70%");
$('#startDateOfCredit').igDatePicker("value", new Date());
$('#term').igNumericEditor("value", 24);
$('#salaryInBank').igCheckboxEditor("option", "checked", false);
$('#pin').igMaskEditor("value", "");
disableEditors(false);
});
$("#btnEnable").click(function () {
disableEditors(false);
});
function getResult(creditAmount, getSumToReceive, getMonthlyPaymentInterestRate) {
var currencySymbol;
var selectedCurrency = $('#currency').igTextEditor("option", "value");
var customerName = $('#lastName').igTextEditor("option", "value");
var returnAmount = Math.round(getSumToReceive).toFixed(2);
var monthlyPayment = Math.round(getMonthlyPaymentInterestRate).toFixed(2);
$(".info").remove();
switch (selectedCurrency) {
case "EUR":
currencySymbol = "€";
break;
case "USD":
currencySymbol = "$";
break;
case "GBP":
currencySymbol = "£";
break;
default:
currencySymbol = "€";
}
$("#resultCredit").igCurrencyEditor("option", "currencySymbol", currencySymbol);
$("#resultCredit").igCurrencyEditor("option", "value", creditAmount);
$("#returnValue").igCurrencyEditor("option", "currencySymbol", currencySymbol);
$("#returnValue").igCurrencyEditor("option", "value", returnAmount);
$("#monthlyPaymentValue").igCurrencyEditor("option", "currencySymbol", currencySymbol);
$("#monthlyPaymentValue").igCurrencyEditor("option", "value", monthlyPayment);
var output = "<p class=\"info\">" + "" + customerName + " 様、以下はローン詳細です: " + "</p>";
$(".creditTable").before(output);
$("#valuesContainer").show();
disableEditors(true);
}
function disableEditors(disable) {
var allEditors = $("#form .ui-igedit-container");
for (i = 0; i < allEditors.length; i++) {
var widgetType = Object.keys(allEditors.eq(i).data())[0];
allEditors.eq(i)[widgetType.toString()]('option', 'disabled', disable);
}
$("#btnEnable").prop('disabled', !disable);
}
(function doOnLoad() {
$("#pin").hide();
$("#valuesContainer").hide();
}());
});
</script>
</body>
</html>