EasyUI中Window窗口的简单使用

缺乏、安全感 2023-10-18 20:08 67阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190619221206369.gif][]

### 属性 ###

该属性扩展自面板（panel），下面是为窗口（window）重写和添加的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>string</td> 
   <td>窗口的标题文本。</td> 
   <td>New Window</td> 
  </tr> 
  <tr> 
   <td>collapsible</td> 
   <td>boolean</td> 
   <td>定义是否显示折叠按钮。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>minimizable</td> 
   <td>boolean</td> 
   <td>定义是否显示最小化按钮。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>maximizable</td> 
   <td>boolean</td> 
   <td>定义是否显示最大化按钮。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>boolean</td> 
   <td>定义是否显示关闭按钮。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>closed</td> 
   <td>boolean</td> 
   <td>定义是否关闭窗口。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>zIndex</td> 
   <td>number</td> 
   <td>从其开始增加的窗口的 z-index。</td> 
   <td>9000</td> 
  </tr> 
  <tr> 
   <td>draggable</td> 
   <td>boolean</td> 
   <td>定义窗口是否可拖拽。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>resizable</td> 
   <td>boolean</td> 
   <td>定义窗口是否可调整尺寸。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>shadow</td> 
   <td>boolean</td> 
   <td>如果设置为 true，当窗口能够显示阴影的时候将会显示阴影。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td>boolean</td> 
   <td>定义如何放置窗口，当设置为 true 时则放在它的父容器里，当设置为 false 时则浮在所有元素的顶部。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>modal</td> 
   <td>boolean</td> 
   <td>定义窗口是不是模态（modal）窗口。</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

该事件扩展自面板（panel）。

### 方法 ###

该方法扩展自面板（panel），下面是为窗口（window）添加的方法。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>window</td> 
   <td>none</td> 
   <td>返回外部窗口（window）对象。</td> 
  </tr> 
  <tr> 
   <td>hcenter</td> 
   <td>none</td> 
   <td>水平居中窗口。该方法自版本 1.3.1 起可用。</td> 
  </tr> 
  <tr> 
   <td>vcenter</td> 
   <td>none</td> 
   <td>垂直居中窗口。该方法自版本 1.3.1 起可用。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>none</td> 
   <td>居中窗口。该方法自版本 1.3.1 起可用。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <input type="button" value="open" onclick="$('#win1').window('open')">
    <input type="button" value="close" onclick="$('#win1').window('close')">
    
        <div id="win1" class="easyui-window" title="My Window" style="width:600px;height:400px"
             data-options="iconCls:'icon-save'">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',split:true" style="height:100px"></div>
                <div data-options="region:'center'">
                    The Content.
                </div>
            </div>
        </div>
    </body>
    </html>

[Image 1]: 
[20190619221206369.gif]: https://img-blog.csdnimg.cn/20190619221206369.gif