JQuery1.2.6 ui.dialog控件在IE6下标题栏显示不正常的问题解决
由于项目中用到了jquery1.2.6版的dialog控件，可以较好地解决一些用户选择、单位选择的问题，也比较美观，但后来发现在IE6下显示有点不正常，截图请参见最后，经过查看源代码发现只要将css里的ui-dialog-titlebar类的position属性有relative该为absolute，然后再修改ui.dialog.js，在空间初始化及改变大小和拖动dialog时进行一点调整就可以在IE6下面正常显示，具体操作步骤如下：
1、 从jquery-ui-themeroller.css里提取.ui-dialog-titlebar类,另外再创建两个css文件，一个是给IE6加载的，另一个给其他的浏览器加载，IE6的内容如下：
.ui-dialog-titlebar {
/*resets*/margin: 0 0 0 20; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
padding: .5em 1.5em .5em 1em;
color: #444444;
background: #e0e0e0 url(images/e0e0e0_40x100_textures_02_glass_80.png) 0 50% repeat-x;
border-bottom: 1px solid #cccccc;
font-size: 1em;
font-weight: normal;
position: absolute;/*relative;*/
}
另一个内容如下：
.ui-dialog-titlebar {
/*resets*/margin: 0 0 0 20; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
padding: .5em 1.5em .5em 1em;
color: #444444;
background: #e0e0e0 url(images/e0e0e0_40x100_textures_02_glass_80.png) 0 50% repeat-x;
border-bottom: 1px solid #cccccc;
font-size: 1em;
font-weight: normal;
position: relative;
}
两者的区别只有position的不同。
2、 在页面加上如下内容：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link rel="Stylesheet" href="Style/jquery-ui-themeroller.css" type="text/css" />
<asp:PlaceHolder id="pl" runat="server" />
<script src="Common/Scripts/jquery-1.2.6.js"></script>
<script src="Common/Scripts/ui.core.js"></script>
<script src="Common/Scripts/ui.draggable.js"></script>
<script src="Common/Scripts/ui.resizable.js"></script>
<script src="Common/Scripts/ui.dialog.js"></script>
<style>body{font-size:12px;}</style>
</head>
ID为pl 的PlaceHolder是为了在后台程序里根据浏览器的不同render不同的css，如果是IE6，则将IE6对应得css文件render处来，代码如下：
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl c = new HtmlGenericControl("span");
if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion == 6)
c.InnerHtml = @"<link rel=""Stylesheet"" href=""Style/jquery-ui-dialog-ie6.css"" type=""text/css"" />";
else
c.InnerHtml = @"<link rel=""Stylesheet"" href=""Style/jquery-ui-dialog-other.css"" type=""text/css"" />";
pl.Controls.Add(c);
}
3、 修改ui.dialog.js
在ui.dialog.js的
$.widget("ui.dialog", {
与
init: function() {
var self = this,
options = this.options,
resizeHandles = typeof options.resizable == 'string'
? options.resizable
: 'n,e,s,w,se,sw,ne,nw',.......
之间加上如下函数：
fixIE6DialogDisplayBug: function(objThis) {
////////////////////////////////////////////////////////////////////////
//此段代码修正在IE6下拉大对话框时显示异常的问题
if ($.browser.msie) {
//获取IE版本
var browserVersion = parseFloat($.browser.version);
if (browserVersion <= 6.0) {
//debugger;
//标题栏宽度不够，往右边加一点
objThis.uiDialogTitlebar[0].style.width = objThis.uiDialog[0].offsetWidth - 35;
//关闭按钮往左移动一点，看起来更美观
objThis.uiDialogTitlebarClose[0].style.marginRight = '11px';
//设置内容的marginTop，使其上部有一点间隙
objThis.element[0].firstChild.style.marginTop = '50px';
} else {
//IE7及更高版本
}
}
////////////////////////////////////////////////////////////////////////
},
然后在draggable部分调用
if ($.fn.draggable) {
uiDialog.draggable({
........
},
drag: function(e, ui) {
........ /////////////////////////////////////////////////////////////
//此段代码修正在IE6下拉大对话框时显示已常的问题/////////////////////////////////////////////////////////////
self.fixIE6DialogDisplayBug(self);
},
stop: function(e, ui) {
........
}
});
以及在resizeable部分调用
if ($.fn.resizable) {
uiDialog.resizable({
........
start: function() {
........
},
resize: function(e, ui) {
........
/////////////////////////////////////////////////////////////
//此段代码修正在IE6下拉大对话框时显示已常的问题
/////////////////////////////////////////////////////////////
self.fixIE6DialogDisplayBug(self);
},
handles: resizeHandles,
stop: function(e, ui) {
........
}
});
........
}
以及在init函数的最后调用：
init: function() {
var self = this,
........
/////////////////////////////////////////////////////////////
//此段代码修正在IE6下拉大对话框时显示已常的问题
/////////////////////////////////////////////////////////////
this.fixIE6DialogDisplayBug(this);
},
........
修正之前的截图（IE6）
下面的截图是修正之后的截图(IE6)
FireFox的截图
