门户开发-组件介绍-分页Tab组件
本篇讲解 O2OA 平台门户设计器中分页组件的使用方式，说明页签与内容成对出现的结构特点。拖入后会自动生成若干页签，可通过操作条在末尾追加，也可拖动调整顺序或删除多余部分，页签宽度与样式分组需对应设置才能保持外观整齐。开启延时加载能减轻首屏渲染压力，适合依赖脚本测算尺寸的场景。需要注意的是分页、页签与内容共用相同的事件与方法命名，调整结构后应复核页面标识。
O2OA 平台具备门户页面定制与集成能力。通过门户定制，可结合企业文化和业务需求，设计符合企业需要的统一信息门户、系统首页等 UI 界面。本文介绍页面设计器元素组件中的分页组件。
一、先决条件
1、O2Server 服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署 O2OA》
2、以拥有管理员权限或拥有门户管理员（PortalManager 角色）的用户账号登录 O2OA 平台，如：xadmin
3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》
二、分页组件概述
分页组件采用 Tab 页方式的布局，包含两个子组件：tab 页签（tab$Page）和 tab 内容（tab$Content）。Tab 页签与 tab 内容总是成对出现。将分页组件拖动到页面后，系统默认创建4个 tab 页签和 tab 内容。
三、分页属性
选中分页组件后，上方操作条会出现一个添加按钮：
该按钮用于在分页组件的所有 tab 标签末尾添加一个 tab 标签和 tab 内容。
1、分页基本属性
分页基本属性中特有的属性是“延时加载”。选择“是”时：页面打开仅加载当前显示的 tab 内容页及其子组件，其余 tab 内容页需等到切换 tab 标签、tab 内容显示时才会加载。这在需要通过脚本计算元素大小才能展现的场景中非常有用，也可优化页面打开速度。选择“否”时：（默认）所有 tab 内容在页面打开时加载。
2、分页样式属性
分页样式属性中可定义6组 css，分别用于设置分页组件各个 dom 元素的样式。
四、tab 标签属性
选中 tab 标签后，上方操作条会发生变化：
这三个按钮的作用如下：拖动可交换 tab 标签的位置。添加按钮会在当前 tab 标签的前面（左边）添加一个 tab 标签和 tab 内容。删除按钮会删除当前的 tab 标签和 tab 内容。Tab 标签的基本属性中，可设置一个宽度值，单位为 px。
tab 内容属性
tab 内容没有特有属性，相当于一个容器组件。
五、分页事件
分页、tab 标签和 tab 内容的系统事件同样是常规的三个事件：
事件名 | 描述 |
queryLoad | 元素被载入之前执行 |
loadpostLoad | 元素被载入之后执行 |
六、分页方法
分页、tab 标签和 tab 内容的方法也无特殊。通过以下脚本获取元素对象：
获取的元素可使用以下方法：
方法名（属性） | 用法 | 描述 |
show | el.show() | 显示元素 |
hide | el.hide() | 隐藏元素 |
addEvent | el.addEvent(name,fun) | 给元素绑定系统事件。name：事件按名称 fun：执行的方法 |
node | vardom= el.node | 获取 html 原生 Dom 对象 |
以上简要说明了门户设计器中分页组件的用法，关于门户页面开发的更多介绍请参考以下文章：
《门户开发-快速入门开发一个门户实例》《门户开发-组件介绍-容器、通用元素》《门户开发-组件介绍-数据源、子数据源、数据文本》《门户开发-组件介绍-文本、图片、按钮》《门户开发-组件介绍-表格》《门户开发-组件介绍-iframe、HTML》《门户开发-组件介绍-嵌入视图、嵌入统计、嵌入查询视图》《门户开发-组件介绍-文本字段、多行文本、地址、组合框》《门户开发-组件介绍-人员组织》《门户开发-组件介绍-日期选择》《门户开发-组件介绍-下拉框、单选框、多选框》《门户开发-组件介绍-平台应用》《门户开发-组件介绍-数据表格》《门户开发-组件介绍-ElementUI 组件》《门户开发-组件介绍-部件、部件元素》
相关问题讨论
相关内容
上一篇：门户开发-组件介绍-表格
浙公网安备33010602013943号