如何在 jQuery 中将 UI Dialog 与 UI Tabs 结合起来？答案

【问题标题】：How to combine UI Dialog with UI Tabs in jQuery?如何在 jQuery 中将 UI Dialog 与 UI Tabs 结合起来？
【发布时间】：2011-05-18 02:34:40
【问题描述】：

所以我正在尝试将 Dialog 与 jQuery UI 中的 Tabs UI 组件结合起来，我快到了，但我似乎无法将对话框关闭按钮从 Dialog UI 标题栏移动到 Tabs UI。

我尝试将现有的对话框 UI 标题栏关闭按钮移动到选项卡 UI 栏，但这会带来很多问题，并且按钮会在鼠标悬停时移动。我尝试在选项卡 UI 栏中创建带有关闭图标的按钮，但事实证明很难将按钮放置在最右侧，并具有按钮的外观和感觉（上面带有关闭图标）。

问题在于 Tabs UI 栏只接受<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-tabs jquery-ui-dialog

【解决方案1】：

我找到了一个非常适合我的解决方案：

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;
}

【讨论】：