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. 第三十二篇、iOS 10开发

    1.语音识别 苹果官方在文档中新增了API   Speech,那么在以前我们处理语音识别非常的繁琐甚至很多时候可能需要借助于第三方框架处理,那么苹果推出了这个后,我们以后处理起来就非常的方便了,spe ...

  2. Git的安装以及一些操作

    1.安装Git-2.5.1-64-bit.exe  一直下一步直至完成 2.注册github账号 官网地址:https://github.com/github 3.找到一个按钮“New Reposit ...

  3. sass最佳实践

    sass 变量 可以实现统一的布局,比如统一的内边距,统一的外边距,统一的颜色,统一的字号. 嵌套 可以根据组件的嵌套方式来嵌套css代码,方便收缩,查找.代码结构非常清晰,有利于以组件的方式开发 混 ...

  4. javascrip笔记——图片加载

    var t_img; // 定时器 var isLoad = true; // 控制变量 // 判断图片加载状况,加载完成后回调 isImgLoad(function(){ // 加载完成 }); / ...

  5. 查看cpu、内存和硬盘

    查看cpu cat /proc/cpuinfo 查看内存 top free -m 按兆为单位输出内存的已用,未用,总共等结果 cat /proc/meminfo |grep MemTotal 查看硬盘 ...

  6. （UVA 11624）Fire!

    题目链接 http://vjudge.net/contest/121377#problem/J Joe works in a maze. Unfortunately, portions of the ...

  7. input内容改变触发事件，兼容IE

    <html> <head> <script type="text/javascript"> window.onload = function() ...

  8. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  9. KnockoutJS(4)-控制文本和外观绑定

    控制文本和外观绑定 依赖关系:除了Knockout核心库之外,无依赖关系. 类别 目的 Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 Text绑定 Text绑定主要是 ...

  10. C# 将Datatable作为参数，传入存储过程

    //创建一个静态方法 public static DataSet fnInsertSingleUser(DataTable v_dt, params string[] param) { try { S ...