JQuery EasyUI(13)

最新推荐文章于 2022-05-10 14:26:28 发布

Roger_CoderLife

最新推荐文章于 2022-05-10 14:26:28 发布

阅读量307

点赞数

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

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

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式：

<!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="easyui-window" data-option="model:true">
      
    </div>
 </body>
</html>

2.JS调用：

<!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 id="box">
       窗口
    </div>
 </body>
</html>

$(function(){

  $('#box').window({

  });
});

二、属性列表：

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

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

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

<!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 style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc">
     <div id="box">
       窗口
     </div>
   </div>
 </body>
</html>

$(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面板的事件即可。

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

<!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 style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc">
     <div id="box">
       窗口
     </div>
   </div>
 </body>
</html>

$(function(){

  $('#box').window({

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

四、方法列表：

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

Window方法
方法名	参数	说明
Window	none	返回外部端口对象
hcenter	none	仅水平居中窗口
vcenter	none	仅垂直居中窗口
center	none	将窗口绝对居中

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

<!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 style="position:relative;overflow:hidden;width:600px;height:400px;border:1px solid #ccc">
     <div id="box">
       窗口
     </div>
   </div>
 </body>
</html>

$(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。
具体布局方法如下：

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

<!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视频教程翻译成文档，转载请注明原文出处，欢迎转载

Roger_CoderLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI(13)

第十三章：Window（窗口）组件学习要点：加载方式属性列表事件列表方法列表一、加载方式：1.class加载方式2.JS调用二、属性列表：窗口属性扩展自Panel(面板)，窗口新增或重新定义的属性如下：Window属性属性名值说明 title stri...
复制链接

扫一扫

专栏目录