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