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。也就是外层等级,设置层级关系