jquery easyui window 不居中有關問題解決方案 (注意紅色字型部分)
主要注意紅色字型部分,如若設定後位置有所偏移,請注意調整設定紅色字型部分的高寬。
jquery easyui window 開啟後移動位置在開啟後不居中問題解決
開啟後移動位置在開啟後不居中問題解決方法就很簡單了,我們在開啟時設定下left和top屬性就可以了
var $win;
$win = $('#test-window').window({
title:'新增課程設定資訊',
width: 820,
height: 450,
top:($(window).height() - 420) * 0.5,
left:($(window).width() - 450) * 0.5,
shadow: true,
modal:true,
iconCls:'icon-add',
closed:true,
minimizable:false,
maximizable:false,
collapsible:false
});
$win.window('open');
HTML程式碼
<div id="test-window" class="easyui-window" title="Login" style="width:300px;height:180px;">
<div>
歡迎訪問http://www.my400800.cn
</div>
<div style="padding:5px;text-align:center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>
<a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
</div>
</div>
屬性及方法說明
Window需要依存於以下的三個元件:
* 可拖放(Draggable)
* 調整大小(Resizable)
* 面板(panel)
下面來介紹Window的具體用法,首先來看屬性大多數的屬性和麵板(panel)的屬性是相同的,下面列出一些Window私有的屬性:
屬性名型別描述預設值zIndex | 數字 | 視窗的 z-index 屬性,可以通過這個屬性來增加 | 9000 |
draggable | 布林 | 定義視窗是否可被拖動 | true |
resizable | 布林 | 定義視窗是否可以被改變大小 | true |
shadow | 布林 | 如果設定為true,視窗的陰影也將顯示。 | true |
modal | 布林 | 定義視窗是否是一個模式視窗。 | true |
Window也重寫了Panel裡的一些屬性
屬性名型別描述預設值title | 字串 | 視窗的標題文字 | New Window |
collapsible | 布林 | 定義是否顯示可摺疊定義按鈕 | true |
minimizable | 布林 | 定義是否顯示最小化按鈕 | true |
maximizable | 布林 | 定義是否顯示最大化按鈕 | true |
closable | 布林 | 定義是否顯示關閉按鈕 | true |
事件
屬性
名字型別描述預設值title | 字串 | 在面板頭部顯示的標題文字 | null |
iconCls | 字串 | 一個CSS類來顯示在面板中的16x16圖示 | null |
width | 數字 | 設定面板的寬度 | auto |
height | 數字 | 設定面板的高度 | auto |
left | 數字 | 設定面板左側位置 | null |
top | 數字 | 設定面板的頂部位置 | null |
cls | 字串 | 給面板新增一個CSS類 | null |
headerCls | 字串 | 給面板頭部新增一個CSS類 | null |
bodyCls | 字串 | 給面板主體新增一個CSS類 | null |
style | 物件 | 給面板自定義樣式 | {} |
fit | 布林 | 當設定為true,面板尺寸將適合它的父容器。 | false |
border | 布林 | 定義面板的邊框 | true |
doSize | 布林 | 當設定為true,面板載建立的時候將被調整和重新佈局 | true |
collapsible | 布林 | 定義是否顯示可摺疊定義按鈕 | false |
minimizable | 布林 | 定義是否顯示最小化按鈕 | false |
maximizable | 布林 | 定義是否顯示最大化按鈕 | false |
closable | 布林 | 定義是否顯示關閉按鈕 | false |
tools | 陣列 | 自定義工具,每個工具可以包含兩個屬性:iconCls and handler | [] |
collapsed | 布林 | 定義在初始化的時候摺疊面板 | false |
minimized | 布林 | 定義在初始化的時候最小化面板 | false |
maximized | 布林 | 定義在初始化的時候最大化面板 | false |
closed | 布林 | 定義在初始化的時候關閉面板 | false |
href | 字串 | 一個遠端的URL載入資料,然後顯示在面板中 | null |
loadingMessage | 字串 | 當載入遠端資料時,在面板中顯示的資訊 | Loading… |
事件
名字引數描述onLoad | none | 當遠端資料載入時觸發 |
onBeforeOpen | none | 當面板開啟之前觸發 |
onOpen | none | 當面板開啟之後觸發 |
onBeforeClose | none | 當面板關閉之前觸發 |
onClose | none | 當面板關閉之後觸發 |
onBeforeDestroy | none | 當面板銷燬之前觸發 |
onDestroy | none | 當面板關閉之後觸發 |
onBeforeCollpase | none | 當面板摺疊之前觸發 |
onCollapse | none | 當面板摺疊之後觸發 |
onBeforeExpand | none | 當面板展開之前觸發 |
onExpand | none | 當面板展開之後觸發 |
onResize | width, height | 當面板調整大小之後觸發 width: 新的寬度 height: 新的高度 |
onMove | left,top | 當面板移動之後觸發 left: 新的左側位置 top: 新的頂部位置 |
onMaximize | none | 當視窗最大化的時候被觸發 |
onRestore | none | 當視窗恢復到原來的大小時被觸發 |
onMinimize | none | 當視窗最小化的時候被觸發 |
方法
名字引數描述options | none | 返回設定的屬性值 |
panel | none | 返回面板物件 |
header | none | 返回面板頭部物件 |
body | none | 返回面板主體物件 |
setTitle | title | 設定面板頭部標題 |
open | forceOpen | 當forceOpen設定為true,面板被開啟的時候忽略onBeforeOpen回撥函式 |
close | forceClose | 當forceClose設定為true,面板被關閉的時候忽略onBeforeClose 回撥函式 |
destroy | forceDestroy | 當forceDestroy設定為true,面板被銷燬的時候忽略onBeforeDestroy回撥函式 |
refresh | none | 當設定了href值時,重新整理面板來載入遠端資料 |
resize | options | 設定面板的大小和佈局,這些選項包含以下的屬性: width: 新面板的寬度 height: 新面板的高度 left: 新面板的左側位置 top: 新面板的頂部位置 |
move | options | 移動面板到一個新的位置,這些選項包含以下屬性: left: 新面板的左側位置 top: 新面板的頂部位置 |