Custom Window Tools

http://www.jeasyui.net/demo/420.html

Custom Window Tools - jQuery EasyUI Demo

Custom Window Tools

Click the right top buttons to perform actions.

οnclick="$(’#w’).window(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick="$(’#w’).window(‘close’)">Close

<div id=“w” class=“easyui-window” title=“Custom Window Tools” data-

options=“iconCls:‘icon-save’,minimizable:false,tools:’#tt’”

style=“width:500px;height:200px;padding:10px;”>
The window content.

<a href=“javascript:void(0)” class=“icon-add” οnclick="javascript:alert

(‘add’)">
<a href=“javascript:void(0)” class=“icon-edit” οnclick="javascript:alert

(‘edit’)">
<a href=“javascript:void(0)” class=“icon-cut” οnclick="javascript:alert

(‘cut’)">
<a href=“javascript:void(0)” class=“icon-help” οnclick="javascript:alert

(‘help’)">

========

Window Layout

http://www.jeasyui.net/demo/586.html

Window Layout - jQuery EasyUI Demo

Window Layout

Using layout on window.

οnclick="$(’#w’).window(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick="$(’#w’).window(‘close’)">Close

<div id=“w” class=“easyui-window” title=“Window Layout” data-

options=“iconCls:‘icon-save’” style=“width:500px;height:200px;padding:5px;”>

<div data-options=“region:‘east’,split:true”

style=“width:100px”>

jQuery EasyUI framework help you build your web page

easily.

<div data-options=“region:‘south’,border:false” style="text-

align:right;padding:5px 0 0;">
<a class=“easyui-linkbutton” data-options="iconCls:'icon-

ok’" href=“javascript:void(0)” οnclick=“javascript:alert(‘ok’)” style=“width:80px”>Ok
<a class=“easyui-linkbutton” data-options="iconCls:'icon-

cancel’" href=“javascript:void(0)” οnclick=“javascript:alert(‘cancel’)”

style=“width:80px”>Cancel

========

Modal Window

http://www.jeasyui.net/demo/585.html

Modal Window - jQuery EasyUI Demo

Modal Window

Click the open button below to open the modal window.

οnclick="$(’#w’).window(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton”

οnclick="$(’#w’).window(‘close’)">Close

<div id=“w” class=“easyui-window” title=“Modal Window” data-

options=“modal:true,closed:true,iconCls:‘icon-save’”

style=“width:500px;height:200px;padding:10px;”>
The window content.

========

EasyUI Window 窗口

http://www.jeasyui.net/plugins/180.html

擴展自 $.fn.panel.defaults。通過 $.fn.window.defaults 重寫默認的 defaults。

窗口（window）是一個浮動的、可拖拽的面板，可以當做應用程序窗口使用。默認情況下，窗口可移動

、可調整尺寸、可關閉。它的內容既可以通過靜態 html 定義，也可以通過 ajax 動態加載。

依賴
draggable
resizable
panel

用法
創建窗口（window）
1、從標記創建窗口（window）。

Window Content

2、使用 javascript 創建窗口（window）。

$('#win').window({ width:600, height:400, modal:true });

3、通過復合布局創建窗口（window）。

像往常一樣，你可以定義窗口布局。下面的實例演示了如何分割窗口區域為兩個部分：北區和中心區。

The Content.

窗口（window）動作
打開和關閉窗口（window）。

$(’#win’).window(‘open’); // open a window
$(’#win’).window(‘close’); // close a window

通過 ajax 加載窗口內容。

$(’#win’).window(‘refresh’, ‘get_content.php’);

屬性
該屬性擴展自面板（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 起可用。

========

Easy-Ui中window窗口介紹

https://blog.csdn.net/sinat_28729797/article/details/50458622

1、繼承panel面板，故具有panel一切屬性

2、基本寫法：

窗口

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

效果：

3、需注意屬性

draggable:false
不可以拖動
resizable:false,
可變大小
shadow:false
有陰影

4、添圖標

代碼：

效果：

5、事件，如關閉后觸發

$(function(){
$(’#box’).window({
width:600,
height:400,
modal:true,
zIndex:1000,
draggable:false,
resizable:false,
shadow:false,
modal:true,
iconCls:‘icon-add’,
onClose:function(){
alert(‘關閉后觸發！’);
}
})
});

效果：

6、事件移動，繼承panel

$(document).click(function(){
$(’#box’).window(‘move’,{
left:0,
top:0,
})
});

========

easyui window點擊關閉按鈕，觸發事件

https://blog.csdn.net/p793049488/article/details/8237143

使用easyui-window初始化一個窗口，由于窗口上方的按鈕都是自動組裝生成。故很難找到監聽事件源（

平常做監聽，都必須找到事件源）。但是easyui提供了一系列的監聽方法：onClose,onBeforeColse…

的方法。

如有窗口：<div id=“win” class=“easyui-window” title=“新增互動類型” closed=“true”

style=“width:300px;height:220px;padding:5px;”>

點擊關閉的x后觸發事件監聽：

$(document).ready(function(){

$(’#win’).window({
onBeforeClose:function(){
alert(111);
}
});

});

========

window 限制在父類窗體內

https://www.cnblogs.com/timelesszhuang/p/3685912.html

Inline Window - jQuery EasyUI Demo

Inline Window

The inline window stay inside its parent.

(‘open’)">Open
<a href=“javascript:void(0)” class=“easyui-linkbutton” οnclick="$(’#w’).window

(‘close’)">Close

<div class="easyui-panel"

style=“position:relative;width:500px;height:300px;overflow:auto;”>
<div id=“w” class=“easyui-window” data-options=“title:‘Inline Window’,inline:true”

style=“width:250px;height:150px;padding:10px”>
This window stay inside its parent

========

總結

以上是生活随笔為你收集整理的EasyUI Window学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。