Вкладки jQueryUI отображаются () на определенной вкладке?

ProgramBox

Вкладки jQueryUI отображаются () на определенной вкладке?

Post author:admin
Запись опубликована:2 апреля, 2023
Post category:Вопросы по программированию

#jquery #jquery-ui #jquery-ui-tabs

#jquery #jquery-пользовательский интерфейс #jquery-ui-tabs

Вопрос:

Я все проверял, но, похоже, не могу найти, как заставить событие show () реагировать только на определенную вкладку?

У меня есть следующая вкладка:

 <div id='tabs' class='ui-tabs'>
  <ul class='ui-tabs-nav'>
    <li><a href='#tabs-1'>tab 1</a></li>
    <li><a href='#tabs-2'>tab 2</a></li>
    <li><a href='#tabs-3'>tab 3</a></li>
  </ul>

  <div id='tabs-1'></div>
  <div id='tabs-2'></div>
  <div id='tabs-3'></div>
</div>

И я хочу, чтобы событие show() реагировало только на отображение идентификатора 1.
Возможно ли это? 🙂

Мой JS:

 $(function() { 
  $('#tabs').tabs({
    cookie: {expires: 1}, 
    show: function(event, ui) {
      $('#campaigns-attached').delegate('li', 'dblclick', function() { $('#campaigns-non-attached').append(this); var id = this.getAttribute('id'); campaignsAttachRemove(id); });
      $('#campaigns-non-attached').delegate('li', 'dblclick', function() { $('#campaigns-attached').append(this); var id = this.getAttribute('id'); campaignsAttachThis(id); });
      $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
      $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
    }
  }).disableSelection();
});

usersAttachThis() и usersAttachRemove() являются функциями обратного вызова AJAX.
Итак, если я сменю вкладку, а затем вернусь на вкладку, где мне нужна функция delegate(), она отреагирует 3 раза.

Итак, мне нужно сказать что-то вроде

 if (tabSelected == "tabs-1") {
  $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
  $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
}

ИЛИ найдите другой, чтобы сделать это вместо delegate()?

Ответ №1:

Если бы это было возможно, а я почти уверен, что это не так, это привело бы к аннулированию согласованности компонента. Вместо этого, почему у вас нет события «show», вызывающего функцию в вашем скрипте, такую как «fauxShow», и в «fauxShow» проверьте, была ли выбрана вкладка с id =»1″, а затем вызовите функцию «realShow».

Есть десятки способов сделать это, но это могло бы помочь получить лучший ответ, если бы вы могли объяснить, почему вы хотите, чтобы событие вызывалось только на одной вкладке, а не на других.

1. Просто отредактировал вопрос, чтобы показать больше кода и лучшее объяснение 🙂

2. Вам нужно будет переместить «if» внутри анонимной функции, которую вы назначаете событию «dblclick». Как только вы вызываете ‘$»(элемент»). делегировать(….);’ тогда эта анонимная функция будет вызываться каждый раз при возникновении события «dblclick».

3. Я нашел ответ, просто выполнив отмену делегирования перед выполнением нового делегата 🙂 В любом случае спасибо за помощь 🙂

Ответ №2:

 $(function() { 
  $('#tabs').tabs({
    cookie: {expires: 1}, 
    show: function(event, ui) {
      $('#campaigns-attached').undelegate('li', 'dblclick');
      $('#campaigns-attached').delegate('li', 'dblclick', function() { $('#campaigns-non-attached').append(this); var id = this.getAttribute('id'); campaignsAttachRemove(id); });
      $('#campaigns-non-attached').undelegate('li', 'dblclick');
      $('#campaigns-non-attached').delegate('li', 'dblclick', function() { $('#campaigns-attached').append(this); var id = this.getAttribute('id'); campaignsAttachThis(id); });
      $('#users-attached').undelegate('li', 'dblclick');
      $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
      $('#users-non-attached').undelegate('li', 'dblclick');
      $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
    }
  }).disableSelection();
});

Я нашел ответ 🙂
Просто используйте опцию undelegate() перед использованием опции delegate(). Тогда он не будет срабатывать дважды.