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. 完成