jQuery - bẫy tab chọn sự kiện

Question

Tôi là một jQuery noob và tôi đang cố gắng tìm ra cách bẫy sự kiện đã chọn tab. Sử dụng jQuery 1.2.3 và các tab giao diện người dùng jQuery tương ứng (không phải lựa chọn của tôi và tôi không có quyền kiểm soát nó). Đó là tab lồng nhau với các thẻ div cấp đầu tiên. Đây là cách tôi đã khởi tạo các tab

$(function() { 
     $('#tabs ul').tabs(); 
}); 

$(document).ready(function(){ 
    $('#tabs ul').tabs('select', 0); 
}); 

Tôi không thể tìm ra cách bẫy bất kỳ sự kiện hoặc thuộc tính nào (tab được chọn, khi nhấp vào tab, v.v.). Sẽ đánh giá cao bất kỳ giúp đỡ về vấn đề này ...

tôi đã cố gắng những thứ như:

$('#tabs ul').bind('tabsselect', function(event, ui) { 
    selectedTab = ui.index; 
    alert('selectedTab : ' + selectedTab); 
}); 

       (OR) 

$('#tabs').bind('tabsselect', function(event, ui) { 

không thành công.

Dưới đây là đánh dấu

<div id="tabs"> 
<UL> 
    <LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI> 
    <LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI> 
    <LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI> 
    <LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI> 
</UL> 

<DIV id=fragment-1> 
<UL> 
    <LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI> 
    <LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI> 
    <LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI> 
</UL> 
</DIV> 
. 
. 
. 

</DIV> 

Answer 1

Phương pháp đúng để chụp sự kiện lựa chọn tab là để thiết lập một chức năng làm giá trị cho các tùy chọn select khi khởi tạo các tab (bạn cũng có thể thiết lập chúng tự động sau đó), như vậy:

$('#tabs, #fragment-1').tabs({ 
    select: function(event, ui){ 
    // Do stuff here 
    } 
}); 

Bạn có thể xem mã thực tế trong hành động ở đây: http://jsfiddle.net/mZLDk/

---

Chỉnh sửa: Với liên kết bạn đã cung cấp cho tôi, tôi đã tạo môi trường thử nghiệm cho jQuery 1.2.3 với jQuery UI 1.5 (Tôi nghĩ vậy?). Một số điều rõ ràng là thay đổi từ đó. Không có đối tượng riêng biệt ui được tách biệt với đối tượng event gốc. Mã trông giống như sau:

// Tab initialization 
$('#container ul').tabs({ 
    select: function(event) { 
     // You need Firebug or the developer tools on your browser open to see these 
     console.log(event); 
     // This will get you the index of the tab you selected 
     console.log(event.options.selected); 
     // And this will get you it's name 
     console.log(event.tab.text); 
    } 
}); 

Phew. Nếu có bất cứ điều gì để tìm hiểu ở đây, đó là hỗ trợ mã di sản là khó khăn. Xem jsfiddle để biết thêm chi tiết: http://jsfiddle.net/qCfnL/1/

Answer 2

Từ những gì tôi có thể biết, theo tài liệu tại đây: http://jqueryui.com/demos/tabs/#event-select, có vẻ như bạn không khởi tạo đúng. Bản demo trình bày rằng bạn cần phần tử <div> bọc chính, với phần tử <ul> hoặc có thể <ol> đại diện cho các tab và sau đó là một phần tử cho mỗi trang tab (có thể là <div> hoặc <p>, có thể là <section> nếu chúng tôi đang sử dụng HTML5). Sau đó, bạn gọi các tab $().() Trên chính <div>, không phải là phần tử <ul>.

Sau đó, bạn có thể liên kết với sự kiện tabsselect không thành vấn đề. Kiểm tra fiddle này cho cơ bản, ví dụ cơ bản:

http://jsfiddle.net/KE96S/

Answer 3

có vẻ như phiên bản cũ của của jquery ui không hỗ trợ chọn sự kiện nữa.

Mã này sẽ làm việc với các phiên bản mới:

$('.selector').tabs({ 
        activate: function(event ,ui){ 
         //console.log(event); 
         console.log(ui.newTab.index()); 
        } 
}); 

Answer 4

bài này cho thấy một tài liệu HTML hoàn chỉnh như một ví dụ về kích hoạt mã để chạy khi một tab được nhấp. Phương thức .on() bây giờ là cách mà jQuery gợi ý rằng bạn xử lý các sự kiện.

jQuery development history

Để làm một cái gì đó xảy ra khi người dùng nhấp vào một tab có thể được thực hiện bằng cách đưa ra các yếu tố danh sách một id.

<li id="list"> 

Sau đó, tham chiếu đến id.

$("#list").on("click", function() { 
alert("Tab Clicked!"); 
}); 

Đảm bảo rằng bạn đang sử dụng phiên bản hiện tại của api jQuery. Tham khảo api jQuery từ Google, bạn có thể nhận được các liên kết ở đây:

https://developers.google.com/speed/libraries/devguide#jquery

Đây là một bản sao hoạt động hoàn toàn của một trang web theo thẻ kích hoạt một cảnh báo khi tab ngang 1 được nhấp.

<!-- This HTML doc is modified from an example by: --> 
<!-- http://keith-wood.name/uiTabs.html#tabs-nested --> 

<head> 
<meta charset="utf-8"> 
<title>TabDemo</title> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css"> 

<style> 
pre { 
clear: none; 
} 
div.showCode { 
margin-left: 8em; 
} 
.tabs { 
margin-top: 0.5em; 
} 
.ui-tabs { 
padding: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #F5F3E5; 
border-width: 1px; 
} 
.ui-tabs .ui-tabs-nav { 
padding-left: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50% #ECE8DA; 
border: 1px solid #D4CCB0; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
} 
.ui-tabs-nav .ui-state-active { 
border-color: #D4CCB0; 
} 
.ui-tabs .ui-tabs-panel { 
background: transparent; 
border-width: 0px; 
} 
.ui-tabs-panel p { 
margin-top: 0em; 
} 
#minImage { 
margin-left: 6.5em; 
} 
#minImage img { 
padding: 2px; 
border: 2px solid #448844; 
vertical-align: bottom; 
} 

#tabs-nested > .ui-tabs-panel { 
padding: 0em; 
} 
#tabs-nested-left { 
position: relative; 
padding-left: 6.5em; 
} 
#tabs-nested-left .ui-tabs-nav { 
position: absolute; 
left: 0.25em; 
top: 0.25em; 
bottom: 0.25em; 
width: 6em; 
padding: 0.2em 0 0.2em 0.2em; 
} 
#tabs-nested-left .ui-tabs-nav li { 
right: 1px; 
width: 100%; 
border-right: none; 
border-bottom-width: 1px !important; 
-moz-border-radius: 4px 0px 0px 4px; 
-webkit-border-radius: 4px 0px 0px 4px; 
border-radius: 4px 0px 0px 4px; 
overflow: hidden; 
} 
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected, 
#tabs-nested-left .ui-tabs-nav li.ui-state-active { 
border-right: 1px solid transparent; 
} 
#tabs-nested-left .ui-tabs-nav li a { 
float: right; 
width: 100%; 
text-align: right; 
} 
#tabs-nested-left > div { 
height: 10em; 
overflow: auto; 
} 
</pre> 

</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 

<script> 
    $(function() { 
    $('article.tabs').tabs(); 
    }); 
</script> 

</head> 
<body> 
<header role="banner"> 
    <h1>jQuery UI Tabs Styling</h1> 
</header> 

<section> 

<article id="tabs-nested" class="tabs"> 
<script> 
    $(document).ready(function(){ 
    $("#ForClick").on("click", function() { 
     alert("Tab Clicked!"); 
    }); 
    }); 
</script> 
<ul> 
    <li id="ForClick"><a href="#tabs-nested-1">First</a></li> 
    <li><a href="#tabs-nested-2">Second</a></li> 
    <li><a href="#tabs-nested-3">Third</a></li> 
</ul> 
<div id="tabs-nested-1"> 
    <article id="tabs-nested-left" class="tabs"> 
     <ul> 
      <li><a href="#tabs-nested-left-1">First</a></li> 
      <li><a href="#tabs-nested-left-2">Second</a></li> 
      <li><a href="#tabs-nested-left-3">Third</a></li> 
     </ul> 
     <div id="tabs-nested-left-1"> 
      <p>Nested tabs, horizontal then vertical.</p> 


<form action="/sign" method="post"> 
    <div><textarea name="content" rows="5" cols="100"></textarea></div> 
    <div><input type="submit" value="Sign Guestbook"></div> 
</form> 
     </div> 
     <div id="tabs-nested-left-2"> 
      <p>Nested Left Two</p> 
     </div> 
     <div id="tabs-nested-left-3"> 
      <p>Nested Left Three</p> 
     </div> 
    </article> 
</div> 
<div id="tabs-nested-2"> 
    <p>Tab Two Main</p> 
</div> 
<div id="tabs-nested-3"> 
    <p>Tab Three Main</p> 
</div> 
</article> 

</section> 

</body> 
</html> 

Answer 5

Trong các phiên bản sau của JQuery, chúng đã thay đổi chức năng từ chọn để kích hoạt. http://api.jqueryui.com/tabs/#event-activate

Answer 6

Đơn giản chỉ cần:

$("#tabs_div").tabs(); 
$("#tabs_div").on("click", "a.tab_a", function(){ 
    console.log("selected tab id: " + $(this).attr("href")); 
    console.log("selected tab name: " + $(this).find("span").text()); 
}); 

Nhưng bạn phải thêm tên lớp để neo của bạn có tên là "tab_a":

<div id="tabs"> 
<UL> 
    <LI><A class="tab_a" href="#fragment-1"><SPAN>Tab1</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-2"><SPAN>Tab2</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-3"><SPAN>Tab3</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-4"><SPAN>Tab4</SPAN></A></LI> 
</UL> 

<DIV id=fragment-1> 
<UL> 
    <LI><A class="tab_a" href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI> 
</UL> 
</DIV> 
. 
. 
</DIV> 

Answer 7

Đơn giản chỉ cần sử dụng về sự kiện nhấp chuột cho tab được hiển thị.

$(document).on('shown.bs.tab', 'a[href="#tab"]', function(){ 
});