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>

效果图：

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

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

posted @ 2011-09-26 23:07 libingql 阅读(6535) 评论(0) 收藏举报

刷新页面返回顶部

Libing@2019

jQueryEasyUI Window的基本使用