Интерфейс jQuery UI Tabs, когда родительский элемент панели вкладок свернут - PullRequest
Новая
       10

Интерфейс jQuery UI Tabs, когда родительский элемент панели вкладок свернут

1 голос
/ 31 декабря 2010

Я создаю панель управления, которая использует вкладки пользовательского интерфейса jQuery и выглядит следующим образом:

alt text

Вкладки находятся в верхнем колонтитуле, а панели вкладок вложены в родительский элемент под единое целое (div.form-panel-contents), которое я использую для расширения / свертывания содержимого панели. Проблема заключается в том, что когда я сворачиваю содержащий div с помощью slideUp, каким-то образом Tabs обнаруживает, что контейнер панелей вкладок не виден, и применяет класс CSS ui-tabs-hide к каждой из вложенных панелей вкладок, который устанавливает все панели вкладок на display: none.

У меня вопрос: как я могу остановить применение класса ui-tabs-hide, когда родительский div свернут?

Когда я изменяю состояние содержащего элемента div, я хочу, чтобы состояние панелей вкладок оставалось неповрежденным, чтобы скольжение вверх / вниз выглядело плавным. Мне также любопытно, как инструмент вообще обнаруживает, что родительский элемент был свернут в первую очередь.

Код: 

if ($.fn.tabs)
    $(".ui-tabs").tabs();

- 

<div class="widget ui-tabs form-panel-container">
    <ul class="title_bar">
        <li class="handle"><h5>New Panel Look - Test <span class="asterisk"></span></h5></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_1">Tab Name 1</a></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_2">Tab Name 2</a></li>
        <li class="leaf"><a class="leaf_link" href="#tab_name_3">Tab Name 3</a></li>                        
        <li class="handle_buttons"><a href="" class="handle_btn expand"></a><a href="" class="handle_btn question"></a></li>
    </ul>
    <div class="form-panel-contents">
        <div>
            <div id="tab_name_1">
                <div class="text_area">
                    <div class="padder">
                        <p> content content content content content content content content content content content content content content content content content content</p>
                    </div>
                </div>
                <div class="action_bar">
                    <div class="pad">
                        <a href="" class="btn"><label></label>Name of Button</a>
                    </div>
                </div>
            </div><!-- end wrapper div -->
            <div class="text_area" id="tab_name_2">
                <div class="padder">
                    <textarea>content content content content content content content content content content content content</textarea>
                </div>
            </div>
            <div class="text_area" id="tab_name_3">
                <div class="padder">
                    <h5>Input Something<span class="asterisk"></span></h5>
                    <div class="title_container"><input type="text" id="title"></div>
                </div>
            </div>
        </div>
    </div>
</div>

1 Ответ

1 голос
/ 31 декабря 2010

Я понял, в чем проблема.Очевидно, у меня был дополнительный anchor tag, который добавлялся в элемент li.handle_button, этот якорный тег не был связан с вкладками, но был для чего-то особенного.Только наличие этого тега повлияло на поведение вкладок jQuery.Я изменил этот элемент на span, и теперь все отлично работает.

...