2009-11-11 55 views
4

全部,JQuery UI選項卡 - 微調器背景圖像

我正在使用JQuery UI選項卡。當一個標籤被點擊時,我希望標籤顯示標籤標題以及旁邊的一個微調動畫gif。加載標籤時,應該隱藏圖像。我怎樣才能做到這一點?

感謝

回答

6

首先,我會強烈建議從http://www.ajaxload.info/產生微調GIF因爲他們有自由一些真正偉大的人。接下來,如果你看看documentation的JQuery UI選項卡,你會注意到你可以設置一個函數在不同的事件上被調用。例如,你可以使用selectload事件來顯示它(雖然我不知道如何把它的標籤內,我會離開,給你):

$('#my_tabbed_area').tabs({ 
    select: function(event, ui) { $('#my_spinner_tab_1').fadeIn() }, 
    load: function(event, ui) { $('#my_spinner_tab_1').fadeOut() } 
}); 

如果可以的話將微調器和標題放在同一個範圍內,那麼您需要用替換#my_span_tab_1或您選擇使用的任何ID。然而,這會淡化標題和微調。

0

是不是可以修改ui.tabs.min.js - >「微調」部分來保留標籤名稱幷包含背景微調圖片?

+3

這幾乎是可以的。如果您想在源代碼中進行挖掘並對其進行更改,那麼請放心,這意味着,除非您計劃將所有更改與他們的所有更改合併,否則這些更改在發佈時不能更新到最新版本。我通常會發現最好是看看你是否可以在不觸及代碼的情況下擴展他們的系統。 – 2009-11-11 19:28:46

12

添加微調選項tabs()

$("#tabs").tabs({ 
    spinner: '<img src="whatever.gif" />' 
}); 


<a></a>添加<span>&nbsp;</span>爲每個標籤。需要&nbsp;才能使微調器正常出現消失。

<li><a href="urlheretoajaxload">Text Title<span>&nbsp;</span></a></li> 
+2

幫助我與消失歡呼兄弟 – Adam 2011-01-07 13:58:29

+2

+1幫助我與消失。 – cristian 2011-02-18 13:17:33

+0

這似乎不工作,除非你正在處理標籤加載數據通過Ajax? – Jacques 2012-09-18 13:10:50