Solve the problem that the moving position is not centered after the jquery easyui window is opened

Solve the problem that the moving position is not centered after the jquery easyui window is opened

After opening, it is easy to solve the problem of moving the location to the center after opening. When opening it, we can set the left and top attributes.

Var $ win;
$ Win = $ ('# test-Windows'). window ({
Title: 'add Course settings information ',
Width: 820,
Height: 450,
Top :( $ (window). height ()-820) * 0.5,
Left :( $ (window). width ()-450) * 0.5,
Shadow: true,
Modal: true,
IconCls: 'icon-add ',
Closed: true,
Minimizable: false,
Maximizable: false,
Collapsible: false
});

$ Win. window ('open ');

HTML code

Welcome to http://www.my400800.cn

　

OK
Cancel

Attribute and method description

Window must depend on the following three components:
* Draggable)
* Resizable)
* Panel)

Next we will introduce the specific usage of Window. First of all, let's lookAttributeMost of the properties are the same as those of panel. Some private properties of Window are listed below:

Default attribute name type description

ZIndex	Number	The z-index attribute of the window, which can be used to add	9000
Draggable	Boolean	Determines whether a window can be dragged.	True
Resizable	Boolean	Define whether the window size can be changed	True
Shadow	Boolean	If this parameter is set to true, the window shadow is displayed.	True
Modal	Boolean	Defines whether a window is a mode window.	True

Window also overwrites some properties in the Panel.

Default attribute name type description

Title	String	Title Text of the window	New Window
Collapsible	Boolean	Define whether to display the foldable definition button	True
Minimizable	Boolean	Define whether to display the minimization button	True
Maximizable	Boolean	Define whether to display the maximize button	True
Closable	Boolean	Define whether to display the close button	True

Event

Attribute Default name type description

Title	String	Title text displayed in the panel header	Null
IconCls	String	A css class to display 16x16 icons in the panel	Null
Width	Number	Set panel width	Auto
Height	Number	Set the Panel height	Auto
Left	Number	Set the left side of the Panel	Null
Top	Number	Set the top position of the Panel	Null
Cls	String	Add a CSS class to the Panel	Null
HeaderCls	String	Add a CSS class to the panel header	Null
BodyCls	String	Add a CSS class to the panel subject	Null
Style	Object	Customize the Panel Style	{}
Fit	Boolean	When set to true, the Panel size will fit its parent container.	False
Border	Boolean	Define the border of the Panel	True
DoSize	Boolean	When set to true, the Panel will be adjusted and re-laid when it is created.	True
Collapsible	Boolean	Define whether to display the foldable definition button	False
Minimizable	Boolean	Define whether to display the minimization button	False
Maximizable	Boolean	Define whether to display the maximize button	False
Closable	Boolean	Define whether to display the close button	False
Tools	Array	Custom tool. Each tool can contain two attributes: iconCls and handler.	[]
Collapsed	Boolean	Define collapse panel during initialization	False
Minimized	Boolean	Defines how to minimize the Panel during initialization	False
Maximized	Boolean	Defines the maximum panel during initialization	False
Closed	Boolean	Define to close the Panel during initialization	False
Href	String	Load data from a remote URL and display it in the panel	Null
LoadingMessage	String	Information displayed on the Panel when loading Remote Data	Loading...

Event Name parameter description

OnLoad	None	Triggered when remote data is loaded
OnBeforeOpen	None	Triggered before the panel is opened
OnOpen	None	Triggered when the Panel is opened
OnBeforeClose	None	Triggered before the panel is closed
OnClose	None	Triggered when the Panel is closed
OnBeforeDestroy	None	Triggered before panel destruction
OnDestroy	None	Triggered when the Panel is closed
OnBeforeCollpase	None	Triggered before panel collapse
OnCollapse	None	Triggered when the Panel is folded
OnBeforeExpand	None	Triggered before panel Expansion
OnExpand	None	Triggered when the Panel is expanded
OnResize	Width, height	Triggered when the Panel is adjusted Width: The New width. Height: New height
OnMove	Left, top	Triggered when the Panel is moved Left: New left position Top: New top position
OnMaximize	None	Triggered when the window is maximized
OnRestore	None	Triggered when the window is restored to the original size
OnMinimize	None	Triggered when the window is minimized.

Method Name parameter description

Options	None	Returns the set property value.
Panel	None	Return panel object
Header	None	Returned panel header object
Body	None	Return panel subject object
SetTitle	Title	Set panel header title
Open	ForceOpen	When forceOpen is set to true, the onBeforeOpen callback function is ignored when the Panel is opened.
Close	ForceClose	When forceClose is set to true and the Panel is closed, the onBeforeClose callback function is ignored.
Destroy	ForceDestroy	When forceDestroy is set to true, the onBeforeDestroy callback function is ignored when the Panel is destroyed.
Refresh	None	When the href value is set, refresh the Panel to load remote data.
Resize	Options	Set the Panel size and layout. These options include the following attributes: Width: the width of the new panel. Height: the height of the new panel. Left: left of the new Panel Top: top position of the new Panel
Move	Options	Move the Panel to a new location. These options include the following attributes: Left: left of the new Panel Top: top position of the new Panel