Skip to content

H
hel-developer-guide
Commit dfcaeac1 authored by Jefferyne's avatar Jefferyne
Browse files
Options

Updates 前端组件/NumericTextBox.md 

Auto commit by GitBook Editor
parent b5ca9079
Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 126 deletions
前端组件/NumericTextBox.md
View file @ dfcaeac1
## NumericTextBox ## NumericTextBox
提示：以下配置，方法和事件均为个人了解到的，不代表组件的全部。 ### 使用方法：
提示：下面写到的都是常用的方法。
##### 1.[bind](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-value) 及默认值的设置
说明：设置默认值
```html
//定义数据模型
<script>
var viewModel = kendo.observable({
enabled: false,//或者true
data: {
sumDueAmount：10000
},
});
</script>
//设置默认值
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" style="width:100%"/>
//设置文本框前面的名称
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" prompt="注册资本:" style="width:100%"/>
//设置文本框前的名称的宽度
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" prompt="注册资本:" promptColspan="1" style="width:100%"/>
//设置文本的宽度
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" colspan="3" prompt="注册资本" promptColspan="1" style="width:100%"/>
```
##### 2.[enable](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-enable)
说明：是否启用编辑
```html
//定义数据模型
<script>
var viewModel = kendo.observable({
enabled: false,//或者true
data: {
},
});
</script>
//设置是否编辑
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled" style="width:100%"/>
```
![](/assets/193025.png)
##### 3.[readonly](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-readonly)
说明：是否启用只读
```html
<h:hlsNumericTextBox id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox();
var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.readonly();
</script>
```
![](/assets/93141.png)
##### 4.[focus](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-focus)
说明：聚焦
```html
<h:hlsNumericTextBox id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox();
var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.focus();
</script>
```
##### 5.[value](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-value)
说明：获取和设置值
```html
<script>
var viewModel = kendo.observable({
enabled: false,//或者true
data: {
sumDueAmount:10000
},
});
</script>
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" colspan="3" prompt="注册资本" promptColspan="1" style="width:100%"/>
<script>
//获取值
var value = viewModel.data.sumDueAmount
</script>
```
### 事件：
##### 1.[change](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#events-change)
```html
<h:hlsNumericTextBox id="numerictextbox" />
<script>
//方法一
$("#numerictextbox").kendoNumericTextBox({
change: function() {
var value = this.value();
}
});
//方法二
$("#numerictextbox").kendoNumericTextBox();
var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.bind("change", function() {
var value = this.value();
});
</script>
//方法三
<h:hlsNumericTextBox id="numerictextbox" bind="enabled: enabled, value:data.numerictextbox" change="change" style="width:100%"/>
<script>
function change(){
alert("改变事件")
}
</script>
```
### 配置： ### 配置：
提示：以下配置，方法和事件均为个人了解到的，不代表组件的全部。
##### 1.[culture](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-culture)[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)_\(default: "en-US"\)_ ##### 1.[culture](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-culture)[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)_\(default: "en-US"\)_
```html ```html
...@@ -163,130 +287,5 @@ $("#numerictextbox").kendoNumericTextBox({ ...@@ -163,130 +287,5 @@ $("#numerictextbox").kendoNumericTextBox({
</script> </script>
``` ```
### 方法：
##### 1.[bind](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-value) 及默认值的设置
说明：设置默认值
```html
//定义数据模型
<script>
var viewModel = kendo.observable({
enabled: false,//或者true
data: {
sumDueAmount：10000
},
});
</script>
//设置默认值
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" style="width:100%"/>
//设置文本框前面的名称
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" prompt="注册资本:" style="width:100%"/>
//设置文本框前的名称的宽度
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" prompt="注册资本:" promptColspan="1" style="width:100%"/>
//设置文本的宽度
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" colspan="3" prompt="注册资本" promptColspan="1" style="width:100%"/>
```
##### 2.[enable](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-enable)
说明：是否启用编辑
```html
//定义数据模型
<script>
var viewModel = kendo.observable({
enabled: false,//或者true
data: {
},
});
</script>
//设置是否编辑
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled" style="width:100%"/>
```
![](/assets/193025.png)
##### 3.[readonly](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-readonly)
说明：是否启用只读
```html
<h:hlsNumericTextBox id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox();
var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.readonly();
</script>
```
![](/assets/93141.png)
##### 4.[focus](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-focus)
说明：聚焦
```html
<h:hlsNumericTextBox id="numerictextbox" />
<script>
$("#numerictextbox").kendoNumericTextBox();
var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.focus();
</script>
```
##### 5.[value](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-value)
说明：获取和设置值
```html
<script>
var viewModel = kendo.observable({
enabled: false,//或者true
data: {
sumDueAmount:10000
},
});
</script>
<h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" colspan="3" prompt="注册资本" promptColspan="1" style="width:100%"/>
<script>
//获取值
var value = viewModel.data.sumDueAmount
</script>
```
### 事件：
##### 1.[change](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#events-change)
```html
<h:hlsNumericTextBox id="numerictextbox" />
<script>
//方法一
$("#numerictextbox").kendoNumericTextBox({
change: function() {
var value = this.value();
}
});
//方法二
$("#numerictextbox").kendoNumericTextBox();
var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.bind("change", function() {
var value = this.value();
});
</script>
//方法三
<h:hlsNumericTextBox id="numerictextbox" bind="enabled: enabled, value:data.numerictextbox" change="change" style="width:100%"/>
<script>
function change(){
alert("改变事件")
}
</script>
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment