擷取JQuery UI tabs中被選中的tabs的方法

標籤：需要   try   標籤   nbsp   get   背景   api   開發人員   支援   

JQuery標籤事件處理執行個體

如果你正在使用JQuery tabs而且想從基本的功能擴充到自訂的功能，這是你最好知道如何處理JQuery的點擊事件。

 

在這篇文章中：

　　1.回顧如何添加當tab被點擊時的事件處理

 

背景：

　　需要瞭解的是，JQuery在不斷修正的，很多有用的資訊只針對於某一特定的老版本，JQuery已經不在支援。

　　在這種情況下，JQuery-ui對標籤頁的事件監聽的支援從1.9.x的show命令切換到JQuery-UI 1.10.x的activate命令。

 

處理一個Tab的點擊事件在JQuery-UI 1.10.x和JQuery UI 1.9.x

　　這是一個用於JQuery-UI 1.10.x的啟用tab響應的程式碼片段在這個頁面，將會執行你自己寫的代碼，當第二個tab被點擊。

<script type="text/javascript" > $(function () { $(‘#tabs‘).tabs({ activate: function (event, ui) { var $activeTab = $(‘#tabs‘).tabs(‘option‘, ‘active‘); if ($activeTab == 1) { // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED } } });}); </script>

這是早期版本的JQuery-UI使用show命令。

<script type="text/javascript" > $(function () { $(‘#tabs‘).tabs({ show: function (event, ui) { var $activeTab = $(‘#tabs‘).tabs(‘option‘, ‘active‘); if ($activeTab == 1) { // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED } } });}); </script>

從上面的代碼可以看出，JQuery的編寫者可以僅僅將show改變成activate由於文法的原因。作為一個開發人員，需要記住，如果一部分的JQuery的代碼不起作用，最好在猜測是否有bug前，檢查一下語言棄用協助。

 

 

參考資料：

1.JQuery – Example of Tabs Event Handling

2. JQuery中文文檔

擷取JQuery UI tabs中被選中的tabs的方法