接触kendo ui

例子

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="demo" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<demo:header />

单选框：
  <kendo:comboBox name="tdqingkuang" placeholder="请选择....">    
  <kendo:dataSource  data="${tdqingkuang}">  
  </kendo:dataSource>
  </kendo:comboBox>
日期：
 <kendo:datePicker name="datepicker" value="${date}"></kendo:datePicker>    
多选框：
 <kendo:multiSelect name="diagMethod" placeholder="请选择...">
<!-- <pre name="code" class="html">data="${diagMethod}"  表示从controler里面的数值

-->                            
<kendo:dataSource data="${diagMethod}"></kendo:dataSource>
 </kendo:multiSelect>    
数字框
<!--

numericTextBox  为数字框  step表示一次可以增加多少

-->
<kendo:numericTextBox name="tdkfvalue" min="0" max="10" step="0.1"></kendo:numericTextBox>


<script type="text/javascript">
        $(document).ready(function(){
<!-- 获取页面中在kendo ui 控件中输入的值 。$("#datepicker")中datepicker为所用datePicker 的name，选择的值就是datepicker.value（） -->
            var datepicker = $("#datepicker").data("kendoDatePicker");
var recentSituation = $("#recentSituation").data("kendoComboBox") ;  //获取数值的格式要注意 
$("#button").click(function(){
<!-- 字符串没有输入，则为"" 如果是数字则为null??? 比如datapicker numericTextBox 都是null-->
                if(datepicker.value()==null||recentSituation.value()==""){
                    alert("请填写完整");
                }else {
                   alert("成功");
                }            
            });
</script>

<demo:footer/>

数字框：

上图所示表示的数字框，其中的format 可以规定数字框里数字显示的格式：

 <li>年龄：
        <kendo:numericTextBox name="age" min="0" max="150"  format="#" data-bind="value:generalInfos.baseInfoWrapper.baseInfo.age"></kendo:numericTextBox>

上图所示的即为年龄，显示为#，数字后没有小数点，最小是0，最大150

这些特性其实是HTML5新增加的特性，还有添加required="required",则框为必选框，空的话会高亮显示。

利用style也可以修改kendo ui 输入框的大小

<kendo:numericTextBox name="RBC" min="0" style="width:85px;" required="required"></kendo:numericTextBox>