关键词:弹出框,服务集成,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重写内置方法,满足特殊的业务要求



推荐文章:

Custom应用前端代码编译
2021-03-15
O2OA允许用户对服务进行扩展,可以修改原来的代码,但是我们更推荐用户增加新的war包,jar包,根据O2OA的源码结构新增服务和应用来进行业务的扩展。本文主要
业务开发-组织架构-组织职位信息管理
2021-02-26
O2OA提供多级组织架构设置能力,用户可以在系统内设置集团、分公司、部门、小组等多级企业组织结构来满足办公需要,可以为组织设置不同的职务来实现配置和人员的解耦。
考勤管理-新版
2021-09-06
@企业办公系统@考勤管理@开源办公系统@员工考勤@人事考勤O2OA考勤管理提供了一个通用的考勤管理,企业可以使用它实现手机打卡,数据导入,数据分析,数据统计。员
服务集成-发送用户名使用SSO进行登录认证
2021-03-02
O2OA提供多种SSO单点认证方式,比如约定密钥,OAuth2,SMAP等等。本文主要演示如何通过登录用户名,和SSO相关的配置,使用单点认证的方式进行O2Se
藕粉社区问答系列4
2021-10-15
[流程设计]流程中,调用服务报错问题内容:解决方案:是由于用户选错服务应用接口,应用是组织管理而不是组织管理接口服务[流程设计]流程图中选择活动的条件中如何在控
办公用品管理使用手册
2021-02-18
O2OA办公用品管理为企业提供办公用品的入库,领用,采购维护等功能,以便于轻松管理物资,减少铺张浪费,节约成本,提高办公效率。
通用版企业信息化协同平台演示环境
2021-09-22
概述通用版信息化协同平台适用于各企事业单位等。用户可以一目了然的看到工作中的待办事宜、通知公告等信息,也可以按用户的需要设置各类功能,包括:信息发布、文件管理、
移动办公-微信扫码登录办公系统配置
2021-02-25
O2OA平台可以使用符合OAuth2标准的第三方认证进行平台的登录认证。本篇主要介绍如何将在O2OA中集成微信扫码登录功能。
系统配置-自定义消息提醒
2021-06-25
O2OA平台设计了灵活的消息提醒数据交互方式,开发者可以根据自己的需要,来消费消息提醒数据,也可以将消息提醒数据接入到Kafka消息中间件来实现消息的准实时提醒
流程设计-流程设计与应用权限设置
2021-02-26
本文主要介绍如何在O2OA中进行审批流程或者工作流设计,O2OA主要采用拖拽可视化开发的方式完成流程的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改

results matching ""

    No results matching ""