jQueryEasyUI Window的基本使用

1、基本使用

代码:

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

<head runat="server">

    <title>Window</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 () {

            $("#win").window({

                title: "窗体",

                width: 300,

                height: 200

            });

        });

    </script>

</head>

<body>

    <div id="win">

        Content

    </div>

</body>

</html>

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

<head runat="server">

    <title>Window</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="win" class="easyui-window" style="width:300px; height:200px;" title="窗体">

        Content

    </div>

</body>

</html>

效果图:

jQueryEasyUI Window的基本使用


2、Window工具栏

代码:

<script type="text/javascript">

    $(function () {

        $("#win").window({

            title: "窗体",

            width: 300,

            height: 200,

            iconCls: "icon-add",

            collapsible: true,

            minimizable: true,

            maximizable: true,

            resizable: false,

            modal: true,

            href: "Content.aspx",

            tools: [{

                iconCls: 'icon-add',

                handler: function () {

                    alert('add');

                }

            }, {

                iconCls: 'icon-remove',

                handler: function () {

                    alert('remove');

                }

            }]

        });

    });

</script>

效果图:

jQueryEasyUI Window的基本使用

3、参数

大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:

属性名

类型

描述

默认值

zIndex

数字

窗口的z-index属性,可以通过这个属性来增加

9000

draggable

布尔

定义窗口是否可被拖动

true

resizable

布尔

定义窗口是否可以被改变大小

true

shadow

布尔

如果设置为true,窗口的阴影也将显示。

true

modal

布尔

定义窗口是否是一个模式窗口。

false

Window也重写了Panel里的一些属性

属性名

类型

描述

默认值

title

字符串

窗口的标题文本

New Window

collapsible

布尔

定义是否显示可折叠定义按钮

true

minimizable

布尔

定义是否显示最小化按钮

true

maximizable

布尔

定义是否显示最大化按钮

true

closable

布尔

定义是否显示关闭按钮

true

4、事件
Window的事件和面板(panel)的事件相同
5、方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同

你可能感兴趣的:(jquery)