2010-06-03 74 views
0

我使用qTip jQuery插件qTip plugin的一個網站,我根據另一個線程我在這裏提出工作:stack overflow threadqTip jQuery插件並不總是射擊

我的問題是,我有一個導航欄沿運行我的屏幕上方基本上是根據你所在的標籤菜單設置標題屬性,這些都存儲在一個JavaScript數組中。

例如,我具有沿屏幕的頂部運行三個菜單選項,菜單說A,B菜單項和菜單C.

我也有位於所述導航欄的最右邊的位置的信息圖像,我根據導航欄中選擇的菜單選項設置標題屬性。

例如:

Menu A => myRole[0] = "Admin" 
Menu B => myRole[1] = "Manager" 
Menu C => myRole[2] = "Guest" 

所以基本上如在每個中的導航欄的菜單的用戶點擊,我設定的信息圖像中的title屬性不是「管理員」,「管理器」或「客人」。

在啓動時,qTip插件作品並顯示「聯繫」,當我在它懸停,但是當我改變菜單,菜單C,它仍顯示「管理」,而不是「客戶」

從外觀上來看它似乎沒有調用qTip插件,我已將它定位在屏幕的頁腳處(請參見下面的實際代碼)。

任何想法如何確保qTip每次點擊/更改javascript數組中的菜單選項和拾取值時觸發?

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> 



<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $('div#infoi img[title]').qtip({ 
     position: { 
     adjust: { x:-110, y:0 }, 
     corner: { 
      target: 'bottomLeft', 
      tooltip: 'topMiddle' 
     } 
     }, 
     style: { 
     width: 250, 
     padding: 5, 
     background: '#E7F1FA', 
     color: 'black', 
     textAlign: 'center', 
     border: { 
      width: 3, 
      color: '#65a9d7' 
     }, 
     tip: 'topRight' 
     } 
    }); 
}); 
</script> 

謝謝。

+0

是'$('div#infoi img [title]')'一個錯字? – 2010-06-03 06:10:38

+0

不幸的不是。使用「infoi」是正確的。 – tonyf 2010-06-03 11:10:33

回答

0

如果您的菜單在頁面上存在,然後您稍後添加其他元素或稍後替換元素,則需要重新初始化該元素的工具提示。

正如您所提到的那樣,您只是根據選擇更改側面部件的文本。您需要更改這兩個標題,然後重新初始化qtip功能,所以我建議你把所有的代碼在一個函數像

var qtipset = function(){ 
     $('div#infoi img[title]').qtip({ 
     position: { 
     adjust: { x:-110, y:0 }, 
     corner: { 
      target: 'bottomLeft', 
      tooltip: 'topMiddle' 
     } 
     }, 
     style: { 
     width: 250, 
     padding: 5, 
     background: '#E7F1FA', 
     color: 'black', 
     textAlign: 'center', 
     border: { 
      width: 3, 
      color: '#65a9d7' 
     }, 
     tip: 'topRight' 
     } 
    }); 
    }

在JavaScript中,你只是改變了之後更新與選擇的菜單文字圖片的標題圖片上的標題屬性也會調用此函數,如qtipset(); 然後,將重新讀取標題並初始化頁面上的qtip元素,以便下次您將鼠標懸停時,它將能夠使用正確的數據調用qtip函數。