Запрет вызова «показать» событие JQuery вкладки - PullRequest
Новая
       32

Запрет вызова «показать» событие JQuery вкладки

0 голосов
/ 20 сентября 2018

Я использую вкладки jquery в приложении MVC.Исходя из того, какая вкладка выбрана, я не хочу получать сообщения и отменяю событие шоу выбранной вкладки.

Есть ли способ отменить событие "показать" вкладок jquery?

код: 

$tabs = $("#resultTabs").tabs();

   var selectedTab = $tabs.tabs('option', 'selected');

    $tabs.tabs("select", (selectedTab));

       $tabs.tabs({
        select: function (e) {
            if (selectedTab != 4 && GetQuickViewValidation()) {
                e.stopPropagation();
                return;
            }
        },
        show: function (event, ui) {
            LoadResultTab(true, false);
        }
    });

1 Ответ

0 голосов
/ 20 сентября 2018

Требование

  • Вы хотите запретить отображение вкладки вызова

Решение:

  • Вынеобходимо использовать beforeActivate: function(event, ui) событие для вкладки
  • Вы сможете получить доступ к тому, что нажали event здесь
  • Используйте event.preventDefault();, чтобы остановить событие изменения вкладки

Пожалуйста, проверьте ниже код: 

$('#tabs').tabs({
  beforeActivate: function(event, ui) {
    if (confirm('Do you want to tab switch?')==false) {
      event.preventDefault(); // prevent switching tabs
    }
  }
});
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <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">
    <p>You are wathing <b>tab 1</b> here.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  </div>
  <div id="tabs-2">
    <p>You are wathing <b>tab 2</b> here.</p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="tabs-3">
      <p>You are wathing <b>tab 3</b> here.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

  </div>
</div>

Здесь вы сможете переключать вкладки, только принимая OK.

...