آموزش ساخت NumericTextBox

چاپ

آموزش ساخت NumericTextBox در Kendo UI

متد ()kendoNumericTextBox

با استفاده از متد ()kendoNumericTextBox در Kendo UI، می توانید یک فیلد ورودی عددی بسازید.

پیکربندی (Configuration)

نامتوضیحات
culture (default: en-US) زبان مورد استفاده در این ابزار را مشخص می کند.
decimals (default: null) دقت عدد را مشخص می کند.
downArrowText (default: Decrease value) با یک متن تنظیم می شود و زمانی که موس روی دکمه کاهش قرار گرفت، ظاهر می شود.
format (default: n) فرمت عدد را مشخص می کند.
max (default: null) بزرگترین عددی است که می تواند توسط کاربر انتخاب شود.
min (default: null) کوچکترین عددی است که می تواند توسط کاربر انتخاب شود.
placeholder (default: "") با یک متن تنظیم می شود و زمانی که فیلد ورودی خالی است نمایش داده می شود.
step (default: 1) میزان افزایش و کاهش را مشخص می کند.
upArrowText (default: Increase value) با یک متن تنظیم می شود و زمانی که موس روی دکمه افزایش قرار گرفت، ظاهر می شود.
value (default: null) مقدار فیلد ورودی را مشخص می کند.

در مثال زیر، نحوه ساخت فیلد ورودی عددی با استفاده از متد ()kendoNumericTextBox نشان داده شده است:

مثال (آموزش ساخت NumericTextBox)

<!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
        <div id="example" class="k-content">
            <div class="k-rtl">
                <h2>Set Value</h2>
                <input id="numerictextbox" />
            </div>

            <script>
                $(document).ready(function() {
                    $("#numerictextbox").kendoNumericTextBox();
                });
            </script>
        </div>
</body>
</html>

اجرای مثال »

در مثال زیر، 4 فیلد NumericTextBox مختلف نشان داده شده است:

مثال (آموزش ساخت NumericTextBox)

<div id="add-product">
    <div>
        <input id="currency" type="number" value="30" min="0" max="100" />
    </div>
    <div style="margin-top: 7px;">
        <input id="percentage" value="0.05" />
    </div>
    <div style="margin-top: 7px;">
        <input id="custom" value="2" />
    </div>
    <div style="margin-top: 7px;">
        <input id="numeric" type="number" value="17" min="0" max="100" step="1" />
    </div>
</div>


<script>
    $(document).ready(function() {
        // create NumericTextBox from input HTML element
        $("#numeric").kendoNumericTextBox();

        // create Curerncy NumericTextBox from input HTML element
        $("#currency").kendoNumericTextBox({
            format: "c",
            decimals: 3
        });

        // create Percentage NumericTextBox from input HTML element
        $("#percentage").kendoNumericTextBox({
            format: "p0",
            min: 0,
            max: 0.1,
            step: 0.01
        });

        // create NumericTextBox from input HTML element using custom format
        $("#custom").kendoNumericTextBox({
            format: "#.00 kg"
        });
    });
</script>


اجرای مثال »

رویداد ها

نامتوضیحات
change زمانی که مقدار تغییر کند اتفاق می افتد.
spin زمانی که مقدار بوسیله دکمه های افزایش/کاهش تغییر می کند، اتفاق می افتد.

در مثال زیر، رویداد change و spin نشان داده شده است:

مثال (آموزش ساخت NumericTextBox)

<script>
    $(document).ready(function() {

        function onChange() {
            kendoConsole.log("Change :: " + this.value());
        }

        function onSpin() {
            kendoConsole.log("Spin :: " + this.value());
        }

        $("#numerictextbox").kendoNumericTextBox({
            change: onChange,
            spin: onSpin
        });
    });
</script>
اجرای مثال »

متدها

نامتوضیحات
enable(bool) فعال یا غیرفعال کردن ابزار
max() تنظیم یا برگرداندن بیشترین مقداری که می تواند توسط کاربر انتخاب شود.
min() تنظیم یا برگرداندن کوچکترین مقداری که می تواند توسط کاربر انتخاب شود.
step() تنظیم یا برگرداندن میزان گام های افزایش و یا کاهش.
value() تنظیم و یا برگداندن مقدار ابزار.
focus() تمرکز مکان نما برروی ابزار.
readonly() ابزار فقط خواندنی می شود.

در مثال زیر، کاربرد متدهای بالا نشان داده شده است:

مثال (آموزش ساخت NumericTextBox)

<div id="example" class="k-content"> 
<div class="configuration" style="width: 220px">
    <span class="configHead">API Functions</span>
    <ul class="options">
        <li>
           <button id="get" class="k-button">Get value</button> or <button id="focus" class="k-button">Focus</button>
       </li>
       <li>
           <input id="value" value="10" style="float:none" />
           <button id="set" class="k-button">Set value</button>
       </li>
        <li>
            <button id="enable" class="k-button">Enable</button> or <button id="disable" class="k-button">Disable</button> or <button id="readonly" class="k-button">Readonly</button>
        </li>
    </ul>
</div>           
<div class="demo-section">
    <input id="numerictextbox" />
</div>

<script>
    $(document).ready(function() {
        $("#numerictextbox").kendoNumericTextBox();

        var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");

        var setValue = function () {
            numerictextbox.value($("#value").val());
        };

        $("#enable").click(function() {
            numerictextbox.enable();
        });

        $("#disable").click(function() {
            numerictextbox.enable(false);
        });

        $("#readonly").click(function() {
            numerictextbox.readonly();
        });

        $("#focus").click(function() {
            numerictextbox.focus();
        });

        $("#value").kendoNumericTextBox({
            change: setValue
        });

        $("#set").click(setValue);

        $("#get").click(function() {
            alert(numerictextbox.value());
        });
    });
</script>
اجرای مثال »
نوشته شده توسط امیر پهلوان صادق
بازدید: 10530