Easyui Notes (iii) window windows

Window (Windows)

A window control is a floating and draggable panel that can be used as an application window. By default, the window can be moved, resized, and closed. Its contents can also be defined as static HTML or dynamically loaded via Ajax.

1. Through the Tabs window window.

  
 

   
  

  
<div    id  =   "Win"    class  =   " Easyui-window "   title  =   "My window"    style  =   " Span class= "PLN" >width :  600px   height  :  400px   "    
   
  

  
 data-options="iconCls:‘icon-save‘,modal:true"> 
   
  

  
 Window Content 
   
  

  
</div> 
  
 

2. Create a window from JavaScript.

 
   
  

  
    
   
<div id="win"></div> 
 
   
  

  
 

   
  
 
   
$   (  ' #win '   window      
 
   
 width  :  600      
 
   
 height  :  400      
 Li class= "L3" > 
    modal  :  true     
   
});     
 
  
  
 

3. Create a composite Layout window.

Define the window layout as usual. The following example shows how to divide a form into two parts: the North and the middle.

  
 

   
  

  
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" 
   
  

  
 data-options="iconCls:‘icon-save‘,modal:true"> 
   
  

  
 <div class="easyui-layout" data-options="fit:true"> 
   
  

  
 <div data-options="region:‘north‘,split:true" style="height:100px"></div> 
   
  

  
 <div data-options="region:‘center‘"> 
   
  

  
 The Content. 
   
  

  
 </div> 
   
  

  
 </div> 
   
  

  
</div> 
  
 

Property

The properties of the window are extended from the panel, and the properties of the window are added or redefined as follows:

Property name	Property value type	Description	Default Value
Title	String	The caption text for the window.	New Window
Collapsible	Boolean	Defines whether the collapsible button is displayed.	True
Minimizable	Boolean	Defines whether the Minimize button is displayed.	True
Maximizable	Boolean	Defines whether the Maximize button is displayed.	True
Closable	Boolean	Defines whether the Close button is displayed.	True
Closed	Boolean	Defines whether the window can be closed.	False
ZIndex	Number	The z-axis coordinates of the window.	9000
Draggable	Boolean	Defines whether the window can be dragged and pulled.	True
Resizable	Boolean	Defines whether the window size can be changed.	True
Shadow	Boolean	If set to true, the shadow is displayed when the form is displayed.	True
Inline	Boolean	Defines how the window is laid out, and if set to true, the window will appear in its parent container, otherwise it will appear above all elements.	False
Modal	Boolean	Defines whether the form is displayed as a modal window.	True

Dialog (Dialog window) This dialog box is a special type of window that has a toolbar at the top and a button bar at the bottom. There is only one close button in the upper right corner of the dialog window the user can configure the dialog box to display other tools, such as the Collapsible,minimizable,maximizable tool.

Created by an existing DOM node element tag. The following example shows a variable-sized modal window.

  
 

   
  

  
<div    id  =   "DD"    class  =   " Easyui-dialog "   title  =   "My Dialog"    style  =   " Span class= "PLN" >width :  400px   height  :  200px    "    
   
  

  
 data-options="iconCls:‘icon-save‘,resizable:true,modal:true"> 
   
  

  
 Dialog Content. 
   
  

  
</div> 
  
 

Creating a dialog window with JavaScript is also allowed. Now let's create a modal window and call the ' refresh ' method to read the content through Ajax.

 
   
  

  
    
   
<div id="dd">Dialog Content.</div> 
 
   
  

  
 

   
  

  
$(‘#dd‘).dialog({ 
   
  

  
 title: ‘My Dialog‘, 
   
  

  
 width: 400, 
   
  

  
 height: 200, 
   
  

  
 closed: false, 
   
  

  
 cache: false, 
   
  

  
 href: ‘get_content.php‘, 
   
  

  
 modal: true 
   
  

  
}); 
   
  

  
$(‘#dd‘).dialog(‘refresh‘, ‘new_content.php‘); 
  
 

Property

The Properties of the dialog window are extended from the window, and the Properties of the dialog window are redefined as follows:

Property name	Property value type	Description	Default Value
Title	String	The caption text for the dialog box window.	New Dialog
Collapsible	Boolean	Defines whether the collapsible button is displayed.	False
Minimizable	Boolean	Defines whether the Minimize button is displayed.	False
Maximizable	Boolean	Defines whether the Maximize button is displayed.	False
Resizable	Boolean	Defines whether the dialog window size can be changed.	False
toolbar	array,selector	Settings dialog window at the top of the toolbar, the available values are: 1) An array, and the tool properties in each toolbar are the same as the LinkButton. 2) A selector specifies the toolbar. The Dialog window toolbar can be declared inside the <div> tag: <div class= "Easyui-dialog" style= "width:600px;height:300px" data-options= "title: ' My Dialog ', toolbar: ' #tb ', modal:true; Dialog window contents. </div> <div id= "TB"; <a href= "#" class= "Easyui-linkbutton" data-options= "ICONCLS: ' Icon-edit ', plain:true "/A> <a href=" # "class=" Easyui-linkbutton "data-options=" iconcls: ' Icon-help ', plain: True "/A> </div> Dialog window toolbar can also be defined by an array: <div class=" Easyui-dialog "style=" width : 600px;height:300px "data-options=" title: ' My Dialog ', Modal:true,toolbar:[{text: ' Edit ', iconcls: ' Icon-edit ', handler: function () {alert (' edit ')}},{text: ' Helper ', Iconcls: ' Icon-help ', handler:function () {alert (' Help ')}}] "> Dialog window contents. </div>	NULL
Buttons	Array,selector	dialog window at the bottom of the button, the available values are: 1) An array in which the properties of each button are the same as LinkButton. 2) A selector specifies the button bar. The button can be declared inside the <div> tag: <div class= "Easyui-dialog" style= "width:600px;height:300px" data-options= "title: ' My Dialog ', buttons: ' #bb ', modal:true" > The contents of the dialog box window. </div> <div id= "BB" > <a href= "#" class= "Easyui-linkbutton" > Save </a> <a href= "#" class= "Easyui-linkbutton" > Close </a> </div> Buttons can also be defined by an array: <div class= "Easyui-dialog" style= "width:600px;height:300px" data-options= "title: ' My dialog box ', modal:true,buttons:[{ Text: ' Save ', handler:function () {...}},{text: ' Off ', handler:function () {...}}] " > dialog Box window contents. </div>	Null

Messager (message window)

The message window provides different message box styles, including alert (warning box), Confirm (confirmation box), prompt (cue box), Progress (progress box), etc. All message boxes are asynchronous. The user can use the callback function after the interaction message to process the result or do something they need to handle.

Method

Method Name	Method Parameters	Description
$.messager.show	Options	A message window appears in the lower-right corner of the screen. This option parameter is a configurable object: ShowType: Defines how the message will be displayed. Available values are: Null,slide,fade,show. Default: Slide. Showspeed: Defines the excessive time that the window displays. Default: 600 milliseconds. Width: Defines the breadth of the message window. Default: 250px. Height: Defines how high the message window is. Default: 100px. Title: the caption text displayed in the head panel. Msg: The message text that is displayed. Style: Defines a custom style for the message form. Timeout: If defined as 0, the message form will not automatically close unless the user closes him. If defined as a tree other than 0, the message form will automatically close after a time-out. Default: 4 seconds. code example: $.messager.show ({title: ' My Message ', msg: ' The message will be closed after 5 seconds. ', Timeout:5000,showtype: ' Slide '});//messages will be displayed in the top middle $.messager.show ({title: ' My Message ', msg: ' Messages will be closed after 4 seconds.) ', ShowType: ' Show ', Style:{right: ', Top:document.body.scrolltop+document.documentelement.scrolltop,bottom: '}});
$.messager.alert	Title, MSG, icon, fn	Displays a warning window. Parameters: Title: the caption text displayed in the head panel. Msg: The message text that is displayed. Icon: An image of the icons displayed. Available values are: error,question,info,warning. FN: Triggers the callback function when the window is closed. code example: $.messager.alert (' My message ', ' This is a hint message! ', ' info ');
$.messager.confirm	Title, MSG, FN	Displays a confirmation message window that contains the OK and Cancel buttons. Parameters: Title: the caption text displayed in the head panel. Msg: The message text that is displayed. FN (b): When the user taps the "OK" button, a true value is passed to the callback function, otherwise a false value is passed. code example $.messager.confirm (' Confirm dialog ', ' Do you want to exit the system? ', function (r) {if (R) {//exit operation;}});
$.messager.prompt	Title, MSG, FN	Displays a message form with a "OK" and "Cancel" button that the user can enter text into. Parameters: Title: the caption text displayed in the head panel. Msg: The message text that is displayed. FN (val): A callback function that executes when the user enters a value parameter. code example: $.messager.prompt (' Hint message ', ' Please enter your name: ', function (r) {if (R) {alert (' Your name is: ' + R ');});
$.messager.progress	Options or method	Displays a progress message form. property is defined as: Title: the caption text displayed in the head panel. Default: Empty. Msg: The message text that is displayed. Default: Empty. Text: The texts displayed on the progress bar. Default: Undefined. Interval: The time interval for each progress update. Default: 300 milliseconds. method is defined as: Bar: Gets the progress bar object. Close: Closes the progress window. code example: Displays the Progress message window. Close the Progress message window. $.messager.progress (' close ');

Instance code download

Easyui Notes (iii) window windows