$.messager.show扩展：指定位置显示

谁践踏了优雅 2022-04-10 09:43 146阅读 0赞

转自：[http://easyui.btboys.com/post-69.html][http_easyui.btboys.com_post-69.html]

开发时，客户要求在datagrid工具栏加个“帮助”按钮，对数据进行描述。不想用window、dialog、alert等方式，就选用了$.messager.show。但是$.messager.show只默认右下角显示，于是扩展了个$.messager.showBySite，根据舍得的位置显示$.messager.show。代码如下：

/**
     * 指定位置显示$.messager.show
     * options $.messager.show的options
     * param = {left,top,right,bottom}
     */
    $.extend($.messager, {
        showBySite : function(options,param) {
            var site = $.extend( {
                left : "",
                top : "",
                right : 0,
                bottom : -document.body.scrollTop
                        - document.documentElement.scrollTop
            }, param || {});
            var win = $("body > div .messager-body");
            if(win.length<=0)
                $.messager.show(options);
            win = $("body > div .messager-body");
            win.window("window").css( {
                left : site.left,
                top : site.top,
                right : site.right,
                zIndex : $.fn.window.defaults.zIndex++,
                bottom : site.bottom
            });
        }
    });

使用示例：

function showBySite(event){
        var element = document.elementFromPoint(event.x,event.y);//获取点击对象
        $.messager.showBySite({
            title:'My Title',
            msg:'Message.',
            showType:'show'
        },{
            top : $(element).position().top+$(element).height(),//将$.messager.show的top设置为点击对象之下
            left : $(element).position().left,//将$.messager.show的left设置为与点击对象对齐
            bottom : ""
        });
    }

[http_easyui.btboys.com_post-69.html]: http://easyui.btboys.com/post-69.html