獲取JQuery UI tabs中被選中的tabs的方法
阿新 • • 發佈:2017-09-01
script 如果 選中 tabs -h gitbook tle 1.10 修正
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的方法