jquery easyui dialog的使用

今天工作中有一個需求需要點擊某個鏈接彈出一個層並顯示詳細信息，覺得應用中應該會經常用到，就記下來了。

需求是這樣的：點擊“詳情”鏈接以彈出層的形式查看詳細信息

 

這里我使用 jQuery easyUI 的dialog實現。步驟如下：

 1. 引入所需的js和css 

 <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Themes/custom/easyui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />

2. js代碼

$('<div id="_lostwin"/>').dialog({
                href: 'Pages/Lost/LostRegisterDetail.html',
                width: 1470,
                height:700,
                modal: true,
                draggable: true,
                title: '失物登記詳情',
                onClose: function () {//彈出層關閉事件
                    $(this).dialog('destroy');
                },
                onLoad: function () {//彈出層加載事件
                    _initLostRegisterDetail(id);
                }
})

3. 效果是這樣的

4. 效果是出來了，可是又遇到另一個問題，彈出層太大難免會拖來拖去拖出父容器，這樣就無法關閉了。所以去網上搜了下解決這個問題。需要自己寫一個js文件並引入就OK啦。js代碼如下：

var easyuiPanelOnMove = function (left, top) {
    var parentObj = $(this).panel('panel').parent();
    if (left < 0) {
        $(this).window('move', {
            left: 1
        });
    }
    if (top < 0) {
        $(this).window('move', {
            top: 1
        });
    }
    var width = $(this).panel('options').width;
    var height = $(this).panel('options').height;
    var right = left + width;
    var buttom = top + height;
    var parentWidth = parentObj.width();
    var parentHeight = parentObj.height();
    if (parentObj.css("overflow") == "hidden") {
        if (left > parentWidth - width) {
            $(this).window('move', {
                "left": parentWidth - width
            });
        }
        if (top > parentHeight - height) {
            $(this).window('move', {
                "top": parentHeight - height
            });
        }
    }
};
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

5. 這樣用戶就不能將彈出層拖出父容器了，也不用擔心無法關閉了。（也可以在彈出層上增加一個關閉按鈕）

6. 完成