OSS で利用できる機能

コンボボックス - 編集

igCombo コントロールは編集可能で、コンボボックスまたはオートコンプリートテキストボックスとして使用できます。ドロップダウンボタンの表示状態を変更して、igCombo を読み取り専用として設定できます。

この販売者はクレジットカードのみ受け付けます

有効
期限

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

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

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML
データ

                    <!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" />

    <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>

    <!-- Ignite UI for jQuery Sample Data -->
    <script src="/data-files/credit-cards.js"></script>

    <style>
        .payment-form {
            width:100%;overflow:hidden;
        }
        #paymentType {
            float:left;
        }
        #payment-label {
            line-height:32px;
            margin-left:210px;
        }
        .card-form {
            width: 350px;
            border: 2px solid #0094ff;
            border-radius: 15px;
            padding: 25px 15px 0px 15px;
        }

        .card-logo {
            margin-left: 9px;
        }

        .ui-igcombo-wrapper,
        .ui-igedit {
            margin-bottom: 25px;
        }

        #creditCardNumber .ui-igcombo-button { display: none; }

        .good-through {
            float: left;
            margin-right: 5px;
        }

        #buy {
            margin-top: 10px;
            margin-left: 260px;
        }
    </style>
</head>
<body>
    <div class="payment-form">
        <div id="paymentType" name="paymentType"></div>
        <div id="payment-label"><label id="paymentTypeLabel" for="paymentType">この販売者はクレジット カードのみ受け付けます</label></div>
    </div>
    <div class="card-form">
        <div id="creditCardType"></div><img src="/images/samples/credit-cards/visa_logo_large.gif" id="cardLogo" class="card-logo" alt="Visa" />

        <div id="creditCardNumber"></div>
        <div class="good-through ui-state-disabled">
            <label>有効<br />期限</label>
        </div>
        <div id="month" name="month"></div>
        <div id="year"></div>
        <input id="ccv" />
    </div>
    <input type="button" value="購入" id="buy" />

    <script>

        $(function () {
            var selectedCardType = "Visa";
            $("#paymentType").igCombo({
                textKey: "Text",
                valueKey: "Text",
                dataSource: paymentTypes,
                mode: "readonlylist"
            }).attr("title", "このコンボは readonlylist モードです。ドロップダウンを表示しますが、編集や項目の選択はできません。").igPopover({
                direction: "top",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            $("#creditCardType").igCombo({
                width: "240px",
                textKey: "Text",
                valueKey: "Text",
                dataSource: creditCardTypes,
                mode: "dropdown",
                enableClearButton: false,
                selectionChanged: function (event, ui) {
                    selectedCardType = ui.items[0].data.Text;
                    $("#cardLogo").attr({
                        "src": ui.items[0].data.Image,
                        "alt": selectedCardType
                    });
                    $("#creditCardNumber").igCombo("option", "dataSource", creditCards[selectedCardType]);
                    if (selectedCardType === "American Express") {
                        $("#ccv").igNumericEditor("option", "maxValue", 9999);
                    } else {
                        $("#ccv").igNumericEditor("option", "maxValue", 999);
                        $("#ccv").igNumericEditor("value", null);
                    }
                }
            }).attr("title", "このコンボは dropdown モードです。リストの項目のみを選択できます。").igPopover({
                direction: "top",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            function transformCustomValue(value) {
                var newValue = {
                    CardNumber: "", 
                    DisplayNumber: "",
                    Image: creditCardLogos[selectedCardType]
                };
                value = value.replace(/-/g, "");
                value = value.split("");
                for (var i = 0; i < (selectedCardType === "American Express" ? 3 : 4); i++) {
                    newValue.CardNumber += value.splice(0, 1);
                    newValue.DisplayNumber += "*";
                }
                var length = value.length;
                for (var i = 0; i < length; i++) {
                    var char = value.splice(0, 1);
                    if (i % 4 === 0) {
                        newValue.CardNumber += "-";
                        newValue.DisplayNumber += "-";
                    }
                    newValue.CardNumber += char;
                    newValue.DisplayNumber += i > 7 ? char : "*";
                }
                return newValue;
            };

            $("#creditCardNumber").igCombo({
                width: "100%",
                textKey: "DisplayNumber",
                valueKey: "CardNumber",
                dataSource: creditCards[selectedCardType],
                dropDownOnFocus: true,
                filteringType: "none",
                placeHolder: "クレジットカード番号を入力するか、使用履歴から選択してください。",
                itemTemplate: "${DisplayNumber}<img src='${Image}' class='card-logo' />",
                allowCustomValue: true,
                validatorOptions: {
                    custom: function (value) {
                        var validator = $("#creditCardNumber").igCombo("validator"),
                            re = selectedCardType === "American Express" ? /^[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/ : /^[0-9]{4}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/,
                            isValid = true;
                        if (value.length) {
                            value = value[0];
                            if (!$("#creditCardNumber").igCombo("selectedItems")) {
                                // custom value is selected
                                if (!re.test(value)) {
                                    isValid = false;
                                }
                                if (isValid) {
                                    var newValue = transformCustomValue(value),
                                        index = creditCards[selectedCardType].length,
                                        current;
                                    if (current = $("#creditCardNumber").igCombo("itemsFromValue", newValue)) {
                                        $("#creditCardNumber").igCombo("select", current.element)
                                    } else {
                                        creditCards[selectedCardType].push(newValue);
                                        $("#creditCardNumber").igCombo("dataBind");
                                        $("#creditCardNumber").igCombo("index", index);
                                    }
                                }
                            }
                            $("#month").igCombo("option", "disabled", false);
                            $("#year").igCombo("option", "disabled", false);
                            $("#ccv").igNumericEditor("option", "disabled", false);
                            $("div.good-through").removeClass("ui-state-disabled");
                            return isValid;
                        }
                        $("#month").igCombo("option", "disabled", true);
                        $("#year").igCombo("option", "disabled", true);
                        $("#ccv").igNumericEditor("option", "disabled", true);
                        $("div.good-through").addClass("ui-state-disabled");
                        return false;
                    },
                    errorMessage: "クレジットカード番号が無効です。",
                    onchange: true,
                    onblur: true
                }
            }).attr("title", "このコンボはカスタム値入力を許可します。ユーザーはリストにない値を入力できます。").igPopover({
                direction: "right",
                position: "start",
                headerTemplate: {
                    closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });

            $("#month").igCombo({
                width: "100px",
                textKey: "Text",
                valueKey: "Value",
                dataSource: months,
                disabled: true,
                mode: "dropdown"
            });

            $("#year").igCombo({
                width: "100px",
                textKey: "Text",
                valueKey: "Text",
                dataSource: years,
                disabled: true,
                mode: "dropdown"
            });

            $("#ccv").igNumericEditor({
                width: "100px",
                placeHolder: "CCV",
                disabled: true
            });

            $("#buy").igButton({
                labelText: $("#buy").val(),
                centerLabel: true,
                width: 120
            });

        });

    </script>

</body>
</html>

                    var paymentTypes = [
    { Text: "クレジットカード払い" },
    { Text: "口座引き落とし" },
    { Text: "PayPal" }
];

var creditCardTypes = [
    { Text: "Visa", Image: "../../images/samples/credit-cards/visa_logo_large.gif" },
    { Text: "MasterCard", Image: "../../images/samples/credit-cards/mastercard_logo_large.gif" },
    { Text: "American Express", Image: "../../images/samples/credit-cards/american_express_logo_large.gif" }
];

var creditCards = {
    "Visa": [
        { CardNumber: "1234-5678-9012-3456", DisplayNumber: "****-****-****-3456", Image: "../../images/samples/credit-cards/visa_logo_small.gif" },
        { CardNumber: "0987-6543-2109-8765", DisplayNumber: "****-****-****-8765", Image: "../../images/samples/credit-cards/visa_logo_small.gif" }
    ],
    "MasterCard": [
        { CardNumber: "2345-6789-0123-4567", DisplayNumber: "****-****-****-4567", Image: "../../images/samples/credit-cards/mastercard_logo_small.gif" }
    ],
    "American Express": [
        { CardNumber: "456-7890-1234-5678", DisplayNumber: "***-****-****-5678", Image: "../../images/samples/credit-cards/american_express_logo_small.gif" }
    ]
};

var creditCardLogos = {
    "Visa": "../../images/samples/credit-cards/visa_logo_small.gif",
    "MasterCard": "../../images/samples/credit-cards/mastercard_logo_small.gif",
    "American Express": "../../images/samples/credit-cards/american_express_logo_small.gif"
};

var months = [
    { Text: "01", Value: 1 },
    { Text: "02", Value: 2 },
    { Text: "03", Value: 3 },
    { Text: "04", Value: 4 },
    { Text: "05", Value: 5 },
    { Text: "06", Value: 6 },
    { Text: "07", Value: 7 },
    { Text: "08", Value: 8 },
    { Text: "09", Value: 9 },
    { Text: "10", Value: 10 },
    { Text: "11", Value: 11 },
    { Text: "12", Value: 12 }
];

var years = [
    { Text: 15 },
    { Text: 16 },
    { Text: 17 },
    { Text: 18 },
    { Text: 19 },
    { Text: 20 },
    { Text: 21 }
];

Ignite UI for jQuery | サンプル

検索結果

コンボボックス - 編集

コードビュー

Ignite UI for jQuery | サンプル

検索結果

コンボ ボックス - 編集

コード ビュー

コンボボックス - 編集

コードビュー