JQuery EasyUI(14)

Chapter XIV: Dialog (message window) components

Learning Points:

Loading

Property list

Event List

Method List

First, the loading:

1.class loading:

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div class="easyui-dialog" style="width:400px;height:250px;">
       
    </div>
 </body>
</html>

2.JS call:

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box">
       
    </div>
 </body>
</html>

$(function(){

  $('#box').dialog({
     width:400,
     height:250,
     title:'对话框',
    });
 });

Second, the list of attributes:

Extends from the window attribute Window (panel), add or redefine the window following properties:

Dialog property list
Property name	value	Explanation
title	string	Dialog window title text. The default value is New Dialog.
collapsible	boolean	Defines if to show collapsible button. The default value is false.
minimizable	boolean	Define whether the minimize button. The default value is false.
maximiable	boolean	Define whether the maximum, then the button. The default value is false.
resizable	boolean	Whether the definition can change the dialog window size. The default value is false.
toolbar	array,selevtor	Settings dialog window toolbar at the top, the available values are: 1. an array attributes of each tool in the toolbar and linkbutton are the same. 2. Select a toolbar, the default value null.
buttons	array,selevtor	Dialog window bottom button Possible values are: 1. an array, each button attributes and linkbutton same. 2. a selector to specify the button bar. The default value is null.

Third, the event list:

The complete event window inherited from Panel (Panel). Therefore, a direct reference to events Panel panel.

Fourth, the list of methods:

Methods window extends from Dialog (Dialog), the new window is as follows:

Widdow method
Method name	parameter	Explanation
dialog	none	Returning External dialog object

Use $ .fn.window.defaults override the default value of the object.

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box">
       
    </div>

    <div id="tt">
       <a href="###" class="easyui-linkbutton" data-options="iconCls:'icon-add'">编辑</a>
       <a href="###" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>
    </div>
 </body>
</html>

$(function(){

  $('#box').dialog({

     width:400,
     height:250,
     title:'对话框',
     modal:true,

     /*
     collapsable:true,
     minimizable:true,
     maximizable:true,
     resizable:true,
     */
 
     //toolbar:'tt',

     toolbar:[{
       text:'编辑',
       iconCls:'icon-edit',
       handler:function(){
         alert('edit');
       }
      },{}],
      button:[{
        text:'确定',
        plain:true,
        iconCls:'icon-ok',
     },{
        text:'取消',
        plain:true,
        iconCls:'icon-cancel',
      }],

     onClose:function(){
      alert("关闭之后触发！");
      }
    
    });

    console.log($('box').dialog('dialog'));
 });

Author: Roger_CoderLife

Link: https: //blog.csdn.net/Roger_CoderLife/article/details/102929703

According to Netease cloud classroom JQuery EasyUI video tutorials translated into a document, reproduced, please indicate the original source, welcome to reprint

Roger_CoderLife

发布了51 篇原创文章 · 获赞 79 · 访问量 8万+

私信关注