JQuery EasyUI(14)-蒲公英云

第十四章：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'));
 });