第二百零三节,jQuery EasyUI,Window(窗口)组件

时间:2021-12-17 08:20:10

jQuery EasyUI,Window(窗口)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件依赖于 Panel(面 板)组件、resizable(调整大小)和 draggable(拖动)组件。这个组件扩展与 Panel 组件, 最大的优势就是调整大小和拖动以及内部布局。

一.加载方式

class 加载方式

<div id="box" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:‘icon-save‘,modal:true"> 窗口 </div>

window()让一个元素,执行窗口方法

JS 加载调用

$(function () { $(‘#box‘).window({ width: 600, height: 400, modal: true }); });

二.属性列表

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

title   string 窗口的标题文本。默认值为“New Window”。

$(function () { $(‘#box‘).window({ title:‘窗口标题‘, //窗口的标题文本。默认值为“New Window”。 }); });

collapsible   boolean 定义是否显示可折叠按钮。默认值为 true。

$(function () { $(‘#box‘).window({ title:‘窗口标题‘, //窗口的标题文本。默认值为“New Window”。 collapsible:false //定义是否显示可折叠按钮。默认值为 true。 }); });

minimizable   boolean 定义是否显示最小化按钮。默认值为 true。

$(function () { $(‘#box‘).window({ title:‘窗口标题‘, //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false //定义是否显示最小化按钮。默认值为 true。 }); });

maximizable   boolean 定义是否显示最大化按钮。默认值为 true。

$(function () { $(‘#box‘).window({ title:‘窗口标题‘, //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false, //定义是否显示最小化按钮。默认值为 true。 maximizable:false //定义是否显示最大化按钮。默认值为 true。 }); });

closable   boolean 定义是否显示关闭按钮。默认值为 true。

$(function () { $(‘#box‘).window({ title:‘窗口标题‘, //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false, //定义是否显示最小化按钮。默认值为 true。 maximizable:false, //定义是否显示最大化按钮。默认值为 true。 closable:false //定义是否显示关闭按钮。默认值为 true。 }); });

closed   boolean 定义是否可以关闭窗口。默认值为 false。

$(function () { $(‘#box‘).window({ title:‘窗口标题‘, //窗口的标题文本。默认值为“New Window”。 collapsible:false, //定义是否显示可折叠按钮。默认值为 true。 minimizable:false, //定义是否显示最小化按钮。默认值为 true。 maximizable:false, //定义是否显示最大化按钮。默认值为 true。 closable:false, //定义是否显示关闭按钮。默认值为 true。 closed:true //定义是否关闭窗口。默认值为 false。 }); });

zIndex   number 窗口 Z 轴坐标。默认值为9000。也就是外层等级,设置层级关系