jQueryEasyUI Dialog的基本使用

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: 300,

                height: 200,

                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>

效果图:

jQueryEasyUI Dialog的基本使用

2、工具栏、按钮栏

代码:

<script type="text/javascript">

    $(function () {

        $('#dlg').dialog({

            title: '对话框',

            iconCls:"icon-edit",

            collapsible: true,

            minimizable: true,

            maximizable: true,

            resizable: true,

            width: 300,

            height: 200,

            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>

效果图:

jQueryEasyUI Dialog的基本使用


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)的相同。




你可能感兴趣的:(jquery)