2013-01-02 54 views
2

使用jQuery UI 1.9.2(從1.8.23升級),我在升級指南中看到這個;jQuery標籤1.9棄用「url」 - 如何設置標籤的URL?

棄用的url方法和使用title屬性;使用aria-controls屬性

(#7132)url方法已被棄用,以便即使對於遠程選項卡也不修改href屬性。 href屬性將指向實際資源,而aria-controls屬性將指向關聯的面板。這意味着title屬性將不再用於指定自定義面板ID。

我有這樣的代碼:

var $t = $("#tabs"); 
$t.tabs("url", 0, url);   
$t.bind("tabsload", function (event, ui) { 
    console.log('tabsload fired'); 
}); 
$t.tabs("load", 0); 

我無法弄清楚如何設置url值的選項卡(此代碼被觸發,當用戶點擊一個網格行和網址值重建基於網格值),因爲我不明白使用aria-controls評論的升級指南。

+0

你還在做這個嗎?我很想知道我的答案是否能解決問題。 –

回答

2

我採取的方法是設置AJAX鏈接的href,然後調用load方法重新加載內容。我知道這並不使用aria-controls屬性,但升級指南的片段指出,該屬性指向面板 - 遠程選項卡基於li元素中包含的錨點接收其內容,所以我想我應該能夠使用這種方法。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css" 
     rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#tabs').tabs(); 
      $('#change-button').click(function (event) { 
       $('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString()); 
       $('#tabs').tabs('load', 0); 
       event.preventDefault(); 
      }); 
     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="tabs"> 
     <ul> 
      <li> 
       <a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a> 
      </li> 
     </ul> 
    </div> 

    <button id="change-button">Change</button> 
    </form> 
</body> 
</html> 

我使用一個通用的HTTP處理程序(這是AJAX請求),其簡單地回聲回它被傳遞文本,例如,Handler1.ashx?echo=some text to repeat。請注意,我的選項卡只包含一個對此處理程序進行AJAX調用的選項卡。

更改URL,我處理click事件按鈕和修改ajax-linkhref這樣,然後重新裝入:

$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' 
    + new Date().toTimeString()); 
$('#tabs').tabs('load', 0); 

因此,對於這個工作,你需要提供你的聯繫希望使用ID進行更改,並且您需要知道標籤頁在哪個位置出現。

+2

+1提供了一個適當的解決方法,雖然它只是繞過api來完成之前所做的事情(本應該從未改變過)。我對jQueryUI的開發團隊非常失望。爲什麼在這個世界上他們會破壞那些簡單升級的現有網站超出我的範圍。使用aria-controls對面板進行編號,然後進行單獨的ajax調用,以使用檢索到的數據填充它\ html通過需要填充選項卡面板的2種方法,會不必要地使我的代碼複雜化。更不用說,使它對未來的維護更加困惑。他們在想什麼? –

+0

感謝您的工作,我同意理查德B,因爲我認爲它是非常短的jQuery UI團隊去除這一點,而不是提供一個有效的,簡單的例子。 – CmdrTallen