转自:
开发时,客户要求在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 : "" });}