JQuery EasyUI(13)

﹏ヽ暗。殇╰゛Y 2023-05-29 11:56 2阅读 0赞

##                            第十三章：Window（窗口）组件 ##

### 学习要点： ###

> 1.  加载方式
> 2.  属性列表
> 3.  事件列表
> 4.  方法列表

--------------------

### 一、加载方式： ###

1.class加载方式：

2.JS调用：

$(function(){
    
      $('#box').window({
    
      });
    });

### 二、属性列表：  ###

窗口属性扩展自Panel(面板)，窗口新增或重新定义的属性如下：

<table> 
 <thead> 
  <tr> 
   <th colspan="3" style="text-align:center;">Window属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">属性名</td> 
   <td style="text-align:center;">值</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">title</td> 
   <td style="text-align:center;">string</td> 
   <td style="text-align:center;">窗口的标题文本。默认值为"New Window"。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">collapsible</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否显示可折叠按钮。默认值为：true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">minimizable</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否显示最小化按钮。默认值为：true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">maximizable</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否显示最大化按钮。默认值为：true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">closable</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否显示关闭按钮。默认值为：true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">closed</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否可以关闭窗口。默认值为：false。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">zIndex</td> 
   <td style="text-align:center;">number</td> 
   <td style="text-align:center;">窗口Z轴坐标。默认值为9000。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">draggable</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否能够拖拽窗口。默认值为true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">resizable</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否能够改变窗口大小，默认值为true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">shadow</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">如果设置为true，在窗体显示的时候显示阴影。默认值为：true。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">inline</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义如何布局窗口，如果设置为true，窗口将显示在他的父容器中，否则将显示在所有元素的上面。默认值为false。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">modal</td> 
   <td style="text-align:center;">boolean</td> 
   <td style="text-align:center;">定义是否将窗口显示为模式化窗口。默认值为true。</td> 
  </tr> 
 </tbody> 
</table>

ps:以上属性是Window自行扩展或者代替Panel的属性，本身Window就是依赖于Panel的。所以，上面没有涉及到的属性，请查看Panel的属性即可。例如：

$(function(){
    
      $('#box').window({
    
          width:500,
          height:400,
    
          //iconCls:'icon-add',
          //fit:true,
    
          /*
          width:500,
          height:400,
          title:'窗口',
          collapsible:false,
          minimizable:false,
          maxinizable:false,
          closable:false,
          closed:true,
          zIndex:9999,
          darggable:false,
          resizable:false,
          shadow:false,
          modal:true,
          inline:true,
    
         
          width:200,
          height:150,
          inline:true,
         */
         
      });
    });

## ##

### 三、事件列表： ###

窗口的事件完整继承自Panel（面板）。所以，直接参考Panel面板的事件即可。

<table> 
 <thead> 
  <tr> 
   <th colspan="3" style="text-align:center;">Window事件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">事件名</td> 
   <td style="text-align:center;">传参</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeLoad</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在加载远程数据之前触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onLoad</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在加载远程数据时触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeOpen</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在打开面板之前触发，返回false可以打开操作。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onOpen</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在打开面板之后触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeClose&nbsp;</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在关闭面板之前触发，返回false可以取消关闭操作。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onClose</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">&nbsp;在面板关闭之后触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onbeforeDestroy</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在面板销毁之前触发，返回false可以取消销毁操作。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onDestroy</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在面板销毁之后触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeCollapse</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在面板折叠之前触发，返回false可以终止折叠操作。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onCollapse</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在面板折叠之后触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onBeforeExpand</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在面板展开之前触发，返回false可以终止展开操作。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onExpand</td> 
   <td style="text-align:center;">none&nbsp;</td> 
   <td style="text-align:center;">在面板展开之后触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onResize</td> 
   <td style="text-align:center;">width,height</td> 
   <td style="text-align:center;">在面板改变大小之后触发，width：新的宽度，height：新的高度</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onMove</td> 
   <td style="text-align:center;">left，top&nbsp;</td> 
   <td style="text-align:center;">在面板移动之后触发。left：新的左边距位置，top：新的上边距位置</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onMaximize</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在窗口最大化之后触发。</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onRestore</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在窗口恢复到原始大小以后触发</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">onMinimize</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">在窗口最小化之后触发。</td> 
  </tr> 
 </tbody> 
</table>

$(function(){
    
      $('#box').window({
    
          width:500,
          height:400,
          fit:true,
         
         onClose:function(){
          alert("关闭之后触发！");
          }     
      });
    });

### 四、方法列表： ###

窗口的方法扩展自Panel（面板），窗口新增方法如下：

<table> 
 <thead> 
  <tr> 
   <th colspan="3" style="text-align:center;">Window方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">方法名</td> 
   <td style="text-align:center;">参数</td> 
   <td style="text-align:center;">说明</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">Window</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">返回外部端口对象</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">hcenter</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">仅水平居中窗口</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">vcenter</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">仅垂直居中窗口</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">center</td> 
   <td style="text-align:center;">none</td> 
   <td style="text-align:center;">将窗口绝对居中</td> 
  </tr> 
 </tbody> 
</table>

使用$.fn.widow.defaults重写默认值对象

$(function(){
    
      $('#box').window({
    
          width:500,
          height:400,    
      });
    
       //console.log($('#box').window('window'));    
       //console.log($('#box').window('body'));
    
       $(decument).click(fucntion(){
           $('#box').window(move,{
              left:0,
              top:0,
         });
      });
    
       $(decument).dblclick(fucntion(){
           $('#box').window('center');
           //$('#box').window('hcenter');
           //$('#box').window('vcenter');
      });
    
    });

**Window组件最强大的地方就是内部布局和添加linkbutton。**  
具体布局方法如下：

> 1.  外部用window组件包裹一下。
> 2.  内部用layout组件左右各分配一个，底部分配一个。
> 3.  底部添加一个按钮即可。

<!DOCTYPE html>
    <html>
      <head>
        <title>JQuery Easy UI</title>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
        <script type="text/javascript" src="js/index.js"></script> 
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
    </head>
      <body>
        <div class="easy-window" style="width:400px;height:250px;">
           <div class="easyui-layout" data-options="fit:true;">
              <div data-options="region:'west',split:true," style="width:100px;">左边</div>
              <div data-options="region:'center'">内容</div>
              <div data-option="region:'south',border:false" style="width:40px;text-align:right;padding:5px 5px 0 0">下边</div>
                 <a class="easyui-linkbutton" data-options="iconCls='icon-ok'" style="width:80px">确认</a>
                 <a class="easyui-linkbutton" data-options="iconCls='icon-cancel'" style="width:80px;">取消</a>
           </div>
        </div>
     </body>
    </html>

作者：Roger\_CoderLife

链接：https://blog.csdn.net/Roger\_CoderLife/article/details/102928944

本文根据[网易云课堂JQuery EasyUI视频教程][JQuery EasyUI]翻译成文档，转载请注明原文出处，欢迎转载

[JQuery EasyUI]: https://study.163.com/course/courseMain.htm?courseId=943002