jQury easyui(2)——窗口（window、dialog）

   下面簡單說明下jquery easyui中窗口（window和dialog）的使用，兩者之間用很多相同之處。

在編寫js代碼前需要引入jquery.js、jquery.easyui.js、easyui.css、icon.css包，另外為了解決中文引起的亂碼問題還需引入easyui-lang-zh_CN.js.

   javascript代碼：

$("#window").window({
     title:"this is title!!!",    //窗口標題
     width:600,
     height:300,
     collapsiable:true,           //定義窗口是否折疊
     minimizable:true,            //是否顯示最小化按鈕
     maximizable:true,            //是否顯示最大化按鈕
     closable:true,               //是否顯示關閉按鈕
     draggable:true,              //是否可以拖拽
     resiable:true,               //窗口是否可調大小
     closed:true,                 //窗口是否是關閉
     shadow:true,                 //是否有陰影
     inline:false,                //如何放置窗口，true表示放在父容器里，false放在所有元素頂部
     modal:true,                  //是否以模態形式顯示窗口
                                                                                                                                                                                                                                                  
});
//dialog中的其他屬性與window中相同，另外比window多出toolbar（dialog上面的工具欄），buttons（dialog下面）                                                            
$("#dialog").dialog({
    title:"this is dialog!",
    toolbar:[{
        iconCls:"icon-add",
        text:"新增",
        handler:function(){
                alert("add");
            }
        },{
        iconCls:"icon-edit",
        text:"編輯",
        handler:function(){
                alert("edit");
            }
    }],
    buttons:[{
        iconCls:"icon-ok",
        text:"OK"
        },{
            iconCls:"icon-cancel",
            text:"CANCEL",
            handler:function(){
               $("#dialog").dialog("close");
             }
         }]
});

html代碼：

<!-- 注：下面注釋掉的div同樣能實現，展示一個window的功能 -->
<!-- <div id="win" title="This is title"iconCls="icon-save" class="easyui-window"></div> -->
    <div id="window"></div>
    <div id="dialog" ></div>

初學juery，不當之處不可避免，歡迎指正。共同學習。