jQuery EasyUI 提示框(Messager)功能很强大,但是在IE6、IE7和360-4.2浏览器中被页面中的select对象遮盖,界面很不友好。
网上有一些解决办法,我本人比较倾向用bgiframe插件。该插件目前最新稳定版本是2.1.2,官方下载地址:http://github.com/brandonaaron/bgiframe/downloads。
如果在easyui控件底层代码上解决这个问题,无疑要比在页面的每个提示框上写代码要优越很多。这样,不影响程序员已经写好的alert、confirm、progress的代码。
分析messager源代码发现alert、confirm、prompt、show、progress均使用createDialog函数创建提示窗口。所以,找到窗口对象,加上bgiframe,就一次性的将提示框被遮盖问题解决了。代码修改如下:
/**
* messager - jQuery EasyUI
*
* Licensed under the GPL:
* http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2010 stworthy [ stworthy@gmail.com ]
*
* Dependencies:
* draggable
* resizable
* linkbutton
* panel
* window
*/
(function($) {
......
function createDialog(title, content, buttons) {
var win = $('<div class="messager-body"></div>').appendTo('body');
win.append(content);
if (buttons) {
var tb = $('<div class="messager-button"></div>').appendTo(win);
for (var label in buttons) {
$('<a></a>').attr('href', 'javascript:void(0)').text(label).css(
'margin-left', 10).bind('click', eval(buttons[label]))
.appendTo(tb).linkbutton();
}
}
win.window({
title : title,
noheader : (title?false:true),
width : 300,
height : 'auto',
modal : true,
collapsible : false,
minimizable : false,
maximizable : false,
resizable : false,
onClose : function() {
setTimeout(function() {
win.window('destroy');
}, 100);
}
});
win.window('window').addClass('messager-window');
win.window('window').bgiframe();
return win;
};
......
})(jQuery);
加上上面红色字体代码就可以了。
注意:
1、easyui的版本是1.2.5
2、页面引入js时,要将jquery.bgiframe-2.1.2.js放在jquery.easyui.min.js前面。
最后要说的就是,如果使用的js代码是被混淆过的,也不用担心。因为API公布的函数名和字符串变量值是不能被混淆的。所以,搜索一些典型字符,如“messager-window”,就能找到对应的位置了。