Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use system o2.DL to build pop-up box in O2OA". In daily operation, I believe many people have doubts about how to use system o2.DL to build pop-up box in O2OA. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to use system o2.DL to build pop-up box in O2OA". Next, please follow the editor to study!

1. Use the open method of encapsulating the object o2.DL on the O2OA platform to create a pop-up layer, and pass in options parameters to build pop-up box contents, buttons and other elements

Achieve results:

Object source code location: o2server\ o2web\ source\ o2_core\ O2\ xDesktop\ Dialog.js

The object inherits from o2.widget.Dialog, source code location: o2server\ o2web\ source\ o2_core\ O2\ widget\ Dialog.js

The implementation code is as follows:

Var dialog = o2.DL.open ({

"style": "O2"

"title": "pop-up box title"

"width"

"height":

"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":

"buttonList": [

{

"text": "OK"

"action": function () {

Var result = {"key": "value"}

If (callback) callback.apply (this, [result])

Dialog.close ()

} .bind (this)

}

{

"text": "cancel"

"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: "this is the content area"}) .inject (this.content)

/ /... code...

}

"onQueryShow": function () {

Console.log ("- onQueryshow-")

}

"onPostShow": function () {

Console.log ("- onPostShow-")

} .bind (this)

})

2. Description of main parameters

1), style: the style used in the pop-up box is default by default, and some styles are built into the system, such as flat,o2,chartd, etc., corresponding to the location of the style file: o2server\ o2web\ source\ o2_core\ O2\ widget\ $style. You can also add your own custom style, corresponding to the file and structure reference existing style.

2), title: pop-up box header title, which is valid when the isTitle parameter is true.

3), width: pop-up box width. Default value: 300

4), height: pop-up box height. Default value: 150

5), isMax: whether there is a maximize button in the title bar, there should be a restore button. Default: false

6), isClose: whether the title bar is related to the close button. Default value: false

7), isResize: whether the pop-up box can be adjusted. Default value: true

8), isMove: whether the pop-up box is movable. Default value: true

9), isTitle: whether to display the title bar. Default value: true

10), offset: pop-up box relative to the default x-axis y-axis position

11), mark: whether a mask layer is required. Default value: true

12), content: the container that pops up the box layer.

13), container: the pop-up box layer dom object needs to be inserted into the location of the elements in the page html, which is inserted into the body by default.

14), duration: animate the pop-up box effect time. Default value: 200

15), buttonList: define the bottom button, such as "confirm", "close" button, etc., array list. Text: button display name, action: click event corresponding to the button

16), onQueryClose: event before closing the pop-up box

17), onPostClose: event after the pop-up box is closed

18), onQueryLoad: pop-up box pre-load event

19), onPostLoad: event after loading of pop-up box

20), onQueryShow: pop-up box showing pre-event

21), onPostShow: events after pop-up box is displayed

3. Other points for attention and instructions

1) after calling the pop-up box object, the events are executed in the first-hand order onQueryLoad-- > onPostLoad-- > onQueryShow-- > onPostShow

2), the pop-up box transfer value problem, through the apply method, after closing the pop-up box, the value is passed to the externally called object through the callback method.

3) in addition to some of the common parameters and methods listed above, you can check out other built-in parameters and methods in the widget\ Dialog.js source code file.

For example, setContentSize (), set the center, reCenter () reset the center position and so on.

4) you can customize a dialog class setting to inherit widget.dialog rewrite built-in methods to meet special business requirements

At this point, the study on "how to use the system o2.DL to build a pop-up box in O2OA" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.