output组件是数据的输出组件。

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

output组件是平台封装的一个基础控件，主要用于数据的输出和展示作用。output组件根据类型和属性的不同，能实现，数据的展示、样式等操作。

组件路径：/UI2/system/components/justep/output
组件标识：$UI/system/components/justep/output/output

二. DOM结构

  • 典型dom结构1
<div component="$UI/system/components/justep/output/output"
  class="x-output" xid="output6" format="0,000.00"
  bind-ref="testData.ref('fPeice')"
  style="height:100px;width:100px;">
</div>
  • 典型dom结构2
<div component="$UI/system/components/justep/output/output"
  class="x-output" xid="output4"
  bind-text="&amp;quot;合计：&amp;quot;+$model.calcData.val(&amp;quot;fSumMoney&amp;quot;)"
  style="text-align:right;">
</div>

三. 样式

  • x-output

组件标识class，基础的样式定义

四. 属性

组件具有公共属性，请参考组件公共属性

  • bind-ref

数据感知的绑定表达式

  • datatype

数据类型，当有bind-ref时使用bind-ref的数据类型

  • format

显示格式，当绑定数据类型为Date、DateTime、Time时的显示格式

五. 方法

组件具有公共方法，请参考组件公共方法

  • set

void set (json arg)
设置属性值

>参数

arg 属性值对 json结构如下：
{
“dataType: {string} 指定数据类型，当bind-ref没有定义时有效
“format: {string} 格式化，当绑定数据类型为Date、DateTime、Time时的显示格式
“value”: {object} 设置output的值，当没有设置bind-ref时可使用

> 返回值

void

> 例:

//设置组件属性值
this.comp('output4').set({"format": "0,000.00"});
  • get

Object get (String name)
获得input属性值

> 参数

name:

[String] 属性名称，取值范围：”dataType”、”format”、”value”

>返回值

Object

> 例:

//获取output属性值
  this.comp('output6').get("format");

六. 事件

  • onRender

public void onRender (object event)[回调型事件]渲染output触发事件

>参数

event:[object ]触发事件时，组件提供的相关参数

event结构如下：

{
  "source" : 组件的js对象,
  "value" : 值,
  "html" : 输出的html片段，通过修改此属性影响output组件展现
  "bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明
}

>例

  //如果数据是1，显示男，否则显示女
Model.prototype.output2Render= function(event){
    if(event.value == '1')
        event.html = "男";
    else
        event.html = "女";
};

七. 操作

  • (无)

八. 案例

1、输出框显示日期

date

  • 设置output组件的bind-ref属性，关联data组件中的列
  • data中列的类型是date或datetime时，显示为日期
  • 设置format属性，控制日期时间的显示格式

代码示例：

<div component="$UI/system/components/justep/output/output"
  class="x-output x-edit" xid="output7"
  bind-ref="testData.ref('PurchaseTime')"
  format="yyyy-MM-dd">
</div>
 <div component="$UI/system/components/justep/output/output"
  class="x-output x-edit" xid="output8"
  bind-ref="testData.ref('PurchaseTime')"
  format="yyyy-MM-dd hh:mm">
</div>
2、输出框前景色（字体颜色）

out-font-color

  • 通过样式控制字体颜色。

代码示例：

.x-output{
   color: red;
}

 <div component="$UI/system/components/justep/output/output"
   class="x-output" xid="output16"
   bind-ref="testData.ref('fName')">
</div>
3、设置输出框背景色

out-back-color

  • 通过样式控制输出框背景色。

代码示例：

.x-output{
   background-color: yellow;
}

 <div component="$UI/system/components/justep/output/output"
   class="x-output" xid="output20"
   bind-ref="testData.ref('fName')">
</div>
4、设置输出框字体大小

out-size

  • 通过样式控制输出框字体大小

代码示例：

.x-output{
   font-size:24px;
}

<div component="$UI/system/components/justep/output/output"
   class="x-output" xid="output19"
   bind-ref="testData.ref('fName')">
</div>
5、输出框字体居中显示

out-center

  • 通过样式控制输出内容居中显示。

代码示例：

.x-output{
   text-align:center;
}

<div component="$UI/system/components/justep/output/output"
  class="x-output" xid="output17"
  bind-ref="testData.ref('fName')">
</div>
 </div>
6、输出框字体右对齐

out-right

  • 通过样式控制输出内容右对齐方式显示。

代码示例：

.x-output{
   text-align:right;
}

 <div component="$UI/system/components/justep/output/output"
  class="x-output"
  xid="output21" bind-ref="testData.ref('fName')">
 </div>
7、输出框显示边框

border

  • 通过样式控制将输出框的边框显示。

代码示例：

.x-output
  border-style:groove groove groove groove;
}

<div component="$UI/system/components/justep/output/output"
   class="x-output x-edit" xid="output9"
   bind-ref="testData.ref('fName')">
</div>

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443