Creates 前端组件/TabStrip.md

Auto commit by GitBook Editor

Creates 前端组件/TabStrip.md
Auto commit by GitBook Editor
fcc1f11d · zydgitboox · d7c3d4a0 · fcc1f11d · fcc1f11d · fcc1f11d
Commit fcc1f11d authored Jul 31, 2017 by zydgitboox
6 changed files
--- a/前端组件/HlsCheckBox.md
+++ b/前端组件/HlsCheckBox.md
+# hlsCheckbox 标签
+hlsCheckbox框,一般与<h:hlsForm>、<h:hlsHBox>一起使用，定义一个带文字说明的选择框。
+```xml
+<h:hlsCheckbox  id="testCheckbox" bind="value:data.testValue" readonly="false" checkedValue="Y" uncheckedValue="N" />
+```
+### **主要属性**
+| 属性名 | 类型 | 描述 |
+| --- | --- | --- |
+|promptColspan | String | 文字说明盒子的长度|
+|promptClassName | String | 文字说明盒子的样式|
+|promptImage|String|文字说明部分的图标(要求是一个完整的img标签)|
+| prompt | String | 文字说明 | 
+| bind | String | 该选择框绑定关系 |
+| required | String & Boolean & 不填 | 必选|
+| checkedValue | String | 选中时input框的值 |
+| uncheckedValue | String | 未选中时input框的值 |
+| readonly | Boolean | 是否是可点击的 |
+### **用法示例**
+```xml
+var viewModel = kendo.observable({
+	enabled: true,
+	isEnabled: false,
+	data: {},
+});
+<h:hlsForm title="hlsFormTitle" id="hlsFormTitleId" width="100%">
+    <h:hlsHBox>
+        <h:hlsCheckbox name="testCheckboxName" id="testCheckbox"
+               bind="enabled: enabled,value:model.testValue"
+               checked="checked" checkedValue="Y" prompt="hlsCheckbox测试：" uncheckedValue="N"
+               promptColspan="1" style="width:100%"/>
+     </h:hlsHBox>
+</h:hlsForm>
+```
--- a/前端组件/HlsCombobox.md
+++ b/前端组件/HlsCombobox.md
+# hlsCombobox标签
+ComboBox下拉列表组件，通常数据源以code - meaning形式出现，用户操作的是meaning，实际保存的是code。
+```xml
+    <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
+                   bind="enabled: isEnabled,source: sdDataSource, value:data.code"
+                   colspan="3"
+                   dataTextField="meaning"
+                   dataValueField="code"
+                   placeholder="hlsCombobox"
+                   prompt="hlsCombobox"
+                   promptColspan="1"
+                   valuePrimitive="true"
+                   style="width:100%"
+    />
+```
+### **主要属性**
+属性名    | 类型
+-------- | ---
+id | String
+promptColspan | String
+promptClassName | String
+promptImage | String
+prompt | String
+colspan | String
+hlsClassName | String
+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
+//对于系统定义好的数据源
+<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>
+//自定义静态数据源sdDataSource
+var sdDataSource= new kendo.data.DataSource({
+    data:["one","two"]
+});
+//自定义动态查询到的数据源sdDataSource
+$.ajax({
+    type : 'GET',
+    url : url,
+    async: false, 
+    contentType : "application/json; charset=utf-8",
+    success : function(datas) {
+        viewModel.set("sdDataSource,",datas.rows);
+    }
+});
+//需要注意，bind中写dataSource，需要在viewModel中定义
+var viewModel = kendo.observable({
+	enabled: true,
+	isEnabled: false,
+	data: {},
+    sdDataSource:sdDataSource, 
+});
+//下拉列表渲染函数
+var itemTemplate = function (){
+    //...
+}
+//选中某一个列表选项后触发
+function onComboboxChange(e){
+    var value = this.value();
+    // Use the value of the widget.
+}
+//以上两种函数定义方法皆可
+```
+```xml
+    <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
+                   bind="enabled: isEnabled,source: sdDataSource, value:data.code"
+                   colspan="3"
+                   dataTextField="meaning"
+                   dataValueField="code"
+                   placeholder="hlsCombobox"
+                   prompt="hlsCombobox"
+                   promptColspan="1"
+                   valuePrimitive="true"
+                   style="width:100
+                   change="onComboboxChange"
+                   template="fn:itemTemplate"
+    />
+```
+#### 特别注意 valuePrimitive="true" 如果该值为false，选中的值将不会匹配给dataTextField和dataValueField
+dataValueField
+> **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
--- a/前端组件/HlsLov.md
+++ b/前端组件/HlsLov.md
+# hlsLOV标签
+#### lov标签的数据源和展示由功能定义，因此在写LOV之前需要在lov配置功能处配好相关信息,可配置项包括：
+##### 1.lov框的具体样式、结构; 
+##### 2.lov框的数据来源
+```xml
+//code、locale、contenxtPath为必须的参数，其中code为所需lov在lov定义时的code的值
+ <h:hlsLov name="lov" id="lov" code="LOV_CON_CONTRACT_TENANT" contextPath="${base.contextPath}" locale="${base.locale}"/>
+```
+#### **必须参数**
+参数名|类型/值
+----|----
+code|String
+locale|String (一般为${base.locale})
+contextPath|String（一般为${base.contextPath}）
+#### **一般属性**
+属性名|类型
+----|----
+promptColspan | String 
+promptClassName | String 
+promptImage | String 
+prompt | String 
+name|String
+enabled|Boolean
+valuePrimitive|Boolean
+text|String
+dataTextField|String
+dataValueField|String
+open|function
+close|function
+select|function
+query|function
+用法示例：
+```javascript
+var viewModel = kendo.observable({
+	enabled: true,
+	isEnabled: false,
+	data: {},
+});
+//以下代码写在script标签内
+//lov查询时触发
+function lovQuery(e) {
+        //lov查询拼上条件
+        e.param['contractId'] = 1237;  
+      };
+//选中lov行数据后触发  
+function lovSelect(e) {
+      //选中lov行数据后
+      //options是
+      viewModel.data.set("contractId", e.item.contractId);
+      };
+```
+```xml
+<!--xml代码-->
+<h:hlsLov name="lov" id="lov" code="LOV_ROLE" colspan="3" contextPath="${base.contextPath}" data-bind="enabled: enabled, locale="${base.locale}" placeholder="承租人名称" prompt="lov:" promptColspan="1" select="lovSelect" query="lovQuery" style="width: 100%"/>
+```
+> **提示:**
+> - 上述所有属性直接添加在标签内即可，（**[属性名] = "..."**）,对于既是**String**类型又是**Function**类型的属性，只需要加**fn:**前缀区分即可,（**fn:函数名**）
--- a/前端组件/HlsToolBar.md
+++ b/前端组件/HlsToolBar.md
+# hlsToolBar
+-------------
+hlsToolBar菜单栏标签，通常与<h:hlsButton>一起使用，固定于页面的底部，不随滚动条变化而变化。
+##### xml配置
+```xml
+ <!--h:为命名空间,必须要加的;treeList为组件名;id可写可不写-->
+<h:hlsToolBar>
+	<h:hlsButton click="TEST5" text="测试" />
+</h:hlsToolBar>
+```
+#### **一般属性**
+> **提示:**
+该标记通常作为一个容器，固定于页面底部，一般只对其样式进行修改。
+属性名 | 类型
+-------- | ---
+hlsStyle| String
+hlsClassName | String
+用法示例：
+```javascript
+//注意是写在script标签里的内容
+function TEST5(){
+    ...
+}
+```
+```xml
+<h:hlsToolBar hlsStyleClassName="test-class" hlsStyle="backgroud-color:blue">
+    <h:hlsButton click="TEST5" text="测试" />
+</h:hlsToolBar>
+hlsStyleClassName:css类样式名字
+hlsStyle:css样式
+click:点击事件调用的方法名
+text:按钮的文字说明
+```
+> **提示:**
+> - 每个hls开头的标签都有hlsClassName和hlsStyle属性，因为有的标签主要说明其功能，所以没强调。
--- a/前端组件/TabStrip.md
+++ b/前端组件/TabStrip.md
+tabStrip
+-------------
+#### **tabStrip标签页**
+```xml
+<!--h:为命名空间,必须要加的;id可写可不写;value为默认打开的标签页，属性值对应tab页的title的值;animation表示是否启用动画，值类型为布尔值-->
+ <h:tabStrip id="tabstrip" value="Paris" animation="false">
+      <h:tabs>
+            //title为标签页的标题
+          <h:tab title="Paris">
+            //此标签的html内容  
+             ...
+          </h:tab>
+          <h:tab title="New York">
+            ...
+          </h:tab>
+        </h:tabs>
+</h:tabStrip>
+```
+#### **一般属性**
+> **提示:**
+> - 属性用法请参考kendoui API文档的tabStrip:http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip
+属性名|类型
+----|----
+animation|Boolean
+collapsible|Boolean
+dataContentField|String
+dataSource | kendo.data.DataSource(Function)
+dataTextField|String
+navigatable|true
+scrollable|Boolean
+tabPosition|String
+value|String
+activate|function
+contentLoad|function
+error|function
+select|function
+change| Function
+dataBound | Function
+dataBinding|function
+用法示例：
+```xml
+<h:tabStrip value="标签2" collapsible="true" tabPosition="top">
+     <h:tabs>
+         <h:tab title="标签1">
+             <h:button text="hello1" className="btn-primary" click="test" enable="true" icon="cancel"/>
+             <h:button text="hello2" className="btn-primary" click="test" enable="true" icon="cancel"/>
+         </h:tab>
+         <h:tab title="标签2">
+             <h:button text="hello3" className="btn-primary" click="test" enable="true" icon="cancel"/>
+             <h:button text="hello4" className="btn-primary" click="test" enable="true" icon="cancel"/>
+         </h:tab>
+     </h:tabs>
+ </h:tabStrip>
+<!--或者 将tabStrip与dataSource绑定,-->
+<h:dataSource id="dataSourceTabStrip">
+     <h:data>
+         <h:item name="tab1" content="tab1content"/>
+         <h:item name="tab2" content="tab2content"/>
+     </h:data>
+ </h:dataSource>
+ <h:tabStrip dataSource="dataSourceTabStrip" dataTextField="name" dataContentField="content" />
+```
+> **提示:**
+> - 上述所有属性直接添加在标签内即可，（**[属性名] = "..."**）,对于既是**String**类型又是**Function**类型的属性，只需要加**fn:**前缀区分即可,（**fn:函数名**）
--- a/前端组件/hlsForm.md
+++ b/前端组件/hlsForm.md
+hlsForm表单
+-----------------
+ <h:hlsForm>包括两个titile部分和body部分，body通常由<h:hlsBox>和<h:hlsMaskedTextBox>、<h:hlshlsNumericTextBox>等标记组成。
+#### 一般用法
+```html
+<!-- hlsForm子标签的使用请参见相应文档，这里不再说明-->
+ <h:hlsForm title="hlsForm" width="100%">
+    <h:hlsHBox>
+    	<h:hlsDatePicker name="transactionDate" id="transactionDate" bind="enabled: enabled,value:data.transactionDate" colspan="4" style="width:50%" placeholder="退款日期" prompt="退款日期:" promptColspan="2" required="true"/>
+        <h:hlsCombobox name="paymentMethod" id="paymentMethod" bind="enabled: enabled, source:cshPayments , value:data.paymentMethod" colspan="4" dataTextField="description" dataValueField="value" placeholder="退款方式" prompt="退款方式:" promptColspan="2" required="true" valuePrimitive="true" style="width:50%"/>			
+    </h:hlsHBox>
+    <h:hlsHBox>
+	 <h:hlsNumericTextBox name="returnDueAmount" id="returnDueAmount" bind="enabled: enabled, value:data.returnDueAmount" style="width:50%" colspan="4" prompt="退款金额:" promptColspan="2" required="true" validationMessage="Enter {0}"/>    
+ 	 <h:hlsMaskedTextBox name="bankSlipNum" id="bankSlipNum"  bind="enabled: enabled, value:data.bankSlipNum" colspan="4" prompt="银行流水号:" promptColspan="2"  style="width:50%"/>    
+    </h:hlsHBox>
+    <h:hlsHBox>
+        <h:hlsLov name="bankAccountName" id="bankAccountName" code="BANK_ACCOUNT_INFO" colspan="4" contextPath="${base.contextPath}" data-bind="enabled: enabled, value:data.bankAccountId,text:data.bankAccountName" locale="${base.locale}" placeholder="退款账户" prompt="退款账户:" promptColspan="2" query="bankAccountNameQuery" change="bankAccountNameChange" select="bankAccountNameSelect" required="true" style="width:50%" />
+    	<h:hlsMaskedTextBox name="bankAccountNum" id="bankAccountNum" bind="enabled: isEnabled, value:data.bankAccountNum" colspan="4" prompt="账号:" promptColspan="2" style="width:50%" />    
+     </h:hlsHBox>
+</h:hlsForm>
+```
+### **主要属性**
+| 属性名 | 类型 | 描述 |
+| --- | --- | --- |
+| width | String | form组件的宽度|
+|hlsClassName | String |组件的类样式|
+| title | String | 标题文字|
+> **注意:**
+```javascript
+$('#query-form input').keydown(function (e) {
+	    if (e.keyCode == 13) {
+	        e.target.blur();
+	        viewModel.queryResource(e);
+	    }
+});
+```
+>**详解：**
+> - query-form 是表单id，input指表单内所有输入框 (样式选择器选到input)
+> - viewModel.queryResource(e)当按下回车按钮时都执行查询方法
+---------------
+#### viewModel在多处出现，这里粗略的介绍一下
+```
+viewModel用法
+Kendo MVVM是一种MVVM的实现，当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合
+```javascript
+var viewModel = kendo.observable({
+        model: {
+        //model 中可设置绑定初值
+            id:5
+        },
+        //可以自定义函数方法 :如saveFunction方法
+        saveFunction: function () {
+            $('#grid').data('kendoGrid').saveChanges();
+        },
+        queryResource: function (e) {
+            $('#grid').data('kendoGrid').dataSource.page(1);
+        }
+    });
+```
+使用:（**注意data-bind**）
+```html
+<div id="view">
+    <input data-bind="value: model.id" />
+    <button data-bind="click: saveFunction">Display</button>
+</div>
+```
+关于绑定
+```html
+<div id="view" data-bind="value: model.name"></div>
+<script>
+    var viewModel = kendo.observable({
+        model: {
+            name: "John Doe"
+        }
+    });
+    kendo.bind($("#view"), viewModel);
+</script>
+```
+> **注意:**
+> - viewModel中绑定是实时的，即viewModel中的name字段发生变化，则input中的value会一起变化，反之，当input中的value值变化，则viewModel中的name字段也会一同发生变化
+> - viewModel中的所有字段属性都是可自定义的
+> - 绑定需要input中data-bind 和kendo-bind两次绑定 第一是将数值绑定到model上，第二次是将此div绑定到viewModel上，这样才能访问到viewModel的model属性，也就是第一次绑定才有效
+重置按钮
+```javascript
+resetForm : function(e) {
+   	 var formData = viewModel.model.toJSON();
+   	 for ( var k in formData) {
+   		 viewModel.model.set(k, null);
+   	 }
+}
+```
+```html
+<span class="btn btn-default" data-bind="click:resetForm" type="button"><@spring.message "hap.reset"/></span>
+```
+> **注意:**
+> - viewModel与表单绑定后，model里面的字段变化，input框里的value里一起变化，所以在清空viewModel的同时，清空了表单里的数据