如何将UI对话框与jQuery中的UI选项卡结合起来？

问题描述：

所以我试图将对话框与Tabs UI组件形成jQuery UI我几乎在那里，但我似乎无法将对话框关闭按钮从对话框UI标题栏移动到Tabs UI。如何将UI对话框与jQuery中的UI选项卡结合起来？

我试图将前面的对话框用户界面标题栏关闭按钮移动到标签用户界面栏，但提出了很多问题和鼠标悬停时移动的按钮。我尝试使用Tabs UI栏中的关闭图标创建按钮，但这被证明很难将按钮定位在最右侧，具有按钮的外观和感觉（带有关闭图标）。

问题是标签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>

答

我发现我的伟大工程的解决方案：

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

如何将UI对话框与jQuery中的UI选项卡结合起来？

相关推荐