OSS で利用できる機能

エディター - 数値エディター

このサンプルは、igNumericEditor コントロールの基本的な使用方法を紹介します。

売上総利益

￥738990.00

当期純利益

￥773022.95

国税 % 地方税 % 国民年金 % 医療保険 %

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML

                    <!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.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 = [10, 15, 25, 28, 33, 35];

            function nettChange() {

                var gross = 6000.00, nett, grossMadicare, grossSecurity, grossFederalTax, grossStateTax;
                var federalTax = $("#federalTax").igNumericEditor("value");
                var stateTax = $("#stateTax").igNumericEditor("value");
                var socialSecurity = $("#socialSecurity").igNumericEditor("value");
                var medicare = $("#medicare").igNumericEditor("value");

                grossSecurity = calculatePercent(gross, socialSecurity);
                grossMadicare = calculatePercent(gross, medicare);
                gross = gross - (grossSecurity + grossMadicare);


                grossFederalTax = calculatePercent(gross, federalTax);
                grossStateTax = calculatePercent(gross, stateTax);

                nett = gross - (grossFederalTax + grossStateTax);

                return parseFloat(nett.toFixed(2));

            }

            function calculatePercent(value, percent) {
                value = value * percent / 100;

                return value;
            }

            function changingValues() {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("$ " + newNettIncome);
            }

            $("#federalTax").igNumericEditor({
                listItems: listValues,
                value: 10,
                valueChanged: changingValues
            });
            $("#stateTax").igNumericEditor({
                buttonType: "spin",
                spinDelta: 0.01,
                value: -5.00,
                minValue: -5.53,
                maxValue: 5.53,
                valueChanged: changingValues
            });
            $("#socialSecurity").igNumericEditor({
                value: -10.0,
                minValue: -12.4,
                maxValue: 12.4,
                valueChanged: changingValues
            });
            $("#medicare").igNumericEditor({
                value: 2.9,
                valueChanged: changingValues
            });

        });
    </script>



</body>

</html>

Ignite UI for jQuery | サンプル

検索結果

エディター - 数値エディター

売上総利益

当期純利益

コードビュー

Ignite UI for jQuery | サンプル

検索結果

エディター - 数値エディター

売上総利益

当期純利益

コード ビュー

コードビュー