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. 关于 angular 小心得

    心得1: //控制器里面的代码会晚一些执行 setTimeout(function(){ //获取对象的scope var ele = document.querySelector('[ng-cont ...

  2. Java 对于继承的初级理解

    概念:继承,是指一个类的定义可以基于另外一个已存在的类,即子类继承父类,从而实现父类的代码的重用.两个类的关系:父类一般具有各个子类共性的特征,而子类可以增加一些更具个性的方法.类的继承具有传递性,即 ...

  3. [原创] linux课堂-学习笔记-目录及概况

    本学习笔记基于:网易云课堂-linux课堂 课时1Centos 6.4安装讲解46:14 课时2Centos 6.4桌面环境介绍与网络连接04:30 课时3 Linux目录结构介绍及内核与shell分 ...

  4. [Linux]学习笔记（4）-su及passwd的用法介绍

    (1)su su命令用于将当前的用户切换到一个指定的用户.语法为: su - user_name 如果用户利用telnet方式远程登录,是不能直接以root账户登录的,也就是说在使用telnet登录服 ...

  5. C# 学习之旅（2）--- 意外的收获

    今天在完成老师布置的C#作业(计算一元二次方程的根)的时候,收获到意外的知识,所以写此博文予以记录. 意外收获为: 对文本框的输入值进行检测,使之按照要求格式输入. 下面是整个的源代码: using ...

  6. Python问题之奇怪诡异的Bug

    最近又重新装上了windows 7感觉还是那样,主要是想用M8SDK写些程序.也想在windows上玩玩,一直都觉得用C写一些常用的东东很复杂,只有借助于解释性语言了,在python, ruby间选择 ...

  7. WPF简单入门总结

    WPF简单总结 最近看了点关于WPF的东西,总结了点点入门的东西. XAML语法基础 1.  定义样式 <Window.Resources><!--窗体资源的定义--> < ...

  8. The Best Rank (25)（排名算法）

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  9. 十四、mysql 分区之 HASH && KEY

    .hash分区 PS::个人觉得HASH分区很好很强大,简单确分布极其均匀 创建实例: CREATE TABLE HASH_EMP ( tid int, tname ) ) PARTITION ; 将 ...

  10. EXTJS 4.2 资料 控件之Grid 那些事

    最近在学习Extjs4.2 ,积累文章,看得不错,再此留年: //表格数据最起码有列.数据.转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = ...