Jquery Easyui dialog Box Component dialog Usage details (_jquery)

The dialog dialog box component relies on window (window) components, LinkButton components

Load mode

Class load

  <div class= "Easyui-dialog"
     title= pop-up box "
     data-options=" iconcls: ' Icon-add ', Resizable:true,modal:true '
     style= "width:400px;height:200px;" >
    Popup box content
  </div>

JS Call load

 <div id= "box" >
 popup content
 </div>
 <div id= "tt" >
 <a href= "#" class= " Easyui-linkbutton "
 data-options=" iconcls: ' Icon-edit ', plain:true ' > Edit </a>
 <a href= ' # "class=" Easyui-linkbutton "
 data-options=" iconcls: ' Icon-help ', plain:true ' > Help </a>
 </div>

 < Script>
 $ (function () {
 $ (' #box '). Dialog ({
 width:400,
 height:200,
 title: ' Pop-up title ',
 modal:true,//
 whether to display the collapsible button
 Collapsible:false,//whether to display the
 minimized button
 Minimizable:false,
 // Whether to display the maximized button
 Maximizable:false,//
 Whether you can change the dialog window size
 resizable:false,
 //Set the dialog window top of the toolbar
 // Buttons: ' #tt ',
 toolbar: [{
  text: ' Edit ',
  iconcls: ' Icon-edit ',
  handler:function () {
  alert (' Edit ');
  },
 {}],
 //Dialog Window bottom button
 buttons: [{
  text: ' Save ',
  iconcls: ' Icon-ok ',
  Handler:function () {
  alert (' Save ');
  }
 },{}]}
 );
 </script>

Property List

Window properties are extended from window (panel), and new or redefined properties for Windows are as follows

Dialog is inherited from the window component, so both the window component and the Panel component are available

Events List

The window's events are fully inherited from Windows (panels). So, directly refer to the Window panel event.

Dialog Event
$ (' #box '). Dialog ({
 width:600,
 height:400,
 modal:true,
 onclose:function () {
 A Lert (' Off after fire! ');
 },
});

Method List

The dialog box is extended from window, and the dialog box adds the following method

Returns the External Window object
//console.log (' #box '). Window (' dialog ');
Use $.fn.window.defaults to override the default value object.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.