快捷導(dǎo)航

fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問(wèn)題

更新時(shí)間：2010年10月01日 17:48:47 作者：

JQuery的彈出窗口插件也很多了，例如Lightbox…這個(gè)我們介紹比較優(yōu)秀的Plugin – Fancybox。

主要特色有：

顯示HTML,swf,Iframe,ajax請(qǐng)求
支持鼠標(biāo)滾動(dòng)顯示圖片
支持陰影，放大效果
自定義CSS與增加導(dǎo)航按鈕
官方有提供比較詳細(xì)的API，與及How to Use .這里我們不介如何使用了，您可以參看官方網(wǎng)站。下面我們看一段示例代碼：

復(fù)制代碼代碼如下:

 
var selectedid = $("select[name$=DdlSearchProfile]").val(); 
var selectedtxt = $("select[name$=DdlSearchProfile] :selected'").text(); 
$("#editsp").fancybox({ 
ajax: { 
type: "POST", 
data: "selectedid=" + selectedid + "&selectedtxt=" + selectedtxt, 
cache: false 
}, 
autoDimensions: false, 
width: 300, 
height: 125, 
scrolling: 'no', 
//onStart: OnStartCheck, 
onComplete: OnshowtxtForEdit, 
titleShow: false, 
enableKeyboardNavigation: false 
}); 

這里我們使用它的以ajax方式去load一個(gè)page.并傳值。我們可以Server端取到相應(yīng)的Data，如上面的Id,text. OnComplete是一個(gè)CallBack，熟悉JQuery應(yīng)該知道。它提供了好幾個(gè)CallBack，您可以對(duì)應(yīng)具體的場(chǎng)景調(diào)用。

我們接下面主要是解決一個(gè)在IE中Close按鈕圖片顯示不出的問(wèn)題。我們看到它的CSS使用的了AlphaImageLoader Filter，關(guān)于如何使用這個(gè)Filter你可以參考這篇POST

一種方法是使用絕對(duì)Path,如：
1: AlphaImageLoader(src='http://yourdomain.com/js/fancybox/ fancy_loading.png' ..

另一種方法是使用Javascript，打開(kāi)jquery.fancybox-1.3.1.css，提到#fancybox-loading.fancybox-ie div 處替換成以下代碼:

.fancybox-ie #fancybox-close { background: transparent; behavior: expression(this.runtimeStyle.filter?'':this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ (function(){var t=document.getElementsByTagName('link');for(var i=0;i<t.length;i++){var h=t[i].href.split('?')[0];if(h&&/polaroid_gallery\\.css$/.test(h)){return h.replace('polaroid_gallery.css','');}} return '';})() +"Scripts/fancybox/fancy_close.png',sizingMethod='scale')"); }
看上去有點(diǎn)兒funy, 在css使用Javascript.

然后就可以了，這里我們使用的是IE 8.0.7600.16385。fancybox 1.31 的版本。最好的解決方案是實(shí)現(xiàn)自定義的樣式，也不會(huì)有這樣的問(wèn)題。后面我們發(fā)面這個(gè)網(wǎng)站也在使用fancybox?？梢詤⒖?

http://www.microsoft.com/express/windows/

希望這篇POST對(duì)您開(kāi)發(fā)有幫助。

您可能感興趣的文章: