Updates 前端组件/hlsDatePicker.md

Auto commit by GitBook Editor

前端组件/hlsCombobox.md

+
+# Combobox标签
+
+ComboBox下拉列表组件
+
+```xml
+ <h:combobox placeholder="combobox" 
+             valuePrimitive="true" 
+             dataTextField="text"
+             dataValueField="value" 
+             bind="enabled: isEnabled, source: comboboxSource, value:data.productId" 
+             style="width: 100%;"/>
+```
+
+### **主要属性**
+属性名    | 类型
+-------- | ---
+animation | Boolean
+autoBind | Boolean
+autoWidth | Boolean
+cascadeFrom| String
+cascadeFromField | String
+clearButton| Boolean 
+dataSource | DataSource
+dataTextField | String
+dataValueField| String
+delay | Number
+enable | Boolean
+enforceMinLength| Boolean
+filter | String
+fixedGroupTemplate| String \| Function
+footerTemplate| String \| Function
+groupTemplate| String \| Function
+height| Number
+highlightFirst| Boolean
+ignoreCase| Boolean
+index| Number
+minLength| Number
+noDataTemplate| String \| Function
+placeholder | String
+suggest| Boolean
+headerTemplate| String \| Function
+template| String \| Function
+text| String
+value| String
+valuePrimitive| Boolean
+virtual| Boolean
+change| Function
+close| Function
+dataBound | Function
+filtering| Function
+open| Function
+select| Function
+cascade| Function
+> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox) 
+
+
+### **用法示例**
+
+```javascript
+//定义数据源DataSource
+var dataSource= new kendo.data.DataSource({
+    data:["one","two"]
+});
+
+//下拉列表渲染函数
+var itemTemplate = function (){
+    //...
+}
+
+//选中某一个列表选项后触发
+function onComboboxChange(e){
+    var value = this.value();
+    // Use the value of the widget.
+}
+//以上两种函数定义方法皆可
+```
+
+```xml
+<h:combobox id="combobox" dataSource="dataSource" clearButton="true" placeholder="test" enable="false" template="fn:itemTemplate" change="onComboboxChange"/>
+```
+> **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
+
+### **主要子节点**
+* animation
+* popup
+* virtual
+
+### **animation**
+主要用来定义动画效果，例如打开关闭效果
+
+* open 打开效果 
+* close 关闭效果
+
+属性| 类型 
+------ |----
+effects| String 
+duration| Number
+
+```xml
+<h:combobox id="combobox">
+    <h:animation>
+       <h:close effects="zoom:out" duration="300"/>
+       <h:open effects="zoom:in" duration="300"/>
+    </h:animation>
+</h:combobox>
+```
+### **popup**
+弹出窗口设置
+
+属性| 类型
+--------|------
+appendTo| String
+origin  | String
+position| String
+
+```xml
+<h:combobox id="combobox">
+    <h:popup appendTo="container" origin="top left" position="top left"/>
+</h:combobox>
+```
+
+### **virtual**
+动态加载相关设置
+
+属性    | 类型
+-----------|-----
+itemHeight | Number
+mapValueTo | String
+valueMapper| Function
+
+
+```javascript
+function valueMapper(){
+    $.ajax({
+        url: "http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
+        type: "GET",
+        dataType: "jsonp",
+        data: convertValues(options.value),
+        success: function(data) {
+            //the **data** is either index or array of indices.
+            //Example:
+            // 10258 -> 10 (index in the Orders collection)
+            // [10258, 10261] -> [10, 14] (indices in the Orders collection)
+            options.success(data);
+        }
+    })
+}
+```
+
+```xml
+<h:combobox id="combobox">
+    <h:virtual itemHeight ="20" mapValueTo="index" valueMapper="valueMapper"/>
+</h:combobox>
+```

前端组件/hlsDatePicker.md

+# hlsDatePicker标签
+
+日期选择器
+
+```xml
+ <h:hlsDatePicker id="hlsDatePicker
+```
+
+### **主要属性**
+
+| 属性名 | 类型 |
+| --- | --- |
+| culture | String |
+| depth | String |
+| footer | String \| Function |
+| format | String |
+| max | String |
+| min | String |
+| start | String |
+| value | String |
+| name | String |
+| bind | Function |
+| required | Boolean |
+| change | Function |
+| close | Function |
+| open | Function |
+| placeholder | String |
+
+> **提示:** 属性用法请参考kendoui API文档 [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/datepicker](http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker)
+
+### **用法示例**
+
+```javascript
+//注意是写在script标签内的
+var viewModel = kendo.observable({
+    data:{}
+});
+
+function open(){
+//...
+}
+
+function footer(){
+//...
+}
+```
+
+```xml
+<h:hlsDatePicker id="hlsDatePicker"               
+                 max="2016-10-14"  
+                 name="datepicker" 
+              placeholder="datepicker" 
+              bind="value:data.birthday" 
+              required="true" open="open" footer="fn:footer"/>
+```
+
+#### **子标签**
+
+| 属性名 | 类型 |
+| --- | --- |
+| animation | Object |
+| month | Object |
+
+| animation | 类型 |
+| --- | --- |
+| close | Object |
+| open | Object |
+
+```xml
+<h:hlsDatePicker id="datePicker">    
+   <h:animation>
+       <!--当属性仍然为一个对象时，继续添加子标签-->
+       <h:close effects="zoom:out" duration="300"/>
+       <h:open effects="zoom:in" duration="300"/>
+    </h:animation>
+</h:hlsDatePicker
+```
+
+| month | 类型 |
+| --- | --- |
+| content | String |
+| empty | String |
+
+```xml
+<h:datePicker id="datePicker">
+    <h:month content="<div></div>" empty="-"/>
+</h:datePicker>
+```
+
+> **提示**：
+> 
+> * 遇到**object**类型 就向下添加子标签，当遇到普通类型时，就添加到当前的标签上。
+