Показать другой div на активной вкладке в пользовательском интерфейсе jQuery Tabs - PullRequest
Новая
       27

Показать другой div на активной вкладке в пользовательском интерфейсе jQuery Tabs

1 голос
/ 12 марта 2011

Мне интересно, как показать еще один div, когда активен ряд вкладок в jQuery UI Tabs.

tabs-1 содержит небольшое количество текста, в то время как другие вкладки 2-4 содержат намного больше текста, поэтому эти вкладки - когда они активны - простираются далеко вниз по странице. Я хотел бы заполнить боковую панель большим количеством контента в # myotherdiv, когда активна любая из вкладок со 2 по 4.

Так что, если tabs-3 активен, как мне также получить еще один div, то есть .extradiv для показа вне #tabs div в #sidebar?

Нужно ли подключаться к активному состоянию вкладки с помощью jQuery, чтобы отобразить .extradiv в #sidebar? Как-нибудь иначе?

4/26/11 ответ ниже работает

Базовая структура вкладки jQuery UI 

<div id="tabs">
<ul>
<li><a href="#tabs-1"></a></li>
<li><a href="#tabs-2"></a></li>
<li><a href="#tabs-3"></a></li>
<li><a href="#tabs-4"></a></li>
</ul>

<div id="tabs-1">
"short" content
</div>

<div id="tabs-2">
"long" content
</div>

<div id="tabs-3">
"long" content
</div>

<div id="tabs-4">
"long" content
</div>

</div>

Боковая панель 

<div id="sidebar" class="widget">

<div class="extradiv">content</div>

</div>

Ответы [ 4 ]

1 голос
/ 21 марта 2011

Предложение Фреда, похоже, работает.Возможно, вы неправильно настроили свой CSS?Демо здесь: http://jsbin.com/ateru6/5

Вы можете посмотреть источник здесь: http://jsbin.com/ateru6/5/edit

JavaScript: 

$('#sidebar .extradiv').hide();

$tabs = $('#tabs').tabs({
  show: function(event,ui) {
        var height = $(ui.panel).height();
        $('#tabHeight').html(height);
        if (height > 200) {
           $('#sidebar .extradiv').show();
        }
        else {
           $('#sidebar .extradiv').hide();
        }
    }
});

CSS: 

  #tabs
  {
    width: 400px;
    margin-left: 6em;
  }

  #sidebar
  {
    position: fixed;
    top: 1em;
    left: 0;
    width: 5em;
    border: 2px solid gray;
    padding: 0.5em;
  }

  #sidebar .extradiv
  {
    color: blue;
  }

  #tabHeight
  {
    overflow: hidden;
    color: red;
    text-overflow: ellipsis;
   }
1 голос
/ 23 марта 2011

Обработчик события load срабатывает только при динамической загрузке вкладки. Вместо этого используйте событие show: 

    $('#tabs').tabs({
        show: function (event, ui) {
            var height = $(ui.panel).height();
            if (height > 200) {
                $('#sidebar .extradiv').show();
            } else {
                $('#sidebar .extradiv').hide();
            }
        }
    });
0 голосов
/ 25 марта 2011

Это работает:

попробуйте увидеть красный div, когда вы перейдете на вкладку 3

http://jsfiddle.net/Ln4L7/2/

0 голосов
/ 12 марта 2011

Добавьте load обработчик событий и проверьте, какая вкладка загружается (или размер вкладки), если вы хотите сделать ее более динамичной.Добавляйте дополнительный контент, когда эта вкладка выбрана или размер вкладки превышает определенный порог.См. документацию на сайте jQuery UI для получения дополнительных примеров того, как добавить обработчики событий для виджета Tab. 

$('#tabs').tabs({
    ...
    load: function(event,ui) {
        var height = $(ui.panel).height();
        if (height > _some_fixed_height) {
           $('.sidebar .extra_content').show();
        }
        else {
           $('.sidebar .extra_content').hide();
        }
    }
});
...