JQuery1.2.6 ui.dialog控件在IE6下标题栏显示不正常的问题解决
由于項目中用到了jquery1.2.6版的dialog控件，可以較好地解決一些用戶選擇、單位選擇的問題，也比較美觀，但后來發(fā)現(xiàn)在IE6下顯示有點不正常，截圖請參見最后，經(jīng)過查看源代碼發(fā)現(xiàn)只要將css里的ui-dialog-titlebar類的position屬性有relative該為absolute，然后再修改ui.dialog.js，在空間初始化及改變大小和拖動dialog時進(jìn)行一點調(diào)整就可以在IE6下面正常顯示，具體操作步驟如下：
1、 從jquery-ui-themeroller.css里提取.ui-dialog-titlebar類,另外再創(chuàng)建兩個css文件，一個是給IE6加載的，另一個給其他的瀏覽器加載，IE6的內(nèi)容如下：
.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;*/
}
另一個內(nèi)容如下：
.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;
}
兩者的區(qū)別只有position的不同。
2、 在頁面加上如下內(nèi)容：
<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是為了在后臺程序里根據(jù)瀏覽器的不同render不同的css，如果是IE6，則將IE6對應(yīng)得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',.......
之間加上如下函數(shù)：
fixIE6DialogDisplayBug: function(objThis) {
//此段代碼修正在IE6下拉大對話框時顯示異常的問題
if ($.browser.msie) {
//獲取IE版本
var browserVersion = parseFloat($.browser.version);
if (browserVersion <= 6.0) {
//debugger;
//標(biāo)題欄寬度不夠，往右邊加一點
objThis.uiDialogTitlebar[0].style.width = objThis.uiDialog[0].offsetWidth - 35;
//關(guān)閉按鈕往左移動一點，看起來更美觀
objThis.uiDialogTitlebarClose[0].style.marginRight = '11px';
//設(shè)置內(nèi)容的marginTop，使其上部有一點間隙
objThis.element[0].firstChild.style.marginTop = '50px';
} else {
//IE7及更高版本
}
}
},
然后在draggable部分調(diào)用
if ($.fn.draggable) {
uiDialog.draggable({
........
},
drag: function(e, ui) {
........ /
//此段代碼修正在IE6下拉大對話框時顯示已常的問題/
self.fixIE6DialogDisplayBug(self);
},
stop: function(e, ui) {
........
}
});
以及在resizeable部分調(diào)用
if ($.fn.resizable) {
uiDialog.resizable({
........
start: function() {
........
},
resize: function(e, ui) {
........
/
//此段代碼修正在IE6下拉大對話框時顯示已常的問題
/
self.fixIE6DialogDisplayBug(self);
},
handles: resizeHandles,
stop: function(e, ui) {
........
}
});
........
}
以及在init函數(shù)的最后調(diào)用：
init: function() {
var self = this,
........
/
//此段代碼修正在IE6下拉大對話框時顯示已常的問題
/
this.fixIE6DialogDisplayBug(this);
},
........
修正之前的截圖（IE6）
下面的截圖是修正之后的截圖(IE6)
FireFox的截圖
轉(zhuǎn)載于:https://www.cnblogs.com/yuanxiaoping_21cn_com/archive/2009/03/16/1413108.html
總結(jié)
以上是生活随笔為你收集整理的JQuery1.2.6 ui.dialog控件在IE6下标题栏显示不正常的问题解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 男人一生要做的九件事情
- 下一篇： 堆排序可运行完整C语言，Java语言，p