JqxWindow: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[File:Jqxwindow1.png]]  
[[File:Jqxwindow1.png]]  


''This is a default window with only text in it.''


[[File:Jqxwindow2.png]]  
[[File:Jqxwindow2.png]]  


''This is a Window with a form in it.''


== Description ==  
== Description ==  
Line 13: Line 15:
== Properties and Methods ==  
== Properties and Methods ==  


See the complete documentation at jqWidget's site:  
This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm?(arctic)#demos/jqxwindow/defaultfunctionality.htm


{| class='wikitable'
{| class='wikitable'
Line 61: Line 62:
|-
|-
| title || The title of the window. Can be HTML.
| title || The title of the window. Can be HTML.
|}  
|}
== Example (Basic) ==


<pre>
== Example ==
Function btnDefault_onclick()
  Window1.show() 
End Function
 
Function btnContent1_onclick()
  Window1.show(Content1) 
End Function
</pre>


== Example (JavaScript) ==
<tabber>
<pre>
JavaScript=
<syntaxhighlight lang="JavaScript">
btnDefault.onclick = function() {
btnDefault.onclick = function() {
     Window1.show();
     Window1.show();
Line 83: Line 76:
     Window1.show(Content1);
     Window1.show(Content1);
}
}
</pre>
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
Function btnDefault_onclick()
  Window1.show() 
End Function
 
Function btnContent1_onclick()
  Window1.show(Content1) 
End Function
</syntaxhighlight>
</tabber>


== Output ==
== Output ==

Latest revision as of 22:03, 24 July 2019

This is a default window with only text in it.

This is a Window with a form in it.

Description

You can use the jqxWindow to direct a user’s attention to a particular activity in your application, such as entering data or viewing information. Consider using a jqxWindow when you want greater customization, you want to block the user interface outside the window, or when you want to retrieve a DialogResult and other data from the popup window. jqxWindow can be displayed as a modal dialog window that blocks user interaction with the underlying user interface or as a standard window without blocking the web page's user interface.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

Properties and Methods

This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.

animationType Sets the animation type of window.
autoOpen Sets whether the window will be shown after its creation.
closeAnimationDuration Determines the close animation duration.
closeButtonAction Sets what happens with the close button.
closeButtonSize The size of the close button.
collapseAnimationDuration Determines the duration in milliseconds of the expand/collapse animation.
collapsed Determines whether the window is collapsed.
draggable Sets whether the window is draggable.
isModal Sets whether the window is displayed as a modal dialog. If the jqxWindow's mode is set to modal, the window blocks user interaction with the underlying user interface.
keyboardCloseKey Sets the key which could be used for closing the window when it's on focus. Possible value is every keycode and the 'esc' string (for the escape key).
keyboardNavigation Determines whether the keyboard navigation is enabled or disabled.
maxHeight Sets or gets window's maximum height.
maxWidth Sets or gets window's maximum width.
minHeight Sets or gets window's minimum height.
minWidth Sets or gets window's minimum width.
position Sets the window's position. The value could be in the following formats: 'center', 'top, left', '{ x: 300, y: 500 }', '[300, 500]'.
resizable Sets whether the window is resizable.
showAnimationDuration Determines the show animation duration
showCloseButton Show a close button?
showCollapseButton Show a collapse button?
text The text to display in the window. Can be HTML.
title The title of the window. Can be HTML.

Example

btnDefault.onclick = function() {
    Window1.show();
}

btnContent1.onclick = function() {
    Window1.show(Content1);
}

Function btnDefault_onclick()
  Window1.show()  
End Function

Function btnContent1_onclick()
  Window1.show(Content1)  
End Function

Output

See above.