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

转自：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 : ""

    });

}