EasyUI中Window窗口的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中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-index。 | 9000 |
| draggable | boolean | 定義窗口是否可拖拽。 | true |
| resizable | boolean | 定義窗口是否可調整尺寸。 | true |
| shadow | boolean | 如果設置為 true，當窗口能夠顯示陰影的時候將會顯示陰影。 | true |
| inline | boolean | 定義如何放置窗口，當設置為 true 時則放在它的父容器里，當設置為 false 時則浮在所有元素的頂部。 | false |
| modal | boolean | 定義窗口是不是模態（modal）窗口。 | true |
事件
該事件擴展自面板（panel）。
方法
該方法擴展自面板（panel），下面是為窗口（window）添加的方法。
| window | none | 返回外部窗口（window）對象。 |
| hcenter | none | 水平居中窗口。該方法自版本 1.3.1 起可用。 |
| vcenter | none | 垂直居中窗口。該方法自版本 1.3.1 起可用。 |
| center | none | 居中窗口。該方法自版本 1.3.1 起可用。 |
實現
<!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>?
總結
以上是生活随笔為你收集整理的EasyUI中Window窗口的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中树的基本操作
- 下一篇： EasyUI中Dialog对话框的简单使