门户开发-组件介绍-文本、图片、按钮-门户管理-O2OA企业应用开发平台-人人都是协同系统开发专家

门户开发-组件介绍-文本、图片、按钮

时间：2023-03-17

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力，平台通过门户定制，可以根据企业的文化，业务需要设计符合企业需要的统一信息门户，系统首页等UI界面。从本篇讲的是页面设计器元素组件中最常用到的三个组件：文本、图片和按钮。

一、先决条件

1、O2Server服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署O2OA》

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录O2OA(翱途)开发平台，如：xadmin

3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》

二、文本

image (13).png

文本顾名思义就是显示一段文字内容的组件。

1. 文本属性

image (14).png

文本特有的基本属性如下：

属性	描述	备注
前缀	文本前后可添加一个图标
后缀	文本前后可添加一个图标
值	文本要显示的值	有两个选项：“固定值”和”脚本“ 固定值：直接在编辑框中输入要显示的内容脚本：通过脚本返回要显示的内容

2. 文本事件

除了DOM事件之外，文本系统事件如下

事件名

描述

queryLoad

元素被载入之前执行

load

postLoad

元素被载入之后执行

3. 文本方法

文本对象可以通过以下脚本获取：

var el = this.page.get(name); //name为文本的标识

获取的元素有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom= el.node	获取html原生Dom对象
setText	el.setText(str)	设置文本显示内容

三、图片

image (15).png

图片组件用于显示一张图片或者图片icon之类的。

1. 图片属性

image (16).png

图片特有的基本属性如下：

属性	描述	备注
图片	可以选择本地图片，进行展现
选择资源	从资源文件选择图片，用于展现

2. 图片事件

除了DOM事件之外，图片的事件如下：

事件名

描述

queryLoad

元素被载入之前执行

load

postLoad

元素被载入之后执行

3. 图片方法

图片对象可以通过以下脚本获取：

var el = this.page.get(name); //name为图片的标识

获取的图片有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom= el.node	获取html原生Dom对象
reset	el. reset (str)	重新载入图片

四、按钮

image (17).png

按钮组件就是在页面上放置一个按钮。

1. 按钮属性

按钮基本属性和图片一致：改变“名称”属性，可改变按钮的显示。

2. 按钮事件

按钮事件和文本事件一致。

3. 按钮方法

按钮对象可以通过以下脚本获取：

var el = this.page.get(name); //name为按钮的标识

获取的元素有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom= el.node	获取html原生Dom对象