JQuery EasyUI(14)

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI中Dialog组件的使用方法，包括加载方式、属性、事件和方法列表。通过实例展示了如何使用JS调用创建对话框，并配置其标题、大小、工具栏和按钮等属性。

第十四章：Dialog（消息窗口）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式：

<!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调用：

<!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:'对话框',
    });
 });

二、属性列表：

窗口属性扩展自Window（面板），窗口新增或重新定义的属性如下：

Dialog属性列表
属性名	值	说明
title	string	对话框窗口标题文本。默认值New Dialog。
collapsible	boolean	定义是否显示可折叠按钮。默认值false。
minimizable	boolean	定义是否显示最小化按钮。默认值false。
maximiable	boolean	定义是否显示最大话按钮。默认值false。
resizable	boolean	定义是否可以改变对话框窗口大小。默认值false。
toolbar	array,selevtor	设置对话框窗口顶部工具栏，可用值有：1.一个数组，每一个工具栏中的工具属性都和linkbutton相同。2.一个选择器工具栏，默认值null。
buttons	array,selevtor	对话框窗口底部按钮，可用值有：1.一个数组，每一个按钮的属性都和linkbutton相同。2.一个选择器指定按钮栏。默认值null。

三、事件列表：

窗口的事件完整继承自Panel（面板）。所以，直接参考Panel面板的事件即可。

四、方法列表：

窗口的方法扩展自Dialog（对话框），窗口新增方法如下：

Widdow方法
方法名	参数	说明
dialog	none	返回外部对话框对象

使用$.fn.window.defaults重写默认值对象。

<!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'));
 });

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102929703

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载