來(lái)自： http://www.cnblogs.com/szytwo/archive/2012/08/28/2659917.html
JQuery代碼
var
$win; $win
= $('#test-window'
).window({ title:
'添加課程設(shè)置信息'
, 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
>
歡迎訪問(wèn)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
>
屬性及方法說(shuō)明
Window需要依存于以下的三個(gè)組件： * 可拖放(Draggable) * 調(diào)整大小(Resizable) * 面板(panel)
下面來(lái)介紹Window的具體用法，首先來(lái)看 屬性 大多數(shù)的屬性和面板(panel)的屬性是相同的
下面列出一些Window私有的屬性：
屬性名 類型 描述 默認(rèn)值| zIndex | 數(shù)字 | 窗口的 z-index 屬性，可以通過(guò)這個(gè)屬性來(lái)增加 | 9000 |
| draggable | 布爾 | 定義窗口是否可被拖動(dòng) | true |
| resizable | 布爾 | 定義窗口是否可以被改變大小 | true |
| shadow | 布爾 | 如果設(shè)置為true，窗口的陰影也將顯示。 | true |
| modal | 布爾 | 定義窗口是否是一個(gè)模式窗口。 | true |
Window也重寫(xiě)了Panel里的一些屬性
屬性名 類型 描述 默認(rèn)值| title | 字符串 | 窗口的標(biāo)題文本 | New Window |
| collapsible | 布爾 | 定義是否顯示可折疊定義按鈕 | true |
| minimizable | 布爾 | 定義是否顯示最小化按鈕 | true |
| maximizable | 布爾 | 定義是否顯示最大化按鈕 | true |
| closable | 布爾 | 定義是否顯示關(guān)閉按鈕 | true |
屬性
名字 類型 描述 默認(rèn)值| title | 字符串 | 在面板頭部顯示的標(biāo)題文本 | null |
| iconCls | 字符串 | 一個(gè)CSS類來(lái)顯示在面板中的16x16圖標(biāo) | null |
| width | 數(shù)字 | 設(shè)置面板的寬度 | auto |
| height | 數(shù)字 | 設(shè)置面板的高度 | auto |
| left | 數(shù)字 | 設(shè)置面板左側(cè)位置 | null |
| top | 數(shù)字 | 設(shè)置面板的頂部位置 | null |
| cls | 字符串 | 給面板添加一個(gè)CSS類 | null |
| headerCls | 字符串 | 給面板頭部添加一個(gè)CSS類 | null |
| bodyCls | 字符串 | 給面板主體添加一個(gè)CSS類 | null |
| style | 對(duì)象 | 給面板自定義樣式 | {} |
| fit | 布爾 | 當(dāng)設(shè)置為true，面板尺寸將適合它的父容器。 | false |
| border | 布爾 | 定義面板的邊框 | true |
| doSize | 布爾 | 當(dāng)設(shè)置為true，面板載創(chuàng)建的時(shí)候?qū)⒈徽{(diào)整和重新布局 | true |
| collapsible | 布爾 | 定義是否顯示可折疊定義按鈕 | false |
| minimizable | 布爾 | 定義是否顯示最小化按鈕 | false |
| maximizable | 布爾 | 定義是否顯示最大化按鈕 | false |
| closable | 布爾 | 定義是否顯示關(guān)閉按鈕 | false |
| tools | 數(shù)組 | 自定義工具，每個(gè)工具可以包含兩個(gè)屬性：iconCls and handler | [] |
| collapsed | 布爾 | 定義在初始化的時(shí)候折疊面板 | false |
| minimized | 布爾 | 定義在初始化的時(shí)候最小化面板 | false |
| maximized | 布爾 | 定義在初始化的時(shí)候最大化面板 | false |
| closed | 布爾 | 定義在初始化的時(shí)候關(guān)閉面板 | false |
| href | 字符串 | 一個(gè)遠(yuǎn)程的URL加載數(shù)據(jù)，然后顯示在面板中 | null |
| loadingMessage | 字符串 | 當(dāng)加載遠(yuǎn)程數(shù)據(jù)時(shí)，在面板中顯示的信息 | Loading… |
事件
名字 參數(shù) 描述| onLoad | none | 當(dāng)遠(yuǎn)程數(shù)據(jù)加載時(shí)觸發(fā) |
| onBeforeOpen | none | 當(dāng)面板打開(kāi)之前觸發(fā) |
| onOpen | none | 當(dāng)面板打開(kāi)之后觸發(fā) |
| onBeforeClose | none | 當(dāng)面板關(guān)閉之前觸發(fā) |
| onClose | none | 當(dāng)面板關(guān)閉之后觸發(fā) |
| onBeforeDestroy | none | 當(dāng)面板銷毀之前觸發(fā) |
| onDestroy | none | 當(dāng)面板關(guān)閉之后觸發(fā) |
| onBeforeCollpase | none | 當(dāng)面板折疊之前觸發(fā) |
| onCollapse | none | 當(dāng)面板折疊之后觸發(fā) |
| onBeforeExpand | none | 當(dāng)面板展開(kāi)之前觸發(fā) |
| onExpand | none | 當(dāng)面板展開(kāi)之后觸發(fā) |
| onResize | width, height | 當(dāng)面板調(diào)整大小之后觸發(fā) width: 新的寬度 height: 新的高度 |
| onMove | left,top | 當(dāng)面板移動(dòng)之后觸發(fā) left: 新的左側(cè)位置 top: 新的頂部位置 |
| onMaximize | none | 當(dāng)窗口最大化的時(shí)候被觸發(fā) |
| onRestore | none | 當(dāng)窗口恢復(fù)到原來(lái)的大小時(shí)被觸發(fā) |
| onMinimize | none | 當(dāng)窗口最小化的時(shí)候被觸發(fā) |
方法
名字 參數(shù) 描述| options | none | 返回設(shè)置的屬性值 |
| panel | none | 返回面板對(duì)象 |
| header | none | 返回面板頭部對(duì)象 |
| body | none | 返回面板主體對(duì)象 |
| setTitle | title | 設(shè)置面板頭部標(biāo)題 |
| open | forceOpen | 當(dāng)forceOpen設(shè)置為true，面板被打開(kāi)的時(shí)候忽略onBeforeOpen回調(diào)函數(shù) |
| close | forceClose | 當(dāng)forceClose設(shè)置為true，面板被關(guān)閉的時(shí)候忽略onBeforeClose 回調(diào)函數(shù) |
| destroy | forceDestroy | 當(dāng)forceDestroy設(shè)置為true，面板被銷毀的時(shí)候忽略onBeforeDestroy回調(diào)函數(shù) |
| refresh | none | 當(dāng)設(shè)置了href值時(shí)，刷新面板來(lái)加載遠(yuǎn)程數(shù)據(jù) |
| resize | options | 設(shè)置面板的大小和布局，這些選項(xiàng)包含以下的屬性： width: 新面板的寬度 height: 新面板的高度 left: 新面板的左側(cè)位置 top: 新面板的頂部位置 |
| move | options | 移動(dòng)面板到一個(gè)新的位置，這些選項(xiàng)包含以下屬性: left: 新面板的左側(cè)位置 top: 新面板的頂部位置 |
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
