jQueryEasyUI Window的基本使用

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 59 阅读

文章标签：

#xhtml #javascript #ViewUI

本文将介绍如何使用jQuery EasyUI实现基本的窗体操作，包括创建窗体、添加工具栏、设置参数以及触发事件。涵盖了窗体的基本使用、工具栏配置、参数设定和事件响应等方面。

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>

效果图：

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>

效果图：

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