1、基本使用

代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Dialog</title>

    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />

    <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>

    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('#dlg').dialog({

                title: '对话框',

                iconCls: "icon-edit",

                collapsible: true,

                minimizable: true,

                maximizable: true,

                resizable: true,

                width: ,

                height: ,

                modal: true

            });

        });

    </script>

</head>

<body>

    <div id="dlg">

        Content

    </div>

</body>

</html>

或

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Dialog</title>

    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />

    <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>

    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>

</head>

<body>

    <div id="dlg" class="easyui-dialog" style="width:300px; height:200px;" title="对话框" iconCls="icon-edit">

        Content

    </div>

</body>

</html>

效果图：

2、工具栏、按钮栏

代码：

<script type="text/javascript">

    $(function () {

        $('#dlg').dialog({

            title: '对话框',

            iconCls:"icon-edit",

            collapsible: true,

            minimizable: true,

            maximizable: true,

            resizable: true,

            width: ,

            height: ,

            modal: true,

            href: "Content.aspx",

            onClose: function () {

                alert("Close");

            },

            toolbar: [{

                text: 'Add',

                iconCls: 'icon-add',

                handler: function () {

                    alert('add');

                }

            }, '-', {

                text: 'Save',

                iconCls: 'icon-save',

                handler: function () {

                    alert('save');

                }

            }],

            buttons: [{

                text: 'Ok',

                iconCls: 'icon-ok',

                handler: function () {

                    alert('ok');

                }

            }, {

                text: 'Cancel',

                iconCls: 'icon-cancel',

                handler: function () {

                    $('#dlg').dialog('close');

                }

            }]

        });

    });

</script>

效果图：

3、参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

New Dialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条，每个工具条包括:

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

对话框底部的按钮，每个按钮包括:

text,

iconCls,

handler

etc.

null

4、事件

Dialog的事件和窗口(Window)的事件相同。

5、方法

Dialog的函数方法和窗口(Window)的相同。

EASYUI Dialog的基本使用的更多相关文章

  1. Easyui dialog中嵌入iframe

    如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...

  2. jquery.util.easyui.dialog

    (function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...

  3. easyui dialog 中嵌入html页面

    最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...

  4. easyui dialog 中 panel-body 高度太小出现 滚动条 的原因

    easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...

  5. Easyui dialog Y轴滚动条定位

    使用Easyui dialog进行数据新增的时候,如果Y轴方向有滚动条,当关闭之前的时候,将滚动条拉到最下方,再次打开的时候,滚动条还是定位在最下方. 需求: 每次打开的时候dialog Y轴滚动条定 ...

  6. 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框

    EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...

  7. easyui.dialog.js

    (function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...

  8. jquery easyui dialog Bug解决方案

    最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: <input type="button" ...

  9. easyUI dialog打开对话框，显示列表数据，选取一条数据操作后赋值给父窗口 resultMap声明为全局，生成getset方法

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...

随机推荐

  1. PHP学习笔记--入门篇

    PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...

  2. (转)linux下jvm 参数调优

    1.基本概念. JAVA_MEM_OPTS=" -server -Xmx2g -Xms2g -Xmn512m -XX:PermSize=128m -Xss256k -XX:+DisableE ...

  3. 移动Web单行文字垂直居中的问题

    单行文字垂直居中的方式你可能可以脱口而出,height和line-height设置为同样就行了,或者设置相同的padding-top和padding-bottom值. 上图是Chrome浏览器下的效果 ...

  4. memset与NULL区别

    memset与NULL区别 NULL与0 的区别 为什么强调一个malloc对应一个free 在一个结构体malloc,然后free,但是她的成员变量的malloc并没有free,还需要特别的free ...

  5. The C in C++

    1 unnamed arguments in the argument list of the function definition (Page 114) In c++, an argument m ...

  6. 多进程之间的互斥信号量实现(Linux和windows跨平台)

    多线程之间实现互斥操作方式很多种,临界区(Critical Section),互斥量(Mutex),信号量(Semaphore),事件(Event)等方式 其中临界区,互斥量,信号量算是严格意义的实现 ...

  7. [java学习笔记]java语言核心----面向对象之构造函数

    1.构造函数概念 特点: 函数名与类名相同 不用定义返回值类型 没有具体的返回值 作用:                给对象进行初始化 注意: 默认构造函数 多个构造函数是以重载出现的 一个类中如果 ...

  8. vi 技巧

    :%s/^/\//   行首加 / :%s/$/\//    行尾加/ :%s/^\///g   行首减 / :%s/\/$//g   行尾减/ :%s/^\s*//g  行首减 空格   

  9. CentOS 安装jdk1.7 64位

    [root@localhost ~]# java -versionjava version "1.6.0"OpenJDK Runtime Environment (build 1. ...

  10. 从 Typecho 自定义字段的调用代码看去

    千呼万唤,Typecho 的"自定义字段"功能终于在 0.9 中出来了.然而,多数人还蒙在这样一个鼓里--该怎么在模板调用已经设置好的自定义字段呢?让我们从这里开始说下去: Typ ...