jQuery - событие выбора вкладки «Ловушка» - PullRequest
Новая
       8

jQuery - событие выбора вкладки «Ловушка»

32 голосов
/ 04 сентября 2010

Я нуб JQuery и пытаюсь выяснить, как перехватить событие с выбранной вкладкой. Использование jQuery 1.2.3 и соответствующих вкладок jQuery UI (не мой выбор, и я не могу его контролировать). Это вложенная вкладка с именем первого уровня div - tabs. Так я инициализировал вкладки 

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

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

Я не могу понять, как перехватить какие-либо события или свойства (выбранная вкладка, когда нажата вкладка и т. Д.). Буду признателен за любую помощь в этом ...

Я пробовал такие вещи, как: 

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

              (OR)

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

безуспешно.

Ниже находится разметка 

<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>

Ответы [ 7 ]

59 голосов
/ 15 марта 2013

кажется, что старые версии jquery ui больше не поддерживают событие select.

Этот код будет работать с новыми версиями: 

$('.selector').tabs({
                    activate: function(event ,ui){
                        //console.log(event);
                        console.log(ui.newTab.index());
                    }
});
41 голосов
/ 04 сентября 2010

Правильный метод для захвата события выбора вкладки состоит в том, чтобы установить функцию в качестве значения для параметра select при инициализации вкладок (вы также можете установить их динамически впоследствии), например: 

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

Вы можете увидеть реальный код в действии здесь: http://jsfiddle.net/mZLDk/

Редактировать: С помощью ссылки, которую вы мне дали, я создал тестовую среду для jQuery 1.2.3с jQuery UI 1.5 (я думаю?).Некоторые вещи явно изменились с тех пор.Не было отдельного объекта ui, который был бы отделен от исходного объекта event.Код выглядит примерно так: 

// 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);
    }
});

Фу.Если здесь есть чему поучиться, так это то, что поддерживать устаревший код сложно.Смотрите jsfiddle больше: http://jsfiddle.net/qCfnL/1/

5 голосов
/ 27 ноября 2013

В этом посте показан полный рабочий HTML-файл в качестве примера запуска кода, запускаемого при нажатии на вкладку.Метод .on () теперь является способом, с помощью которого jQuery предлагает обрабатывать события.

История разработки jQuery

Чтобы что-то произошло, когда пользователь нажимает на вкладку, можносделать это путем присвоения элементу списка идентификатора. 

<li id="list">

Затем сослаться на идентификатор. 

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

Убедитесь, что вы используете текущую версию API jQuery.Ссылаясь на API jQuery от Google, вы можете получить ссылку здесь:

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

Вот полная рабочая копия страницы с вкладками, которая вызывает предупреждение при нажатии горизонтальной вкладки 1,

<code><!-- 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;
}
2 голосов
/ 13 мая 2014

В более поздних версиях JQuery они изменили функцию от выбора до активации.http://api.jqueryui.com/tabs/#event-activate

2 голосов
/ 04 сентября 2010

Из того, что я могу сказать, согласно документации здесь: http://jqueryui.com/demos/tabs/#event-select, кажется, что вы не совсем правильно его инициализируете.Демонстрация заявляет, что вам нужен основной обернутый элемент <div>, с элементом <ul> или, возможно, <ol>, представляющим вкладки, а затем элемент для каждой вкладки (предположительно, <div> или <p>, возможно<section>, если мы используем HTML5).Затем вы вызываете $ (). Tabs () на главном <div>, а не на элементе <ul>.

После этого вы можете без проблем выполнить привязку к событию tabsselect.Проверьте эту скрипку для базового, базового примера:

http://jsfiddle.net/KE96S/

1 голос
/ 19 ноября 2014

Просто: 

$("#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());
});

Но вы должны добавить имя класса к вашим якорям с именем "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>
0 голосов
/ 03 января 2018

Просто используйте событие при нажатии для показанной вкладки. 

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