來自: http://www.cnblogs.com/szytwo/archive/2012/08/28/2659917.html
JQuery代碼
var
$win; $win
= $('#test-window'
).window({ title:
'添加課程設置信息'
, width:
820
, height:
450
, top: ($(window).height()
- 820) * 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: 新面板的頂部位置 |
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
