门户开发-组件介绍-容器、通用元素
本篇介绍 O2OA 门户设计器中最基础的容器与通用元素组件。容器组件对应 HTML 中的 div 元素，主要用于页面布局，文中说明其标识、名称、样式与 HTML 属性，以及载入前后的事件和显示、隐藏、绑定事件、获取原生节点等方法。通用元素的属性、事件与用法与容器基本相同，区别在于可以自行选择标签并通过脚本返回内置 HTML。
O2OA 平台具备门户页面定制与集成的能力，通过门户定制可根据企业文化与业务需要，设计符合企业需要的统一信息门户和系统首页等 UI 界面。本篇介绍已有元素组件中最基础的两个组件：容器与通用元素。
一、先决条件
1、O2Server 服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署 O2OA》
2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录 O2OA 平台，如：xadmin
3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》
二、容器
容器组件就是 HTML 中的 div 元素，主要用于布局。
1、容器基本属性
容器属性如下：
属性 | 描述 | 备注 |
标识 | 容器的唯一标识 | 同一页面内不可重复 |
名称 | 容器的名称 | |
描述 | 容器的描述 | |
样式 | 可以为容器定制 CSS 样式 | 您可以为这个 DIV 对象同时设置 CSS 样式与 HTML 属性。 |
属性 | 可以为容器设置 HTML 属性 |
2、容器事件
容器的事件除了 DOM 事件之外，系统事件如下：
事件名 | 描述 |
queryLoad | 容器被载入之前执行。 |
load postLoad | 容器被载入之后执行；此时不能确保容器中的子表单元素或异步元素已经加载完成。 |
3、容器的方法
容器对象可以通过以下脚本获取：
var div = this.page.get(name); //name为容器的标识
获取的容器有以下方法可以使用：
方法名（属性） | 用法 | 描述 |
show | div.show() | 显示容器元素 |
hide | div.hide() | 隐藏容器元素 |
addEvent | div.addEvent(name, fun) | 给容器绑定系统事件。 name：事件按名称 fun： 执行的方法 |
node | var dom=div.node | 获取 html 原生 Dom 对象 |
三、通用元素
通用元素属性、事件、用法基本都跟容器一致。它用于创建 html 的 Dom 元素。
1、通用元素属性
通用元素属性比容器多了选择标签以及内置 HTML。
属性 | 描述 | 备注 |
选择标签 | 可以选择通用元素使用什么 html 标签 | |
内置 HTML | 通过脚本返回 Html 代码 |
2、通用元素事件
与容器一致
3、通用元素方法
与容器一致
以上是门户设计器中容器与通用元素组件的简要说明，如需了解门户页面开发的更多内容，请参考以下文章：
《门户开发-快速入门开发一个门户实例》《门户开发-组件介绍-容器、通用元素》《门户开发-组件介绍-数据源、子数据源、数据文本》《门户开发-组件介绍-文本、图片、按钮》《门户开发-组件介绍-表格》《门户开发-组件介绍-iframe、HTML》《门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图》《门户开发-组件介绍-文本字段、多行文本、地址、组合框》《门户开发-组件介绍-人员组织》《门户开发-组件介绍-日期选择》《门户开发-组件介绍-下拉框、单选框、多选框》《门户开发-组件介绍-平台应用》《门户开发-组件介绍-数据表格》《门户开发-组件介绍-ElementUI 组件》《门户开发-组件介绍-部件、部件元素》
相关内容
浙公网安备33010602013943号