> Dialog對話框組件依賴于Window(窗口)組件、linkbutton 組件 # 加載方式 ## Class加載 ``` <div class="easyui-dialog" title="彈出框" data-options="iconCls:'icon-add',resizable:true,modal:true" style="width: 400px;height: 200px;"> 彈出框內容 </div> ``` ## JS調用加載 ``` <div id="box"> 彈出框內容 </div> <div id="tt"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">編輯</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">幫助</a> </div> <script> $(function () { $('#box').dialog({ width : 400, height : 200, title : '彈出框標題', modal : true, // 是否顯示可折疊按鈕 collapsible : false, // 是否顯示最小化按鈕 minimizable : false, // 是否顯示最大化按鈕 maximizable : false, // 是否可以改變對話框窗口大小 resizable : false, // 設置對話框窗口頂部工具欄 //buttons : '#tt', toolbar : [{ text : '編輯', iconCls : 'icon-edit', handler : function () { alert('edit'); }, }, {}], // 對話框窗口底部按鈕 buttons : [{ text : '保存', iconCls : 'icon-ok', handler : function () { alert('save'); } },{}] }) }); </script> ``` # 屬性列表 >窗口屬性擴展自 Window(面板)，窗口新增或重新定義的屬性如下 | 屬性名 | 值 | 說明| | --- | --- | | title | string| 對話框窗口標題文本。默認值New Dialog。| | collapsible | boolean | 定義是否顯示可折疊按鈕。默認值 false。| | minimizable | boolean| 定義是否顯示最小化按鈕。默認值 false。| | maximizable | boolean | 定義是否顯示最大化按鈕。默認值 false。| | resizable| boolean　| 定義是否可以改變對話框窗口大小。默認值 false。| | toolbar| array,selector | 設置對話框窗口頂部工具欄，可用值有：1) 一個數組，每一個工具欄中的工具屬性都和 linkbutton 相同。2) 一個選擇器指定工具欄。默認值 null。| | buttons | array,selector | 對話框窗口底部按鈕，可用值有：1) 一個數組，每一個按鈕的屬性都和linkbutton 相同。2) 一個選擇器指定按鈕欄。默認值 null。| > Dialog 是繼承自 Window 組件的，所以 Window 組件和 Panel 組件均可用 # 事件列表 > 窗口的事件完整繼承自 Window(面板)。所以，直接參考 Window 面板的事件即可。 ``` //Dialog 事件 $('#box').dialog({ width : 600, height : 400, modal : true, onClose : function () { alert('關閉后觸發！'); }, }); ``` # 方法列表 > 對話框的方法擴展自 Window(窗口)，對話框新增方法如下 | 法名 | 參數 | 說明| | --- | --- | | dialog | none | 返回外部對話框對象 | *** ``` //返回外部窗口對象 //console.log($('#box').window('dialog')); //使用$.fn.window.defaults 重寫默認值對象。 ```