2010-10-02 38 views
0

是否有任何官方的jQuery插件(如jQuery UI),允許在所有瀏覽器中的這些效果?或者至少IE8,Chome,FF和Opera。我不希望用戶插件,因爲他們長期缺乏支持,彼此不兼容或缺乏一致的質量和優化。jQuery官方插件文本和框投影,圓角和漸變

我在jQuery UI演示頁面看到了一些「覆蓋和陰影類」,但是我找不到任何文檔。我認爲那些經常需要的功能必須以某種方式包含在jQuery中?

我會喜歡任何幫助!提前致謝!

+0

嗯,我真的懷疑它,因爲IE8不支持CSS3陰影... – 2010-10-02 22:11:02

+0

那麼,就是這一點,IE8不支持陰影。我也沒有提到其他任何效果。但它們可以用不同的方式進行模擬。包括jQuery。 – 2010-10-02 22:32:33

回答

2

有沒有「官方」的方式來做到這一點,但有一個實用的方式(這與jQuery無關)。對於一些網站,我已經完全在CSS中處理了這個問題,結合使用了「真正的」規則,特定於瀏覽器的版本,然後是CSS3 PIE htc文件(用於IE)。舉個例子:

div.roundbox { 
    border-radius: 8px;   // Official. Maybe someday. 
    -webkit-border-radius: 8px; // Webkit browsers 
    -moz-border-radius: 8px;  // Firefox 
    behavior: url(PIE.htc);  // IE 
} 

CSS3 PIE的工作非常好,似乎比IE7.js系列解決方案的表現要好得多。基本上,您將同樣的behavior行放入任何使用border-radius,box-shadow等的CSS規則中。該腳本負責處理其餘部分,並且對非IE瀏覽器無效,該瀏覽器將通過其中一個前三個指令。

你也可以裝配所有的餡餅值得對象的列表,並一次性申報的行爲(常規規則後):

div.shadowbox, div.roundbox, p.somethingelse { behavior: url(PIE.htc); } 

當然是有足夠的空間,大約智慧辯論這種方法 - 但它在很多情況下工作得很好。

+0

哇! +1。感謝您分享這一點! – 2010-10-02 23:09:59

+0

PIE.htc本質上是另外一個外部的JavaScript庫,並且處於測試階段。我的網站非常複雜且非標準化,這正是我想要避免的那種解決方案。我甚至不使用-webkit和-moz擴展名,因爲它們有時候會出現奇怪的不相容情況。但感謝分享,無論如何,它看起來不錯! – 2010-10-02 23:40:57

+0

確實有很多爭議的空間。如果您使用jQuery,那麼您已經在使用第三方庫來幫助平滑瀏覽器差異。像圓角和盒子陰影這樣的東西已經讓你陷入了從瀏覽器到瀏覽器奇怪不一致的境地。在這些效果出現之前,瀏覽器沒有什麼神奇的解決方案。無論你考慮pie.htc還是其他一些方法,spackle都是泥石流。如果它運行良好 - 即使在複雜用戶界面的大型應用程序中 - 也是如此,那麼它與任何其他選項一樣值得考慮。完美可以是善的敵人。 – 2010-10-03 02:41:26