关键词:服务集成,弹出框,o2.DL,构建弹出框

O2OA允许用户对表单进行尝试定制以满足各种特殊业务的需求。本文主要介绍如何在O2OA中使用系统o2.DL构建弹出框的相关功能。


一、实现效果

使用O2OA平台封装好对象o2.DL的open方法创建弹出层,传入options参数构建弹出框内容、按钮等元素
实现效果:
image.png
对象源代码位置:o2server\o2web\source\o2_core\o2\xDesktop\Dialog.js,
该对象继承至o2.widget.Dialog,源代码位置:o2server\o2web\source\o2_core\o2\widget\Dialog.js

实现代码如下:

var dialog = o2.DL.open({
  "style" : "o2",
  "title": "弹出框标题",
  "width": "400",
  "height" : "200",
  "isMax": false,
  "isClose": true,
  "isResize": true,
  "isMove": true,
  "isTitle": true,
  "offset": {"x":-200, "y": -100},
  "mask": true,
  "content": new Element("div"),
  "container": this.form.getApp().content,
  "duration": 200,
  "buttonList": [
    {
      "text": "确定",
      "action": function(){
          var result = {"key":"value"};
          if (callback) callback.apply(this, [result]);  
          dialog.close();
      }.bind(this)
    },
    {
      "text": "取消",
      "action": function(){
               dialog.close();
      }.bind(this)
    }
  ],
  "onQueryClose": function(){
        console.log("-onQueryClose-");
  }.bind(this),
  "onPostClose": function(){
        console.log("-onPostClose-");
  }.bind(this),
  "onQueryLoad":function(){
        console.log("-onQueryLoad-");
  },
  "onPostLoad": function(){
        console.log("-onPostLoad-");
        new Element("div",{text:"这是内容区域"}).inject(this.content);
     // ...code...
  },
  "onQueryShow": function(){
        console.log("-onQueryshow-");
  },
  "onPostShow": function(){ 
        console.log("-onPostShow-");
  }.bind(this)
})


二、主要参数说明

1)、style:弹出框使用的样式,默认是default,系统内置一些样式,比如:flat,o2,chartd等,对应样式文件位置路劲:o2server\o2web\source\o2_core\o2\widget$Dialog,用户也可以自己增加自定义样式风格,对应文件及结构参考已有样式风格。
2)、title:弹出框头部标题,在isTitle参数为true时有效。
3)、width:弹出框宽度。 默认值:300
4)、height:弹出框高度。 默认值:150
5)、isMax:标题栏是否有最大化按钮,相对应有还原按钮,默认值:false
6)、isClose:标题栏是否有关闭按钮。默认值:false
7)、isResize:弹出框大小是否可调整。默认值:true
8)、isMove:弹出框是否可移动。默认值:true
9)、isTitle:是否显示标题栏。默认值:true
10)、offset:弹出框相对默认x轴y轴位置
11)、mark:是否需要遮罩层。默认值:true
12)、content:弹出框层的容器。
13)、container:弹出框层dom对象需要插入页面html内元素的位置,默认插入到body中。
14)、duration:动画显示弹出框效果时间。默认值:200
15)、buttonList:定义底部按钮,比如“确认”,“关闭”按钮等,数组列表。text:按钮显示名称,action: 按钮对应的点击事件
16)、onQueryClose:关闭弹出框前事件
17)、onPostClose:关闭弹出框后事件
18)、onQueryLoad:弹出框载入前事件
19)、onPostLoad:弹出框载入后事件
20)、onQueryShow:弹出框显示前事件
21)、onPostShow:弹出框显示后事件

三、其他注意事项及说明

1)、调用弹出框对象后各事件执行先手顺序 onQueryLoad-->onPostLoad-->onQueryShow-->onPostShow
2)、弹出框传值问题,通过apply方法,在关闭弹出框后把值通过回调方法传到外部调用的对象中。
3)、除了以上列出的一些常用参数及方法外,可以查看widget\Dialog.js源代码文件中其他内置的参数及方法。 比如setContentSize(),设置居中,reCenter()重新设置居中位置等方法。
4)、可以自定义一个dialog类设置继承widget.dialog重写内置方法,满足特殊的业务要求

推荐文章:

系统集成-腾讯企业邮集成配置
2021-02-25
O2OA平台并不包含企业邮箱解决方案,我们建议将专业的商业邮箱集成到O2OA中,作为更优的企业邮箱解决方案。本篇主要介绍如何在O2OA中如何集成腾讯企业邮。
常见问题-为什么127.0.0.1可以访问但其他IP无法访问
2021-02-07
备注:这里使用80、20020、20030端口为例。***部分一般添加到“-AINPUT-ptcp-mstate--stateNEW-mtcp--dport22
会议申请使用手册
2021-02-19
O2OA会议申请是使用平台流程管理能力开发的一个申请流程。员工的会议申请通过审批之后,可以同步到会议管理系统,由会议管理系统进行展现,提醒和跟踪。可以清晰地在会
源码编译-IOS客户端打包处理
2021-03-15
O2OA是真正全代码开源的应用开发平台,开发者可以直接使用从github或者gitee上clone的源码编译成IOS客户端,代码可以修改,安全可靠,无限制。本文
服务集成-发送用户名使用SSO进行登录认证
2021-03-02
O2OA提供多种SSO单点认证方式,比如约定密钥,OAuth2,SMAP等等。本文主要演示如何通过登录用户名,和SSO相关的配置,使用单点认证的方式进行O2Se
开发知识-中标麒麟安装达梦数据库(DM8)
2021-02-07
环境说明操作系统版本:NeoKylinLinuxAdvancedServerreleaseV7Update6(Chromium)1.前期准备工作1.1数据库下载
数据中心-数据视图开发
2021-03-01
O2OA提供的数据管理中心,可以让用户通过配置的形式完成对数据的汇总,统计和数据分组展现,查询和搜索数据形成列表数据展现。视图可以用于展现,用于选择以及用于统计
平台维护-备份和恢复平台数据操作
2021-02-26
O2OA提供平台数据导出导入的数据迁移方案,开发者可以将平台的全部数据从一个环境平滑迁移到其他的环境,不受操作系统和数据库限制,这也是一个很好的系统自动备份和恢
系统配置-服务器端口冲突和端口修改
2021-02-25
在安装O2OA的服务器上很可能已经启用了IIS、apache或者nginx等服务器,已经有其他的应用或者web站点正在运行中,所以O2OA启动所需要的80端口已
快速入门-服务器总体介绍汇总
2021-02-07
一、服务器目录介绍二、服务器组成结构三、服务器所占端口四、微服务API五、服务内置对象(方便二次开发、实现2小时一个流程目标)六、架构图

results matching ""

    No results matching ""