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. OC6_目录及文件的创建

    // // main.m // OC6_目录及文件的创建 // // Created by zhangxueming on 15/6/19. // Copyright (c) 2015年 zhangx ...

  2. Smarty控制foreach输出数量

    最近在搞ecshop,ecshop用的是smarty.在首页中想要修改展示的商品数量,但是用的是foreach,让我无从下手,在网上找了好久终于找到解决方案. <!--{foreach name ...

  3. VS 2013的初配置

    首先,安装vs2013,安装过程比较简单,也已有教程,在此不赘述.只想说一下,vs2013需要占C盘比较大的空间:所有功能都安装,且装在C盘的话,约需要9G左右,即使安装在其他盘,也需要占C盘6G左右 ...

  4. windbg基本命令

    1, .reload k 当前调用堆栈.u 当前正在执行的代码. 2, ~ 查看被调试进程中的线程信息每一行是一个线程的信息.第一行中,0 表示这个进程的编号:1ff4.1038 是 16 进制数字, ...

  5. Unity编程回忆录之控制物体移动

    最新心血来潮,然后开始学习Unity3D游戏开发引擎,对于一个主流的跨平台3D游戏开发引擎,我已经深深的为他着迷了,于是果断的开始学习这个引擎,而且刚刚预装的游戏引擎最新版中4.3版本已经开始原生支持 ...

  6. Linux的网卡由eth0变成了eth1，如何修复 (转载)

    Linux的网卡由eth0变成了eth1,如何修复   使用wmware安装了linux,安装成功后,使用的网卡是eth0,没有eth1.但是用过一段时间后,不知道为什么eth0无法使用,系统却自动生 ...

  7. Linux C 程序 指针和字符串函数(11)

    指向字符串的指针 C语言访问字符串很多方法:1.用字符数组存放一个字符串 char string[] = "Linux C"; printf("%s\n".st ...

  8. IOS系统框架

    IOS系统框架:ios架构号MAC OS的基础框架相似:ios扮演底层硬件和应用程序的中介,底层为所有应用程序提供基础服务,高层则包含一些复杂巧妙的技术和服务,并且创建的应用程序不能直接访问硬件. C ...

  9. table 中实现 控制 指定列的 左对齐 右对齐方式

    .listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...

  10. 跨域解决方案CORS使用方法

    CORS(Cross-Origin Resource Sharing), 目前CORS还处于w3c的草案,它定义了跨域访问时服务器和客户端之间如何通信.他的原理是通过定义HTTP头部的信息,来让客户端 ...