jquery easyUI window組件詳解

用勿龍潛 2014-04-19

展開全文

打開后移動位置在再打開后不居中問題解決方法很簡單了，我們在打開時設(shè)置下left和top屬性就可以了

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代碼

　　　　　　歡迎訪問http://www.

　</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)
* 調(diào)整大小(Resizable)
* 面板(panel)

下面來介紹Window的具體用法，首先來看屬性大多數(shù)的屬性和面板(panel)的屬性是相同的，下面列出一些Window私有的屬性：

屬性名類型描述默認值

zIndex	數(shù)字	窗口的 z-index 屬性，可以通過這個屬性來增加	9000
draggable	布爾	定義窗口是否可被拖動	true
resizable	布爾	定義窗口是否可以被改變大小	true
shadow	布爾	如果設(shè)置為true，窗口的陰影也將顯示。	true
modal	布爾	定義窗口是否是一個模式窗口。	true

Window也重寫了Panel里的一些屬性

屬性名類型描述默認值

title	字符串	窗口的標題文本	New Window
collapsible	布爾	定義是否顯示可折疊定義按鈕	true
minimizable	布爾	定義是否顯示最小化按鈕	true
maximizable	布爾	定義是否顯示最大化按鈕	true
closable	布爾	定義是否顯示關(guān)閉按鈕	true

事件

屬性

名字類型描述默認值

title	字符串	在面板頭部顯示的標題文本	null
iconCls	字符串	一個CSS類來顯示在面板中的16x16圖標	null
width	數(shù)字	設(shè)置面板的寬度	auto
height	數(shù)字	設(shè)置面板的高度	auto
left	數(shù)字	設(shè)置面板左側(cè)位置	null
top	數(shù)字	設(shè)置面板的頂部位置	null
cls	字符串	給面板添加一個CSS類	null
headerCls	字符串	給面板頭部添加一個CSS類	null
bodyCls	字符串	給面板主體添加一個CSS類	null
style	對象	給面板自定義樣式	{}
fit	布爾	當設(shè)置為true，面板尺寸將適合它的父容器。	false
border	布爾	定義面板的邊框	true
doSize	布爾	當設(shè)置為true，面板載創(chuàng)建的時候?qū)⒈徽{(diào)整和重新布局	true
collapsible	布爾	定義是否顯示可折疊定義按鈕	false
minimizable	布爾	定義是否顯示最小化按鈕	false
maximizable	布爾	定義是否顯示最大化按鈕	false
closable	布爾	定義是否顯示關(guān)閉按鈕	false
tools	數(shù)組	自定義工具，每個工具可以包含兩個屬性：iconCls and handler	[]
collapsed	布爾	定義在初始化的時候折疊面板	false
minimized	布爾	定義在初始化的時候最小化面板	false
maximized	布爾	定義在初始化的時候最大化面板	false
closed	布爾	定義在初始化的時候關(guān)閉面板	false
href	字符串	一個遠程的URL加載數(shù)據(jù)，然后顯示在面板中	null
loadingMessage	字符串	當加載遠程數(shù)據(jù)時，在面板中顯示的信息	Loading…

事件

名字參數(shù)描述

onLoad	none	當遠程數(shù)據(jù)加載時觸發(fā)
onBeforeOpen	none	當面板打開之前觸發(fā)
onOpen	none	當面板打開之后觸發(fā)
onBeforeClose	none	當面板關(guān)閉之前觸發(fā)
onClose	none	當面板關(guān)閉之后觸發(fā)
onBeforeDestroy	none	當面板銷毀之前觸發(fā)
onDestroy	none	當面板關(guān)閉之后觸發(fā)
onBeforeCollpase	none	當面板折疊之前觸發(fā)
onCollapse	none	當面板折疊之后觸發(fā)
onBeforeExpand	none	當面板展開之前觸發(fā)
onExpand	none	當面板展開之后觸發(fā)
onResize	width, height	當面板調(diào)整大小之后觸發(fā) width: 新的寬度 height: 新的高度
onMove	left,top	當面板移動之后觸發(fā) left: 新的左側(cè)位置 top: 新的頂部位置
onMaximize	none	當窗口最大化的時候被觸發(fā)
onRestore	none	當窗口恢復(fù)到原來的大小時被觸發(fā)
onMinimize	none	當窗口最小化的時候被觸發(fā)

方法

名字參數(shù)描述

options	none	返回設(shè)置的屬性值
panel	none	返回面板對象
header	none	返回面板頭部對象
body	none	返回面板主體對象
setTitle	title	設(shè)置面板頭部標題
open	forceOpen	當forceOpen設(shè)置為true，面板被打開的時候忽略onBeforeOpen回調(diào)函數(shù)
close	forceClose	當forceClose設(shè)置為true，面板被關(guān)閉的時候忽略onBeforeClose 回調(diào)函數(shù)
destroy	forceDestroy	當forceDestroy設(shè)置為true，面板被銷毀的時候忽略onBeforeDestroy回調(diào)函數(shù)
refresh	none	當設(shè)置了href值時，刷新面板來加載遠程數(shù)據(jù)
resize	options	設(shè)置面板的大小和布局，這些選項包含以下的屬性： width: 新面板的寬度 height: 新面板的高度 left: 新面板的左側(cè)位置 top: 新面板的頂部位置
move	options	移動面板到一個新的位置，這些選項包含以下屬性: left: 新面板的左側(cè)位置 top: 新面板的頂部位置