Как объединить диалог пользовательского интерфейса с вкладками пользовательского интерфейса в jQuery?

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

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

Проблема в том, что панель пользовательского интерфейса вкладок принимает только <li>, потому что это <ul>. Если я хочу добавить туда что-то еще, мне нужно заключить это в <li>, и это вызывает много проблем, или я не вижу простого решения.

Может кто-нибудь мне помочь?

Вот мой текущий код:

<script type="text/javascript">
    $(document).ready(function() {
        $('#dialog-movie-info').dialog({
            draggable: false,
            resizable: false,
            show: 'fade',
            hide: 'fade',
            modal: true,
            height: 370,
            width: 650,
            position: ['center', 35],
            open: function() {
                //$('.ui-dialog-titlebar-close').appendTo('#ui-tab-dialog-close');
                $(this).parent().children('.ui-dialog-titlebar').remove();
                $('#tabs-movie').tabs();
            },
            close: function() {
                $(this).find('#tab-info').children().remove();
                $(this).dialog('destroy');
            }
        });
    }
</script>
<div id="dialog-movie-info" class="ui-helper-hidden">
  <div id="tabs-movie">
    <ul>
      <li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li>
      <li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li>
    </ul>
    <div id="tab-info">
      <em>Info tab...</em>
    </div>
    <div id="tab-cast">
      <em>Cast tab...</em>
    </div>
  </div>
</div>

jquery jquery-ui jquery-ui-dialog jquery-ui-tabs
person rfgamaral    schedule 30.11.2010    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Я нахожу решение, которое отлично работает для меня:

JavaScript:

$(document).ready(function() {
    $('#tabs-movie').tabs();

    $('#dialog-movie-info').dialog({
        closeOnEscape: false,
        draggable: false,
        resizable: false,
        autoOpen: false,
        open: function() {
            $(this).find('.ui-dialog-titlebar-close').blur();
        }
    }).parent().find('.ui-dialog-titlebar-close').prependTo('#tabs-movie').closest('.ui-dialog').children('.ui-dialog-titlebar').remove();
});

HTML:

<div id="dialog-movie-info">
  <div id="tabs-movie">
    <ul>
      <li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li>
      <li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li>
    </ul>
    <div id="tab-info"></div>
    <div id="tab-cast">
      <em>Cast Tab!</em>
    </div>
  </div>
</div>

CSS:

#tabs-movie {
    border: none;
    padding: 0;
}
person rfgamaral    schedule 30.11.2010