（9）kendo UI使用基礎介紹與問題整理——numerictextbox/基礎說明

      愈加不喜歡kendo了，項目的實際需求跟它的功能總覺得差了一截，現在已經淪陷到自己寫很多處理的程度。

     僅以此整理紀念曾經使用kendo UI做開發的日子吧！

   （以上內容僅代表個人觀點，不具有批判價值，請海涵！）

一、基本使用方法介紹

官網鏈接地址 demo：https://demos.telerik.com/kendo-ui/numerictextbox/index

                       文檔：https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox

1、簡單demo

html：

<input id="numerictextbox" style="width: 100%;" />

JS：

<script>
$(document).ready(function() {
   $("#numerictextbox").kendoNumericTextBox({
         format: "n0",
         min: 1
    });
});
</script>

上面的demo創建了數字輸入組件，輸入的限制條件是整數、最小值是1

2、參數說明

min - 最小值  （數字）

max - 最大值（數字）

round - 是否四舍五入 （布爾值   默認值：true）

factor -  因數，輸入的數字與之相乘的結果是最終的顯示值（數字）

decimals - 保留幾位小數值 （數字  默認是0）

restrictDecimals - 是否限制小數的輸入長度（布爾值   默認值：false）

step - 上下調節箭頭，每次點擊增加、減少的數值 （數字 默認值：1）

Specifies - 是否顯示上下調節按鈕 （布爾值 默認值：true）

downArrowText - 向下箭頭提示的文字 （字符串 默認是“decrease value”）

upArrowText - 向上箭頭提示的文字 （字符串 默認是“Increase value”）

value - 指定值 （數字）

format  -  輸入格式（可選參數：https://docs.telerik.com/kendo-ui/framework/globalization/numberformatting） 

2.1 “n” 數字

format: "n" //數字格式

format: "n0" //整數格式

format: "n2" //保留兩位小數

n后面的數字代表保留幾位小數。


2.2 “c” 貨幣

format: "c" //數字格式，c后面的數字代表保留幾位小數。

貨幣格式通常要配合選擇語言culture（default: "en-US"），然后呈現出對應國家的貨幣字符

如：
culture: "en-US", 
format: "c",     //對應的是美元符    

要想輸出人民幣符號，貌似需要引入中文的culture庫。

2.3 “p”百分號

2.4“e”科學計數法

其他的format參數建議查看鏈接：https://docs.telerik.com/kendo-ui/framework/globalization/numberformatting

3、方法介紹

3.1 max() - 最大值

      可取值，可傳值

     demo：

//取值

<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox();

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

var max = numerictextbox.max();

</script>

 

//傳值
<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox();

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

var max = numerictextbox.max();

numerictextbox.max(10);
</script>

 　3.2    min() - 最小值 使用方法參考max()

 　3.3    value()- 賦值、取值

 

$("#numerictextbox").data("kendoNumericTextBox").value(0.5); //賦值

$("#numerictextbox").data("kendoNumericTextBox").value(); //取值


3.4  focus()- 獲取焦點

$("#numerictextbox").data("kendoNumericTextBox").focus();

3.5 readonly() - 只讀

　$("#numerictextbox").data("kendoNumericTextBox").readonly();//只讀

   $("#numerictextbox").data("kendoNumericTextBox").readonly(false);//可輸入

 

3.6 enable() - 是否可用（不可用時會帶有disabled屬性）

$("#numerictextbox").data("kendoNumericTextBox").enable(true);//可用

$("#numerictextbox").data("kendoNumericTextBox").enable(false);//禁用

3.5 step() - 點擊上下箭頭、每次調節的值

$("#numerictextbox").data("kendoNumericTextBox").step(0.5);

3.5 destroy() - 銷毀

$("#numerictextbox").data("kendoNumericTextBox").destroy();

4、事件介紹

change() - 輸入框變化時觸發的事件（經過實測，認定是onblur事件，離開輸入框時觸發）

demo：

<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox({
    change: function() {
        var value = this.value();
        console.log(value); //value is the selected date in the numerictextbox
    }
});
</script>

   spin() -點擊上下箭頭的時候觸發

  demo:

<input id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox({
    spin: function() {
        var value = this.value();
        console.log(value); //value is the selected date in the numerictextbox
    }
});
</script>