六、easyUI中的window（窗口）组件

怀梦

于 2023-05-18 11:07:06 发布

阅读量834

点赞数

分类专栏： easyUI快速入门文章标签： easyui javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44230693/article/details/130742783

版权

easyUI快速入门专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.window（窗口）组件的概述

窗口控件是一个浮动和可拖拽的面板，它可以用作应用程序窗口。默认情况下，窗口可以移动，调整大小和关闭。它的内容也可以被定义为静态HTML或要么通过Ajax动态加载

在这里插入图片描述

2.window（窗口）组件的使用

第一种方式，通过标签来创建一个窗口。在项目建一个06-window.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
         data-options="iconCls:'icon-save',modal:true">
        Window Content
    </div>
</body>
</html>

如下图所示的运行效果：

在这里插入图片描述

第二种方式，即通过编写Javascript代码来创建一个窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="win"></div>

    <script type="text/javascript">
        $(function() {
            $('#win').window({
                width:600,
                height:400,
                modal:true,
                //加上了closed:true，默认就把这个窗口隐藏起来，于是就不会显示了
                //closed:true
            });
        });
    </script>
</body>
</html>

可能会用到如下列表所示的窗口属性

属性名	属性值类型	描述	默认值
title	string	窗口的标题文本	New Window
collapsible	boolean	定义是否显示可折叠按钮	true
minimizable	boolean	定义是否显示最小化按钮	true
maximizable	boolean	定义是否显示最大化按钮	true
closable	boolean	定义是否显示关闭按钮	true
closed	boolean	定义是否可以关闭窗口	false
zlndex	boolean	窗口Z轴坐标	9000
draggable	boolean	定义是否能够拖拽窗口	true
resizable	boolean	定义是否能够改变窗口大小	true
shadow	boolean	如果设置为true，在窗体显示的时候显示阴影	true
inline	boolean	定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面	false
modal	boolean	定义是否将窗体显示为模式化窗口	true