O2OA开发平台:(前端)在O2OA中使用系统o2.DL构建弹出框

news/2024/7/20 21:35:30 标签: java, ios, android

1、使用O2OA平台封装好对象o2.DL的open方法创建弹出层,传入options参数构建弹出框内容、按钮等元素

实现效果:

对象源代码位置: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)

})

 

2、主要参数说明

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:弹出框显示后事件

3、其他注意事项及说明

1)、调用弹出框对象后各事件执行先手顺序 onQueryLoad-->onPostLoad-->onQueryShow-->onPostShow

2)、弹出框传值问题,通过apply方法,在关闭弹出框后把值通过回调方法传到外部调用的对象中。

3)、除了以上列出的一些常用参数及方法外,可以查看widget\Dialog.js源代码文件中其他内置的参数及方法。              

 比如setContentSize(),设置居中,reCenter()重新设置居中位置等方法。

4)、可以自定义一个dialog类设置继承widget.dialog重写内置方法,满足特殊的业务要求

(转自公众号:浙江兰德网络)


http://www.niftyadmin.cn/n/953372.html

相关文章

开源免费的OA系统——云文件功能详解

在互联网和电子化的世界里,原来的纸质材料都被office文件、pdf文件、HTML文件等等格式的电子版文件替代。厚重的纸张、书册都被压缩到了计算机盘片、固态硬盘、磁盘和光盘等物理载体中储存,对比传统的纸质材料,物理载体在储存材料的容积上有了…

O2OA开源免费开发平台:自定义提交功能

功能介绍 当默认提交界面不能满足用户时候,可以使用本功能进行提交界面的定制。自定义提交功能基于表单和脚本实现。开发人员可以通过修改自定义界面的样式,添加或删除组件,设置提交选人框的高度、宽度和预定义的样式来实现界面的修改。该功…

O2OA开源免费办公开发平台:开机自动启动O2Server

一、Windows系统自动启动O2Server 1. 修改node_127.0.0.1.json 找到o2server\configSample的目录下的node_127.0.0.1.json文件,如下图: 编辑node_127.0.0.1.json文件,在里面找到autoStart参数,设置为“true”,保存关闭。如下图&…

O2OA开源免费开发平台:在O2门户页面中使用React(一)

O2OA提供了门户平台,使用可视化方式设计页面,用于设计系统主页、列表等系统中的各类页面,在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员,或者已经习惯了使用前端开发框架的用户,这种页面设计模式…

Java 开源办公开发平台 O2OA V5.1.1 发布 | 支持 Vue、React、Angular

O2OA提供了门户平台,使用可视化方式设计页面,用于设计系统主页、列表等系统中的各类页面,在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员,或者已经习惯了使用前端开发框架的用户,这种页面设计模式…

O2OA开源免费开发平台:在O2门户页面中使用React(二)

本章我们介绍使用React的Create React App工具,在O2平台中创建React应用。在本例中,我们将列示当前用户的前20条待办,点击标题打开待办;并通过点击按钮启动流程和打开主页。 版本要求 本文适用于如下版本: O2OA版本…

O2OA开源免费开发平台:在O2门户页面中使用React(三)

在前面的章节中,我们介绍了两种在O2OA中使用React开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。 我们还是使用React的Create React App工具,创建…

O2OA开源免费开发平台:启用Eruda进行移动端调试

O2OA平台启用Eruda进行移动端调试 Eruda 是一个专为前端移动端、移动端设计的调试面板,类似Chrome DevTools 的迷你版(没有chrome强大 这个是可以肯定的),其主要功能包括:捕获 console 日志、检查元素状态、显示性能指…